VUE-Day02指令和数据绑定
什么是双向绑定：
即可以将内存中的数据绑定到界面上，同时又能将界面的修改反向更新回模型变量中(M-V,V-M)
何时使用双向绑定：
当需要绑定表单元素的值时，就使用双向绑定。
如何使用双向绑定：
<表单元素 v-model：value="模型变量">，其中：value可省略
双向绑定的原理：
Vue用一个死循环，反复扫描虚拟DOM树中的每个节点一一监视比对，如果希望只要界面发生变化，就立刻自动执行操作时：利用watch监视模型变量。(watch和methods同级)
只要绑定表单元素的值都用v-model，v-model相对于：不但可以把内存中的值绑到页面，当页面发生修改还会自动更新到内存中。(v-model双向绑定，：value单向)
键盘事件@keyup.13，限制只有按键盘回车键(13)时才执行操作。
各种表单元素的双向绑定：
①文本框:<input type="text">和文本域:<textarea> 都是绑定value
<ANY v-model="模型变量"> v-model自动绑定value属性
②单选按钮:<input type="radio" name="分组名" value="值" v-model="模型变量">
分组使用:M-V 如果模型变量的值等于value，则当前radio标签选中，否则不选中。
(lable标签可以扩大选中区域，name属性来锁定radio标签的单选范围)
V-M 将当前选中的radio元素的value值自动更新回模型变量。
③多选框:
<input type="checkbox" v-model="模型变量">
单用:自动绑定的是checked属性
④select:
<select v-model="模型变量">
<option value="值">
<option value="值">
... ...
M-V: 用模型变量的值和每个option的value做比较，如果某个option的value等于模型变量的值，则该option被选中。
V_M:当选中项发生改变的时候，自动将选中项的value，更新到模型变量中。
绑定class和style：
有两种方法绑定style
①将style当做普通字符串绑定
冒号绑定省去双花括号，里面表达式等均可，最终给出正确字符串即可。
<any class="不变的class列表" :class="模型变量"></any>
new Vue({
...,
data:{
模型变量:"可能变化的css列表"
}
})
把style属性当做字符串绑定，拼接，虽然实现了效果但是繁琐且不够直观。
②用对象方式绑定style
用style修改多个css属性会很繁琐，
<span :style="CSSchange"></span>
<script>
var vm=new Vue({
el:"#app'',
data:{
CSSchange:{ background:" ",color:" " }
}
})
</script>
v-model是双向绑定，只要想获取页面上用户的输入，就要使用v-model
计算属性
什么是：计算属性是数据库中没有保存的，但需要动态计算出来的值。
何时使用：如果一个值没有保存，需要每次动态计算获得。比如：购物车总价
如何使用：
new Vue({
...,
computed:{
属性名(){
...
return 属性值
}
}
})
界面中：界面中任意元素都可以用属性名来绑定。
<any>{{属性名}}</any>
普通方法：
methods:{
方法(){return 计算结果}
}
界面中：<any>{{函数名}}</any> 可同样达到效果
computed vs methods ：
相同：依赖的变量发生变化，都能自动更新
不同：①methods中要使用函数名()的调用语法
computed使用不加()的属性名即可
②如果需要显示多次时，
methods会重复计算多次
computed会缓存第一次计算的值，避免重复计算
computed比普通算法好的地方，可以缓存第一次计算的值，除非依赖的模型变量发生变化，才自动更新。
过滤器
什么是：过滤器就是接收原始值，经过再加工再显示。
何时使用：只要模型变量的原始值，不能直接使用。比如：性别(0/1)、实践(数据库中存储的是毫秒数)、存数字显示对应状态名。
Vue.filter("过滤器名字"，function(){ });
过滤器就是一个单独的函数，可以多个串联，在图形中用 | 连接。
MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
