1.表单操作
(1)基于Vue的表单操作
input 单行文本 处理方式就是使用 v-model双向绑定data中的数据
1 <input type="text" v-model='uname'>
radio 单选框 处理方式是先使用value属性给其赋值以便区分，之后再使用v-model双向绑定data中的数据
1 <input type="radio" id="male" value="1" v-model='gender'> 2 <label for="male">男</label> 3 <input type="radio" id="female" value="2" v-model='gender'> 4 <label for="female">女</label>
checkbox 多选框 处理方式是先使用value属性给其赋值以便区分，之后再使用v-model双向绑定data中的数据，与单选框不同之处在于，所绑定的data数据应该为一个数组
1 <span>爱好:</span> 2 <input type="checkbox" id="ball" value="1" v-model='hobby'> 3 <label for="ball">篮球</label> 4 <input type="checkbox" id="sing" value="2" v-model='hobby'> 5 <label for="sing">唱歌</label> 6 <input type="checkbox" id="code" value="3" v-model='hobby'> 7 <label for="code">写代码</label>
1 data:{ 2 uname:'lisi', 3 gender:1, 4 hobby:['1','2'] 5 },
select - option 下拉多选 处理方式是先在<option>标签中使用value属性给其赋值以便区分，之后在<select>标签中使用v-model双向绑定绑定data中的数据，与单选框以及多选框的区别在于既可以与data中所绑定的数据既可以是单个值也可以为一个数组，为单个值则表示单选，为一个数组则表示多选。
1 <select v-model='occupation' multiple='true'> 2 <option value="0">请选择职业...</option> 3 <option value="1">教师</option> 4 <option value="2">软件工程师</option> 5 <option value="3">律师</option> 6 </select>
1 data:{ 2 uname:'lisi', 3 // 单选框为单个值 4 gender:1, 5 // 多选框为一个数组 6 hobby:['1','2'], 7 // select - option 单选就为一个值，多选就为一个数组 8 occupation:['1','2'] 9 },
textarea 多行文本 使用方式与单行文本相同，即使用v-model与data中的数据进行双向绑定即可
1 <textarea v-model='desc'></textarea>
(2)表单域修饰符
number 转化为数值
trim 去掉开始和空格的结尾
lazy 将input事件切换为change事件, 鼠标失去焦点后才会触发
1 <input type="text" v-model.number='age'> 2 <input type="text" v-model.trim='info'> 3 <input type="text" v-model.lazy='msg'>
2.自定义指令
(1)为何需要自定义指令?
内置指令不满足需求
(2)定义的语法规则
全局指令定义
1 Vue.directive('自定义指令名称',{ 2 // 自定义指令实现逻辑 3 })
1 Vue.directive('focus',{ 2 inserted:function(el){ 3 // el表示指令所绑定的元素 4 el.focus(); 5 } 6 });
(3)自定义指令用法
1 <input type="text" v-focus>
(4)带参数的自定义指令(改变元素背景色)
自定义指令中的函数会自动传入以下参数
el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下 property：name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
1 Vue.directive('color',{ 2 bind:function(el,binding){ 3 // 根据指令的参数设置背景色 4 // console.log(binding.value.color); 5 el.style.backgroundColor = binding.value.color; 6 } 7 })
(5)指令的用法
1 <input type="text" v-color='msg'>
(6)局部指令
1 directives:{ 2 color:{ 3 bind:function(el,binding){ 4 // 根据指令的参数设置背景色 5 // console.log(binding.value.color); 6 el.style.backgroundColor = binding.value.color; 7 } 8 }, 9 focus:{ 10 inserted:function(el){ 11 el.focus(); 12 } 13 } 14 }
3.计算属性
为何需要计算属性?
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
计算属性的用法
1 computed:{ 2 reverseString:function(){ 3 return this.msg.split('').reverse().join(''); 4 } 5 }
计算属性与方法的区别
计算属性是基于它们的依赖缓存的
方法不需要缓存
4.侦听器
(1)应用场景
数据变化时执行异步或开销较大的操作
(2)侦听器的用法
1 watch:{ 2 firstName:function(val){ 3 this.fullName = val + ' ' + this.lastName; 4 }, 5 lastName:function(val){ 6 this.fullName = this.firstName + ' ' + val; 7 } 8 }
侦听的值:function(侦听的值){
// 执行逻辑
}
5.过滤器
作用
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
自定义过滤器
Vue.filter('过滤器名称',function(value){
// 过滤器业务逻辑
})
过滤器的使用
1 <div>{{msg | upper}}</div> 2 3 <div>{{msg | upper | lower}}</div> 4 5 div :abc='msg | upper'>测试数据</div>
局部过滤器
1 // 局部过滤器只能在本组件中使用 2 filters:{ 3 upper:function(val){ 4 return val.charAt(0).toUpperCase() + val.slice(1); 5 } 6 }
带参数的过滤器
Vue.filter('format',function(value,arg1){
// value就是过滤器传递的参数
})
过滤器的使用
1 <div>{{date | format('yyyy-MM-dd')}}</div>
6.生命周期
1.主要阶段
挂载(初始化相关属性)
beforeCreate
created
beforeMount
mounted
更新(元素或组件的变更操作)
beforeUpdate
updated
销毁(销毁相关属性)
beforeDestroy
Destroyed
2.Vue实例的生产过程
① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。
