vue 中的指令按照不同的用途可以分为6大类
(1)内容渲染指令
用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下 3 个
v-text: 会覆盖元素默认内容 <p v-text="username"></p>
v-html : 渲染带标签的内容,并实现标签样式,会覆盖元素默认内容 <div v-html="属性"></div>
(2)属性绑定指令
v-bind: (简写英文 :): 为元素的属性动态绑定属性值, 单向绑定(数据源影响DOM变)
支持绑定简单的数据值 <imgsrc="" v-bind:placeholder="tips">
支持绑定js表达式的运算 <div :title=" 'box-' + index">div盒子</div> 字符串需加' '
(3)事件绑定指令
v-on:(简写@): 为DOM元素绑定事件监听
处理函数写在实例对象的methods属性下 <button @click="add()">点击</button> ()可传参
原生DOM对象onclick,oninput,onkeyup等原生事件,替换为@click,@input,@keyup
$event
vue 提供的特殊变量,表原生的事件参数对象event, 可解决事件参数对象event被覆盖的问题(点击按钮变色问题)
事件修饰符
方便对事件的触发控制 <a href=" " @click.prevent=" "></a>
按键修饰符
监听键盘事件时,判断详细的按键,可为键盘相关的事件添加按键修饰符
e.g: <input @keyup.enter="submit"> 只有按键Enter时,调用submit()
(4)双向绑定指令
v-model: 双向数据绑定指令,不操作DOM的前提下,快速获取表单的数据
(5)条件渲染指令
按需控制 DOM 的显示与隐藏
v-if: 动态创建或移出实现元素显示与隐藏, 有更高的切换开销,在运行时条件很少改变,使用较好(e.g: 刚进入页面时,某些元素默认不需要被展示,后期也不需展示)
v-show: 动态为元素添加或移除 style="display: none;" 样式实现显示与隐藏, 有更高的初始渲染开销, 需要非常频繁地切换,使用较好
v-else 必须配合v-if指令一起使用,否则不会被识别
v-else-if 必须配合v-if指令一起使用,否则不会被识别
(6)列表渲染指令
v-for: 基于一个数组来循环渲染一个列表结构
使用item in list形式特殊语法(item待循环数组, item被循环的每一项);
用索引时(item, index) in list , item项和index 索引都是形参,可重命名
使用key维护列表状态
官方建议,使用v-for必须绑定属性key,且值通常为id
当列表的数据变化时,默认情况下,vue会尽可能的复用已存在的DOM元素,从而提升渲染的性能. 但这种默认的性能优化策略,会导致有状态的列表无法被正确更新
为给vue一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能,需要为每项提供一个唯一的key属性
e.g:<tr v-for="(item,index) in list" :key="item.id" :title="index + item.uname ">
key的注意事项
key 的值只能是字符串或数字类型
key 的值必须具有唯一性（即：key的值不能重复）
建议把数据项 id 属性的值作为key的值（id 属性的值具有唯一性）
使用 index 的值当作key的值没有任何意义（index 的值不具有唯一性,与每一项无强制关系）
建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）