vue内置命令

vue的核心理念：用数据驱动DOM元素，程序员只需要维护好数据。

1. 作用于标签体的属性 v-text v-html v-pre v-once
   其中，关于v-text 和 v-html的区别，就相当于innerText和innerHtml，一个将内容当作单纯的文本，一个将内容当做html语言解析（可能会引起xss攻击，应当避免使用）
2. 作用于标签本身的属性 v-if v-else-if v-else v-show v-cloak，控制标签DOM元素的行为（插入/移除）
   其中，前三者的使用比较特殊。后两者前一定要有v-if且不能间隔别的东西
   v-cloak：在标签没有被完全解析使不显示，解析完毕后才会显示
   v-show的标签，DOM元素依然存在，只是diaplay:none；效果和v-if一样，但后者是不存在该DOM元素的
3. 作用于标签属性 v-bind v-on v-model
v-bind：基本用途是动态更新DOM元素上的属性(class,style,id等)，缩写是：，比如:class="class1",:class=[class1,class2]"
v-on:用于绑定事件监听器，缩写是@，比如@click="functionName"，默认是冒泡阶段执行，也可以通过.capture设置为捕获阶段执行，可以设置.prevent阻止默认事件发生，可以设置.stop阻止冒泡
   其中注意一下键盘事件keyup/keydown.keyName(其中，tab键只能搭配keydown使用)
   v-model:可以在表单 input、textarea以及select元素上创建双向数据绑定。本质上是v-bind和v-on的结合使用，前者负责data数据改变时页面渲染跟着变化，后者负责监听input事件，使得data数据=用户输入数据
   注意，v-model始终双向绑定的是 当前元素的value值=data中的变量 ，多选一或不定选 用的时候一定要设置value（option这种闭合标签可以自己提取文本内容作为value，不用特别设置），多选的话需要将变量设置为一个数组[]
   v-model可以有修饰符lazy,写作v-model.lazy,此时双向绑定的数据不会输入一个字符改一下，只有按下回车键时才会修改；修饰符number，将输入的数据转换为数字类型；修饰符trim，将输入的数据过滤前后的空格
4. 总结：
   • v-if和v-show 的区别和优缺点
     • v-if：条件渲染指令，根据表达式的值渲染/销毁DOM元素，可以用在template元素上（同一标签会复用）;开销大，适用于数据改变不频繁的场景
     • v-show：不管条件如何都会编译当前DOM元素，只是条件为false时CSS样式会有diaplsy:none；不可以使用在template元素上;开销小，适用于数据改变频繁的场景
   • v-html和v-text 的区别和优缺点
     • v-text、innerText：将内容当作单纯的文本，
     • v-html、innerHtml：将内容当做html语言解析（可能会引起xss攻击，应当避免使用）
   • v-for可以遍历数组也可以遍历对象的属性和整数。
     • 遍历对象属性时，必选参数为value，可选参数为key和index
     • 遍历整数时，v-for=“n in number”，就会从1开始遍历到number
   • 数据源为数组时的列表渲染问题
     • 问题一：数组改变什么时候不会触发视图更新？
       通过索引下标直接修改数组项（可以用vue.set解决）/直接修改数组的长度
     • 问题二：列表更新渲染机制是什么？
       数组改变后不会直接全部重新渲染整个列表，会最大化的复用元素结点，含有相同元素的项不会重新渲染。