一、绑定样式
-
class样式
-
写法:class="xxx" xxx可以是字符串、对象、数组。
-
字符串写法适用于：类名不确定，要动态获取。
-
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
-
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
-
style样式
-
:style="{fontSize: xxx}"其中xxx是动态值。
-
:style="[a,b]"其中a、b是样式对象。
二、条件渲染
-
v-if
写法：
(1). v-if="表达式"
(2). v-else-if="表达式"
(3). v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
-
v-show
写法： v-show="表达式"
适用于： 切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
三、列表渲染
-
v-for指令:
-
用于展示列表数据
-
语法：v-for="(item, index) in xxx" :key="yyy"
-
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
四、Vue数据监测
-
Vue监视数据的原理：
-
vue会监视data中所有层次的数据。
-
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
五、收集表单数据：
-
若：input type="text"，则v-model收集的是value值，用户输入的就是value值。
-
若：input type="radio"/，则v-model收集的是value值，且要给标签配置value值。
-
若：input type="checkbox"/
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
六、过滤器：
-
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
-
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
-
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
