weixin_40542544的博客

默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。.delete (捕获“删除”和“退格”键)自动将用户的输入值转化为数值类型。自动过滤用户输入的首尾空格。2.model修饰符。

前言 清除定时器，相信有相当一部分人是这么写的： export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer)

hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些 hash 能兼容到IE8， history 只能兼容到 IE10； 由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段） history存在中新增的pushState()和replaceState()方法 ...

1.mutations 里的同步意义在于，每个mutation执行完毕之后，可以得到对应的状态，使用devtools可以跟踪状态的变化 2.每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法 ...

简单介绍： 同步（Synchronization）：任务顺序执行，在上一个任务未执行完成之前下一个任务等待执行。 异步（Asynchronous ）： CUP暂时搁置当前任务，等到主线程任务执行完成，再来响应该任务。 运行机制： 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。 主线程之外，还存在一个“任务队列”（task queue），只要异步 任务有了运行结果，就在“任务队列”中放置一个事件。 一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任

class EventBus{ constructor(){ this.event=Object.create(null); }; //注册事件 on(name,fn){ if(!this.event[name]){ //一个事件可能有多个监听者 this.event[name]=[]; }; ...

1.先判断Promise 2.在判断MutationObserver 3.在判断setImmediate 4.最后setTimeout 如果以上都不支持就只能用setTimeout来完成异步执行了 延迟调用优先级如下：Promise > MutationObserver > setImmediate > setTimeout 每次event loop的最后，会有一个UI render，也就是更新DOM 只要让nextTick里的代码放在UI render步骤后面执行，就能访问到更新后的DO

Vue实现返回顶部功能 <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <di

import axios from 'axios' axios.defaults.baseURL = ... axios.defaults.timeout = 10000; axios.defaults.headers.post['Content-Type'] = 'application/json'; //请求拦截 axios.interceptors.request.use(config => { //可在此处登入 return config; }, error => { r

通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案 1.创建一个vue实例，导出这个实例 import Vue from 'Vue' export default new Vue 2.在两个需要通信的两个组件中分别引入这个bus.js import Bus from '这里是你引入bus.js的路径' // Bus可自由更换喜欢的名字 3.传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据。 Bus.$emit('click',data) /

1.表单修饰符 如果是简单的控制输入一定是数字或者去掉用户输入的收尾空白符，可以直接使用 Vue 提供的表单修饰符 .number 和 .trim 如果自动将用户的输入值转为数值类型，可以给v-model添加number修饰符： <input v-model.number="age" type="number"> 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： <input v-model.trim="msg"> change事件： 给表单

很多时候，我们会写一些嵌套组件，比如A的子组件是B,B的子组件是C。这个时候如果A传递props给B,B又得传递props给C,我们经常在B传给C的时候这么写： <template> <child-component :someprop1="someprop1" :someprop2="someprop2" :someprop3="someprop3" :someprop4

loader模块加载器（处理文件的转换）: 1.编译转换类，转移成js代码，css-loader,babel-loader,url-loader,html-loader,style-loader 2.文件操作类：file-loader 3.代码检查类：eslint-loader 2. plugin插件，处理文件 3.opitimization 生产环境的一些优化 4.devServer 开发服务器（热更新，代理，热拨插） 5.devtool 配置webpack的source-map ...

权限被管理员修改后立即生效 对于权限控制，需求大致为如下： 1.对于大模块的限制，比如需要通过路由跳转的模块，这时需要进行路由拦截 2. 对于小功能的限制，比如一个按钮，如果没有特定权限，那么这个按钮就不显示 安全行考虑 将存储放在localStorage中来实现长久存储，这种实现方式是很不可取的，因为hacker可以通过手动更改存储的信息来实现获取特定权限，甚至系统都没有做路由拦截，如果知道模块的路由，可以直接通过输入路由信息来直接跳转到特定模块。 权限被管理员修改后立即生效 我的做法是，获取到权限列表后

1、使用 HappyPack 来加速代码构建 原理： （1）由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。 （2）而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。 2、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 优化原理 （1）我们的项目依赖中通常会引用大量的 npm 包，而这些包

1.has (1)has方法用来拦截HasProperty操作（注意不是HasOwnProperty，即has方法不判断一个属性是对象自身的属性，还是继承的属性。），即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。可以接受两个参数，分别是目标对象、需查询的属性名。 (2)用于隐藏某些属性 // 隐藏_开头的属性 var handler = { has (target, key) { if (key[0] === '_') { return false;

Git 流程图 Workspace：工作区 Index / Stage：暂存区 Repository：仓库区（或本地仓库） Remote：远程仓库 配置Git # 查看系统配置 $ git config --list # 查看用户配置 $ cat ~/.gitconfig # 查看当前项目的 git 配置 $ cat .git/config # 查看暂存区的文件 $ git ls-files # 查看本地 git 命令历史 $ git reflog # 查看所有 git 命令 $ git --help

1.动态组件 前两天产品经理来了新的需求了，告诉我，需要根据用户的权限不同，页面上要显示不同的内容，然后我就哼哧哼哧的将不同权限对应的组件写了出来，然后再通过v-if来判断要显示哪个组件，就有了下面的代码 一般都会通过v-if,v-else-if去做判断，,我感觉我的代码洁癖症要犯了，不行，这样code review过不了关，我连自己这一关都过不了，这时候就改动态组件发挥作用了。 <template> <div class="info"> <component :i

安装一个插件，识别vue文件 2.新建代码片段 文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template&...

在编译器vscode上配置ESLint、Prettier、Vetur这个三个插件，然后在编译器左上角文件的首选项中找到设置，搜索找到setting.json文件进行配置。 配置如下: { “workbench.editor.enablePreview”: false, //打开文件不覆盖 “search.followSymlinks”: false, //关闭rg.exe进程 “editor.mi...

先在路由index.js文件里面初始化路由：最后在导出 let vueRouter = new Router( { routes: [] } ); //在此写动态加载路由的方法，也就是下面的方法 export default vueRouter; 坑： 1：使用vue 动态添加的路由，在页面刷新之后就会消失，所以得做本地存储，检查浏览器是否刷...

基础库: vue.js、vue-router、vuex、whatwg-fetch 编译/打包工具：webpack、babel、node-sass 单元测试工具：karma、mocha、sinon-chai 本地服务器：express 目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build ...

1.v-if 与v-show v-if 初始渲染 初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。 初始值为 true 时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。 切换 false => true 依次执行 beforeCreate,created,beforeMount,mou...

1、路由传参 ①定义路由时加上参数props: true，在定义路由路径时要留有参数占位符: name『用法: to="'路径/'＋value"』 ②在跳转到的页面加上参数props:[‘name’] ③在跳转到的页面就获取到了name『用法: js中直接this. name；html中直接插值{{ name}}』 2、父组件向子组件传值 ①父组件内设置要传的数据『data(){ id: valu...

1.vue双向绑定原理 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 2、实现一个指令解析器Compile，对每个元素节点的指令进行...

/** * 处理价格，默认是元，分第二个参数传100 * dealPrice(5) => 5.00；dealPrice(500, 100) => 5.00； */ export function dealPrice(x, d = 0) { let f = parseFloat(x); if (isNaN(f)) { return; } if (f == 0...

scroll 方法汇集 // import { isServer } from './index' const isServer = false; // [debounce 和 throttle](https://www.cnblogs.com/wilber2013/p/5893426.html) // const docE = document.documentElement // con...