Vue-day2（讲解与案例）

1.表单如何进行处理
文本框：就是使用v-model进行双向数据绑定 ，其实绑定的就是文本框的value值
单选按钮：要给单选按钮添加value值，再去进行v-model双向数据绑定，其实绑定的就是刚刚设置的value值
复选按钮：要给复选按钮添加value值，再去进行v-model双向数据绑定，因为是复选按钮，可以选择多个的，所以双向绑定的数据应该是一个数组。
文本域：使用v-model来进行双向数据绑定，用法可以参照文本框的处理形式
下拉框：要给下拉框中的option设置value值，再去select中添加v-model双向数据绑定。

2.表单修饰符

3.自定义指令
语法结构：
Vue.directive(“指令名称”,{
//在配置对象中设置钩子函数来处理指令要做的事情
inserted:function( element ){
//element参数就是添加指令的那个元素
}
})

自动获取焦点的自定义指令：v-focus

Vue.directive(“focus”,{
inserted:function( element ){
element.focus();//调用元素的focus方法来让元素获取焦点。
}
})

创建带参数的自定义指令：v-color

Vue.directive(“color”,{
bind:function( element,binding ){
element.style.backgroundColor = binding.value;
}
})

4.计算属性
请输入圆的半径：
圆的周长:{{round}}
圆的面积:{{Math.PI * r * r}}
const vm = new Vue({
//通过el属性设置Vue根元素
el: “#app”,
//通过data属性来保存整个Vue需要使用的数据
data: {
//r绑定文本框中的圆的半径值
r:0
},
computed:{
round:function(){
return 2 * Math.PI * r
}
}
})

补充：
使用计算属性的好处
A.如果使用计算属性，页面中的插值表达式就不会是复杂的表达式，而是一个计算属性
让页面更加简洁一些。
B.计算属性会去运行对应的代码一次，然后将代码计算之后的结果缓存起来。下次再去使用计算属性的时候
不会重新进行计算，而是直接将之前计算的结果填入到页面中。
注意：当计算属性使用到的数据发生改变的时候，计算属性又会重新计算。

5.侦听器
请输入圆的半径：
圆的周长:{{round}}
圆的面积:{{area}}
const vm = new Vue({
//通过el属性设置Vue根元素
el: “#app”,
//通过data属性来保存整个Vue需要使用的数据
data: {
//r绑定文本框中的圆的半径值
r:0,
round:0,
area:0
},
watch:{
//侦听器中的函数名必须与需要侦听的数据属性名称保持一致
r:function( val ){
//形参val其实就是数据r的最新值
this.round = 2 * Math.PI * val;
this.area = Math.PI * val * val;
}
}
})

什么时候适合去使用watch呢？
异步比较适合，大部分情况下，我们建议使用计算属性computed。
开销非常大的情况下也会使用watch。运算的过程花了很长的时间进行处理和计算。

6.过滤器
创建过滤器的语法
Vue.filter(“过滤器的名称”,function( val,参数1…参数n ){
//val这个形参代表的就是需要过滤的数据，就是使用了过滤器的那个数据
return 格式化之后的结果
})

过滤器的作用就是可以将数据进行格式化处理再显示在页面中
{{ 数据名称 | 过滤器名称 }}
{{ 数据名称 | 过滤器名称(参数1…参数n) }}