vue 罕用个性
表单基本操作
获取单选框中的值
通过v-model<!---1. 两个单选框须要同时通过v-model 双向绑定 一个值 ----><!---2. 每一个单选框必须要有value属性且value值不能一样 ----><!---3. 当某一个单选框选中的时候v-model会将以后的value值扭转data中的数据 ----><!---上面是监控gender ----><!---laber的for属性的作用： 通过for属性，能够实现通过点击label标签来 达到相当于点击input的作用 ----><div id="app"> <label for="male">男</label> <input type="radio" id="male" value="1" v-model='gender'> <label for="female">女</label> <input type="radio" id="female" value="2" v-model='gender'></div><script src="./js/vue.js"></script><script> var vm= new Vue({ el:"#app" data: { // 默认会让以后的 value 值为 2 的单选框选中 gender: 2, }, })</script>获取复选框中的值
1. 通过v-model2. 和获取单选框中的值一样3. 复选框checkbox这种的组合时 data 中的 hobby 咱们要定义成数组 否则无奈实现多选<!--- 1. 复选框须要通过v-model双向绑定一个值 2. 每一个复选框必须要有一个value且不能相等
---> <!--上面监控是hooby --><div id="app"> <span>喜好：</span> <input type="checkbox" id="ball" value="1" v-model='hobby'> <label for="ball">篮球</label> <input type="checkbox" id="sing" value="2" v-model='hobby'> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model='hobby'> <label for="code">写代码</label></div><script src="./js/vue.js"></script><script> var vm= new Vue({ el:"#app" data: { // 默认会让以后的 value 值为 2 和 3 的复选框选中 hobby: ['2', '3'], }, })</script>```- 获取下拉框和文本框中的值
通过v-model
<div id="app"> <!-- 1. 须要给select通过v-model双向绑定一个直 2. 每一个option必须要有value属性且值不能一样 3. 当某一个option选中的时候v-model会将以后value的值更新至data的数据中 --> <!--上面监控的是occupation --> <span>职业：</span> <!--- multiple 是多选属性---> <select v-model='occupation' multiple> <option value="0">请抉择职业...</option> <option value="1">老师</option> <option value="2">软件工程师</option> <option value="3">律师</option> </select> <!-- textarea 是 一个双标签 不须要绑定value 属性的 --> <textarea v-model='desc'></textarea></div><script src="./js/vue.js"></script><script> var vm= new Vue({ el:"#app" data: { // 默认会让以后的 value 值为 2 和 3 的下拉框选中 occupation: ['2', '3'], desc: 'hello vue.js' }, })</script>- 表单修饰符
1 .number 转换为数值
**留神：** 1. 当开始输出非数字的字符串时，因为Vue无奈将字符串转换成数值 2. 所以属性值将实时更新成雷同的字符串。即便前面输出数字，也将被视作字符串 `2 .trim 主动过滤用户输出的首尾空白字符` **留神：** 1. 只能去掉首尾的 不能去除两头的空格 `3 .lazy 将input事件切换成change事件` **留神：** 1. lazy 修饰符提早了同步更新属性值的机会。 2. 行将本来绑定在 input 事件的同步逻辑转变为绑定在 change 事件上（失去焦点后才会触发）- 自定义指令
1. 内置指令不能满足咱们非凡的需要2. Vue 容许咱们自定义指令
Vue.directive 注册全局指令
<!--- 应用自定义的指令，只需在对用的元素中， 加上'v-'的前缀造成相似于外部指令'v-if'，'v-text'的模式。--><div id="app"> <!---应用自定义指令 v-focus ---> <input v-focus type="text" ></div><script src="./js/vue.js"></script><script> //1. 在自定义指令中，如果以驼峰命名的形式如 Vue.directive('focusA',function(){}) //2. 在HTML中应用的时候 只能通过 v-focus-a 来应用 // 注册一个全局自定义指令 v-focus 获取焦点 Vue.directive('focus',{ //当绑定的元素插入DOM中 其中el为DOM元素 inserted:function(el){ //聚焦元素 el.focus() } }) var vm= new Vue({ el:"#app" })</script>Vue.directive 注册全局指令 带参数
<div id="app"> <!---应用自定义指令 v-focus ---> <input v-color=“msg” type="text" ></div><script src="./js/vue.js"></script><script> //1. 在自定义指令中，如果以驼峰命名的形式如 Vue.directive('focusA',function(){}) //2. 在HTML中应用的时候 只能通过 v-focus-a 来应用 // 注册一个全局自定义指令 v-focus 获取焦点 Vue.directive('color',{ //bind 申明周期，只调用一次，指令第一绑定到元素时调用 在这里能够进行一次性的初始化设置 // el 为以后自定义指令的DOM元素 // binding 为自定义的函数形参通过自定义属性传递过去的值存在binding.value 外面 // bind和inserted 都称之为钩子函数简略了解就是：在某一机会主动调用的函数 bind:function(el，binding){ // 依据指令的参数设置背景色 el.style.backgroundColor = binding.value.color; } }) var vm= new Vue({ el:"#app", data: { msg: { color: 'blue' } } })</script>- 自定义指令部分指令
1. 部分指令，须要定义在 directives 的选项 用法和全局用法一样2. 部分指令只能在以后组件外面应用3. 当全局指令和部分指令同名时以部分指令为准
<div id="app"> <input v-color=“msg” type="text" v-focus ></div><script src="./js/vue.js"></script><script> var vm= new Vue({ el:"#app", data: { msg: { color: 'blue' } }, //部分指令，须要定义在 directives 的选项 directives: { color: { bind: function(el, binding){ el.style.backgroundColor = binding.value.color; } }, focus: { inserted: function(el) { el.focus(); } }, } })</script>- 计算属性 computed
1. 模板中放入太多的逻辑会让模板过重且难以保护 应用计算属性能够让模板更加的简洁2. 计算属性是基于它们的响应式依赖进行缓存的3. computed比拟适宜对多个变量或者对象进行解决后返回一个后果值，也就是数多个变量中的某一个值产生了变动则咱们监控的这个值也就会发生变化
<div id="app"> <span>商品数量：</span> <input type="text" v-model="num"> <span>商品单价：</span> <input type="text" v-model="price"> 总价:{{totalPrice}}</div><script src="./js/vue.js"></script><script> var vm = new Vue({ el: "#app", data: { num: '', price: '' }, //计算属性：在定义的时候是一个办法然而在调用的时候是一个属性 computed: { totalPrice() { return this.num * this.price * 0.8; } }, })</script>计算属性与办法的区别
`1. 计算属性与办法的区别:计算属性是基于依赖(依赖数据)进行缓存的，而办法不缓存`2. 依赖的数据不变动计算属性的办法是不执行第二次的3. 如果计算属性的办法是一个耗时的话 数据不变的状况下能够间接拿出第一次计算的后果能够解决资源- 侦听器 watch
1.应用watch来响应数据的变动2. 个别用于异步或者开销较大的操作3. watch 中的属性 肯定是data 中 曾经存在的数据4. 当须要监听一个对象的扭转时，一般的watch办法无奈监听到对象外部属性的扭转，只有data中的数据才可能监听到变动，此时就须要deep属性对对象进行深度监听
<div id="app"> <div> <span>名：</span> <span> <input type="text" v-model='firstName'> </span> </div> <div> <span>姓：</span> <span> <input type="text" v-model='lastName'> </span> </div> <div>{{fullName}}</div></div><script src="./js/vue.js"></script><script> // 侦听器 var vm = new Vue({ el: '#app', data: { firstName: 'Jim', lastName: 'Green', }, //watch属性定义和data,methods平级 watch: { // 留神：这里firstName对应着data中的firstName // 当firstName值扭转的时候会主动触发 watch firstName: function(val) { this.fullName = val + ' ' + this.lastName; }, // 留神：这里lastName对应着data中的lastName lastName: function(val) { this.fullName = this.firstName + ' ' + val; } } }); </script>- 过滤器
1. Vue.js容许自定义过滤器，可被用于一些常见的文本格式化。2. 过滤器能够用在两个中央：双花括号插值和v-bind表达式。3. 过滤器应该被增加在JavaScript表达式的尾部，由“管道”符号批示4. 反对级联操作5. 过滤器不扭转真正的data，而只是扭转渲染的后果，并返回过滤后的版本6. 全局注册时是filter，没有s的。而部分过滤器是filters，是有s的
<div id="app"> <input type="text" v-model="msg"> <div>{{msg | upper}}</div> <!-- 能够连在一起写 --> <div>{{msg | upper |lower}}</div> <!-- 动静属性绑定也能够应用过滤器 --> <div :abc="msg | upper">测试数据</div></div><script src="./js/vue.js"></script><script> // 定义将首字母大写过滤器：全局过滤器 Vue.filter('upper', (val) => { return val.charAt(0).toUpperCase() + val.slice(1) }) // 定义将首字母小写过滤器 Vue.filter('lower', (val) => { return val.charAt(0).toLowerCase() + val.slice(1) }) var vm = new Vue({ el: "#app", data: { msg: '', } })</script>过滤器中传递参数
<div id="box"> <!-- filterA 被定义为接管三个参数的过滤器函数。 其中 message 的值作为第一个参数， 一般字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。 --> {{ message | filterA('arg1', 'arg2') }}</div><script> // 在过滤器中 第一个参数 对应的是 管道符后面的数据 n此时对应 message // 第2个参数 a 对应 实参 arg1 字符串 // 第3个参数 b 对应 实参 arg2 字符串 Vue.filter('filterA',function(n,a,b){ if(n<10){ return n+a; }else{ return n+b; } }); new Vue({ el:"#box", data:{ message: "哈哈哈" } })</script>生命周期
`1. 事物从出世到死亡的过程``2. Vue实例从创立 到销毁的过程 ，这些过程中会随同着一些函数的自调用。咱们称这些函数为钩子函数`
| beforeCreate | 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM构造都没有初始化 什么都做不了 |
|---|---|
| created | 在实例创立实现后被立刻调用此时data 和 methods曾经能够应用 然而页面还没有渲染进去 |
| beforeMount | 在挂载开始之前被调用 此时页面上还看不到实在数据 只是一个模板页面而已 |
| mounted | el被新创建的vm.$el替换，并挂载到实例下来之后调用该钩子。 数据曾经实在渲染到页面上 在这个钩子函数外面咱们能够应用一些第三方的插件 |
| beforeUpdate | 数据更新时调用，产生在虚构DOM打补丁之前。 页面上数据还是旧的 |
| updated | 因为数据更改导致的虚构DOM从新渲染和打补丁，在这之后会调用该钩子。 页面上数据曾经替换成最新的 |
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用 |
数组变异办法
`1. 在 Vue 中，间接批改对象属性的值无奈触发响应式。当你间接批改了对象属性的值，你会发现，只有数据改了，然而页面内容并没有扭转``2. 变异数组办法即放弃数组办法原有性能不变的前提下对其进行性能拓展`
| push() | 往数组最初面增加一个元素，胜利返回以后数组的长度 |
|---|---|
| pop() | 删除数组的最初一个元素，胜利返回删除元素的值 |
| shift() | 删除数组的第一个元素，胜利返回删除元素的值 |
| unshift() | 往数组最后面增加一个元素，胜利返回以后数组的长度 |
| splice() | 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原地位替换的值 |
| sort() | sort() 使数组依照字符编码默认从小到大排序,胜利返回排序后的数组 |
| reverse() | reverse() 将数组倒序，胜利返回倒序后的数组 |
- 替换数组
不会扭转原始数组，但总是返回一个新数组
| filter | filter() 办法创立一个新的数组，新数组中的元素是通过查看指定数组中符合条件的所有元素。 |
|---|---|
| concat | concat() 办法用于连贯两个或多个数组。该办法不会扭转现有的数组 |
| slice | slice() 办法可从已有的数组中返回选定的元素。该办法并不会批改数组，而是返回一个子数组 |
- 动静数组响应式数据
Vue.set(a,b,c) 让 触发视图从新更新一遍，数据动静起来a是要更改的数据 、 b是数据的第几项、 c是更改后的数据