vue常用指令
作者：互联网
指令的六大类
内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令
内容绑定指令
1. v-text文本指令
使用方法：
内容 'zhangsan' 就展示在p标签里
如果p标签原来有内容就会被 'zhangsan'覆盖掉
2. {{ }}插值表达式
使用方法：
在{{ }}里写数据名字，在data相应的名字里的数据就渲染到标签里了
3.v-html指令
使用方法：
像这种带样式的标签只需要使用v-html的指令就可以实现（插值表达式和v-text都满足不了）
属性绑定指令
v-bind单项绑定
使用方法
在元素属性的属性值直接写数据的名字是不可以渲染数据的
需要在属性上添加v-bind：单项属性绑定
简写( : )英文的引号
事件绑定指令
v-on:click点击指令
使用方法
点击按钮加一 在p标签里的插值就加一
v-on可以简写为 @。
事件修饰符
使用方法
当前点击a标签就不会跳转
修饰符使用的时候是把 .preven写在指令后面
按键修饰符
@keyup.esc="clearInput" ：当按下esc键时输入框内容清空，并在控制台输出（触发了clearInput方法）.
@keyup.enter="commitAjax" :当按下enter时控制台输出（触发了commitAjax方法）
双向绑定指令
v-mode双向绑定指令
常用的元素
1.input输入框
2.textarea多行文本框
3.select下拉菜单
示例1
v-model修改文本框时p标签改变数据源也会改；v-bind修改文本框时不能修改数据源只会修改自己
示例2
给外部的select加v-model 下拉菜单数据源数字是'2'那么点开页面时他就会自动选择上海
v-model指令的修饰符
示例：number
在v-model后面.number输入到文本框或者数据源的'数字'就只能是数字
条件渲染指令
v-if和v-show的区别
如果flag为true被控制的元素就显示反之就不显示
v-if每次都会动态的移除元素和动态创建元素，来实现元素的显示和隐藏
v-show使用的是display：none样式，来实现元素的显示和隐藏
如果频繁的切换元素的显示状态，用v-show更好一些
如果刚进入页面的时候，默认元素不需要被展示，而且后期这个元素也可能不需要被展示出来用v-if 性能更好
在实际开发时，绝大多数情况，不需要考虑性能问题，直接使用v-if就行。
条件渲染v-if v-else-if
type为A时显示优秀
列表渲染指令
v-for指令
item是可以随便起的名字 插值括号里的名字和data里的数据名字是对应的
强调key在v-for中的注意点
key的值只能是字符串或数字类型
key的值必须具有唯一性（重复会报错）
建议拿id当做是key 因为id具有唯一性
使用index的值当做key的值是没有意义的因为index不具有唯一性
建议使用v-for指令时一定要制定key的值既可以提高性能、又防止列表状态紊乱
标签：常用,vue,渲染,标签,绑定,指令,key,元素 来源： https://www.cnblogs.com/0722tian/p/16699957.html