缓月

  很久没有写博客了诶～  如果一个请求参数在多个方法里面有用到，例如：params = { avatar: '', follow_num: '', fan_num: '', like_num: '', nick: '', city: '', signature: '', gender: '' },可以统一封装一下：<script>const params = { avatar: '', follow_num: '',

文章目录一、ssr是什么？二、构建步骤1.初始化创建一个实例1）安装依赖2）构建模板文件3）node index.js查看效果2.总结一、ssr是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、构建步骤1.初始化创建一个实例初始化搭建可以参考这个博客：[https://www.jianshu.com/p/17bc00fc6993](https://www.jianshu.com/p/17bc00fc6993)1）安装依赖新建一个文件夹，输入

vue-ssr性能优化：减少服务端渲染DOM数：1.结合vue的插槽系统、内置component组件的is，利用vue ssr服务端只会执行beforeCreate和created生命周期的特性，封装自定义组件，该组件在mounted的时候将包裹的组件挂载到component组件的js属性上。2.vue高级异步组件封装延迟加载方法，只有当模块到达指定可视区域时在加载。开启多进程。node.js是单进程，单线程模型。开启缓存：1.页面级缓存：在创建render实例时利用LRU-C

如果一个.vue中有很多的事件都要进行emit抛出去，进行多次emit不如封装一下一次性抛出去。方法如下：vue中template部分：<div @click.stop="onClickHandler($event, 'yourEvent')"></div>// 优雅一点的写法，可以将string类型的事件命名为数字，一个数字代表一个事件。js部分： onClickHandler: debounce(function (e, eventType, subComme

一开始用…New set,但是这种方式只对[1,2,2,3,4]这种形式的数组生效。对数组里面全是对象的话就不生效了，所以取数组里面每个对象对应的id值进行filter处理。如下：aaa() { // 二级评论数组去重 const idMap = {}; return this.comInfo.aaa.filter((item) => { if (!idMap[item.id]) { idMap[item.id] = tru

将时间戳转化成「时间：分钟」的形式：time(first) { const date = new Date(first * 1000); // this.commentTime = date.toLocaleString(); const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours(); const minute = date.getMinutes() &lt

应用场景：  两个项目文件，一个是需要被调试的项目，一个是封装的组件项目。这里要做的是把组件项目设为全局，然后在调试项目里link再进行调试。做法：打开组件文件，拖到命令行里面复制路径（也有别的方式，但命令行绝对是最快最准确的）打开组件的项目，cd 你复制的路径，运行npm link。（如果是刚刚拉取下来的项目需要npm install一下）找到组件项目的package-lack.json文件，看第二行：’name’：’要复制下来的名字’打开要调试的项目，输入npm link 刚刚复制下来的

<video autoplay loop muted playsinline poster="original.jpg"> <source type="video/webm" src="original.webm"> <img src="original.gif"></video>  GIF上使用的无损压缩算法未经优化，以至于MP4或WebM之类的视频格式将提供比GIF图像小的文件大小。因此，解决GIF性能问题的一种方法是完全不使用GIF

  PM的需求是点击用户的×，删除当前用户名下所有的库和表。就即进行一个级联回调的操作。如下图：  主要做法就是利用map的k v键值对的方式。map键值对的知识点： var m = new Map(); m.set("edition", 6) // 键是字符串 m.set(262, "standard") // 键是数值 m.set(undefined, "nah") ...

首先看一下后端返回数据的格式：这里要取出数组里面所有的user并进行去重操作。代码：getAllUser() .then((res) => { const newArr = res.data.map(data => data.user); this.userList = [...new Set(newArr)]; }) .catch(() =&...

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{ background-color:rgba(47, 84, 201, 1);; border-color: rgba(47, 84, 201, 1);; }...

实现代码： <el-tooltip :content="data.label" :disabled="data.label.length>22?false:true" placement="top"> <span class="fieldWidth">{{ `${data.label} ${ data.i...

在选择使用SSR之前，需要考虑以下事项！SSR需要可以运行Node.js的服务器，学习成本相对较高。对于服务器而言，比仅提供静态文件，必须处理更高负载，考虑页面缓存等问题。一套代码两个执行环境。beforeCreate 和created 生命周期在服务器端渲染和客户端都会执行，如果在两套环境中加入具有副作用的代码或特定平台的API，会引起问题。vue-server-renderer 是...

四大特征： - state 用来数据共享数据存储- mutation 用来注册改变数据状态- getters 用来对共享数据进行过滤操作- action 解决异步改变共享数据（也有人说还有第五特征：modules）state里面就是存放的组件之间传递数据或组件的状态（这里将数据和状态统称为状态）mutations就是存放如何更改状态getters就是从state中派生出状态，比如...

修改一下引入的方法名即可解决。

首先在父组件中写一个click事件：template里面：<el-button type="primary" size="small" @click="delete">删 除</el-button>引入子组件部分：ref="SelfTable"是子组件在父组件中的名字<SelfTable ref="SelfTable"/>methods里面：在父...

记一次vue长列表的内存性能分析和优化

<template> <div> <div class="common-wrapper"> <!--列表--> <el-table :data="lists" ref="table" highlight-current-row v-loading="listLoading" style="width: 100...

template部分： <el-button icon="el-icon-check" round :indeterminate="isIndeterminate" v-model="checkAll" @click="selAll()">全选</el-button><el-button ...

<template> <el-form :model="ruleForm"> <h3 class="title">系统登录</h3> <el-form-item prop="mobile"> <el-input type="text" v-model="ruleForm.mobile" auto-co...

后端返回的数据是一串字符串，产品的需求是进行一系列的代码高亮操作，伤脑筋呀方法一、利用split进行切割断句&&高亮操作template部分：<div v-for="(item, index) in split" :key="index"> <table> <tr v-html="item" /> &lt...

了解vue-router原理中更新URL但不重载页面原理之一location.hash1.存在形式及意义一般情况下为URL后 “#” 及其后面一部分组成，如http://www.test.com/#/something，其中http://www.test.com为真实的路径，而#/something则为网页中的位置，称之为锚点在访问锚点时会自动跳刀锚点所在的网页位置，通常有两种方式作为锚...

vue cli3的安装：前提：已经安装过node.js。命令提示符输入：npm install -g @vue/cli（VUE CLI3的包名称由vue-cli改成@vue/cli。如果你已经安装了旧版本的vue-cli(1.x或2.x)，你先通过npm uninstall vue-cli -g或 yarn global remove vue-cli卸载它。不过我感觉直接安装可以覆盖掉旧...

Vue提供了watch来监听双向绑定过程中data的变化但是平时的开发过程中你可能会遇到watch并没有被触发。如果只是监听obj内的一个属性变化，可以直接使用obj.key进行监听。watch：{ 'obj.question':function(newQuestion.oldQuestion){ this.answer = 'Waiting for you to stop typin...

请说一下vue的生命周期（钩子函数）vue的生命周期经历阶段：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。(从诞生到死亡的全过程）beforeCreate、created(可以在created中首次拿到data中定义的数据）、beforeMount、mounted(dom树渲染结束，可以访问dom结构）、beforeUpdate、updated、before...

学习参考网址：https://ustbhuangyi.github.io/vue-analysis/v2/prepare/flow.htmlVue源码下载： https://github.com/vuejs/vue认识Flow  Flow是facebook出品的JavaScript静态类型检查工具。Vue.js利用Flow做了静态类型检查。  项目越复杂就越需要通过工具的手段来保证项目的维...

https://blog.youkuaiyun.com/qq_37782076/article/details/86503108

vue实现codemirror代码编辑器中的SQL代码格式化功能

地址：在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）