pspxuan的博客

密码框禁止自动填充。

Watcher 依赖收集器 以及通知更新的喇叭，可以收集并管理 Watcher。他们之间的关系是多对多的，可以相互依赖更新。注意，此时只是定义了 get 方法，并没有执行收集依赖的过程，所有此时还没有根据 data 建立 对应的 Watcher。目标对象，所有监听的数据会生成一个 Watcher 实例，一 一对应。initState 中会执行 observer， 劫持所有数据，封装一层方法，如下。数组： 重写原型上的方法，用来劫持数据的改变。主要是用来数据绑定，以及定义收集依赖的方法。

业务逻辑 问题: tree 组件中，同一选项会出现多次，这样使用 id 指定 key 值时会出现交互问题，element 默认 key 值唯一 如下 解决方法： 自己循环所有数据项，创建新的 key 值，例如：语文组-张三 英语组-张三等。 再根据 key 值去操作 tree 中的节点是否勾选 ...

主要使用下面三个事件绑定 @dragstart=func(index, e) 开始拖元素触发，作用于拖拽元素， index为拖拽开始的位置 @dragover=func(index, e) 当元素拖动到drop元素上时触发，index为拖拽结束的位置 @drop=func(index, e) 当元素放下到drop元素触发，index为拖拽结束的位置 我主要是使用 @dragstart 以及 @drop 这两个事件 // html <li v-for="(item, in

vue-awesome-swiper 中文文档

使用 vue 写样式时，可以使用 scoped 属性，使组件得样式只在当前组件生效 原理： vue 会给每个节点添加一个属性值，并且处理样式时，给每个样式添加一个属性选择器，如下 // html <div class="fotter" data-v-001></div> // css .fotter[data-v-001] { /* ... */ } ...

mixins 是 vue 中用来解决代码夯余的问题 主要用来储存公用代码以及方法，( 登录，登出，固定跳转等 ) mixins 使用 定义 mixin 对象 (这个对象本质上也是一个 vue 实例) 调用 vue.mixin 方法混入当前对象 // 第一步: 定义全局对象 const mixin = { data() { return { //... } }, computed: { // ... }, methods: { //... } } // 第二步: 挂载.

vuex 解决了组件以及路由之间相互通讯和实时更新的问题 1. State state 提供统一公告资源，所有公共的变量可以放在 state 中存储 // 声明全局变量 const store = new Vuex.Store({ state: { count: 0 } }) /** * 调用全局变量 * 方法一： this.$store.state 调用 */ this.$store.state.count // this 指向全局 vue 实例 /** * 方法二： mapState.

思路： 自定义组件事件 bulr， 手动触发表单验证 el-select 组件中定义 bulr 事件 @blur.native.capture='onclick' 定义表单 rules 规则 手动触发对应表单规则校验 this.$refs[formName].validateField(type) formName：表单名称 type：表单属性 // html // 页面中我定义了多个表单，所以传入了表单 ref 名称。单个表单可以只传属性值 <el-select @blu.

Vue 项目完成后，因导入了大量的或体积较大的依赖包以及插件，导致项目变得非常臃肿。下面通过几个方面来优化页面的用户体验以及提升页面的响应速度。 1. nprogress 页面进度条效果 1.1.使用效果 在项目中安装使用 nprogress 依赖项，使用户获得更好的用户体验。使用后会在页面载入时出现页面顶部的进度条。效果如下： 1.2.安装使用方法( vue ui 面板 ) 先在项目中下...

ES6 导出导入 导入： import 模块名 from '模块标识符' 和 import '路径' 导出： export defalut 和 export 向外暴露成员 NODE 导出导入 导入： var 名称 = require(‘模块标识符’) 导出： module.exports 和 exports 注意：语法要成套使用，不要导出用 node ，导入用 ES6 语法 ...

1.render渲染页面 VUE中使用 render 属性可以配置一些覆盖当前VUE组件的html //js var log = { template: '<h1>登录</h1>' } var vm = new Vue({ el:'#app', data:{}, render: function (creatElements){ return cr...

watch 使用watch可以监听当前data中的数据（变化），如下 var vm = new Vue({ //...... data: { name: "张三" }, watch: { "name": function() { //..... } } }) 上面的代码，我们在data中定义了...

1.路由是什么 在我们浏览网页的过程中，进入一个网页，大多时候就会发起一次http请求。 而前端中的路由，就是实现在页面中跳转而不会再次发送请求。 有时我们再网页中看到 地址中带有#符号，这就代表了当前使用了路由，详情点击 2.路由基础使用 分为五步 引入Vue-router文件，需要位于Vue.js文件之后 创建需要被路由使用的组件 实例化 VueRouter对象，定义routers属性 ...

$refs获取DOM元素 Vue中，使用$refs属性可以获取DOM元素。 注意：需要在DOM元素中挂载ref属性后才能使用 //html <p id="app" ref = "myp" @click = "oks">ok</p> //在 DOM中，需要设置 ref属性 //js let vm = new Vue({ el: "#app"...

1.定义全局组件 使用 Vue.component('组件名称', Vue.extend({}))定义全局组件 //html <div id="app"> <my-com1></my-com1> //使用组件 </div> //js Vue.component('myCom1', Vue.extend({ template...

概述 Vue中可以使用 <transition> 和 <transition-group> 标签来定义元素的过渡或动画效果 二者最大的区别是，在使用 v-for 循环时，必须使用<transition-group>标签。其他时候使用<transition> 1.css类名 你可以在CSS中使用过渡类名来定义，过渡的效果 .v-enter：过渡...

1.自定义全局指令 在 Vue 中，可以自定义v-if v-focus等指令的行为。 定义方式：在 js 中使用 Vue.derective 定义 Vue.directive('focus', {}) 上述代码可以看出，directive 也是vue的内置方法，有两个参数， 第一个参数为指令名称（注意：这里的指令不需要带上 v- 的前缀）。 第二个参数为一个对象，里面有内置的钩子函数，可以...

1.全局过滤器 定义全局过滤器直接在 Vue 实例对象外定义即可 在使用 {{ }} 输出数据时，可以直接在括号中加上 | +过滤器名称 ，如下 //html <p>{{ msg | msgFilter }}</p> //使用过滤器。 //此处 msgFilter 可以传参数。对应过滤器的第二个以及之后的参数 //js Vue.filter('msgFilter', ...

v-bind绑定属性（单向绑定：数据 --> 视图） 1.概述 v-bind可以绑定html中的属性，使得可以在Vue实例对象中操作该属性 属性值是一个表达式，尽管它有引号，所以说我们可以自己定义合法的表达式 注意：v-bind 可以使用 ： 简写 <p :title = "msg + '字符串'"></p> //msg 实际的值为 Vue 定义的数据 2.添加 c...

事件修饰符，顾名思义就是处理事件的修饰符 1.修饰符预览 .stop //阻止事件冒泡 .prevent //组止默认时事件（例如a标签的默认跳转） .capture //监听元素并优先触发在该元素上的事件（当元素发生冒泡时，谁有该事件修饰符，就先触发谁。 先看没有该修饰符的操作） .self //只有点击当前元素时候，才会触发事件处理函数,该元素的事件不会因为冒泡而触发。 ....

1. 直接在元素上通过 :style 写一个对象 在对象中设置颜色时要注意：颜色只能用单词表示，不能使用十六进制 #… 和 rgb形式 和 这两种都会报错 2. 在data中创建一个样式对象，通过:style引用 3. 在 :style中通过数组，引用多个data上的样式对象 ...

v-bind：单向绑定 v:model : 双向绑定