Vue指令

1.内容渲染指令

v-text ：内容渲染指令v-text指令会覆盖元素内默认的值，{{}}插值表达式在开发中不会覆盖元素内的默认值，只是内容的占位符,只能用在元素内容节点不能用在属性节点

2.属性绑定指令

v-bind ：在vue中可以使用v-bind指令为元素属性动态绑定值；

v-bind指令可以简写成英文 ：

在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该加单引号 。例如：<div :title="'box' + index">这是一个div</div>。

3.事件绑定事件指令

v-on: 可以简写为 @

原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue事件绑定后分别为：v-on：click( @click: )、v-on:input 、v-on:keyup

.prevent阻止默认行为(@click.prevent是阻止a链接的跳转)

例如：<a href="http://www.baidu.com" @click.prevent="show">百度网页</a>

.stop阻止事件冒泡

4.按键修饰符

@keyup ： @keyup.esc、@keyup.enter （监听某个按键响应事件）

5.双向数据绑定指令

v-model  :双向数据绑定，常用于input、textarea、select标签;

例如：<input type="text" v-model="username">

v-bind 单向数据绑定，数据源到页面结构的绑定

v-model指令的修饰符：

1.数字运算需在v-model后加上 .number隐式转换，否则会出现字符串拼接达不到运算的效果；

2.  .trim可以去除用户输入的首尾空白字符；

3.  .lazy在changer时而非input时更新，即更改过程不会实时变动，当最终更改完成才会变动

6.条件渲染指令

v-if :   会每次动态创建或移除元素，当刚进入页面时某些元素默认不需要显示，而后期这个元素也不需要展示出来，则用v-if；例如：<p v-if="flag">这是v-if控制的元素</p>

v-else指令需配合v-if一起使用，否则不起作用

 v-show：动态为元素添加display：none ，来实现元素的显示和隐藏（如果频繁的切换元素的显示用v-show更优）

7.循环渲染指令

v-for  : 循环渲染指令，还支持一个可选的第二个参数，即当前的索引。

语法格式为 (item,index) in list

v-for指令中的item项和index索引都是形参，可以根据需要重命名

注：官方建议在用v-for时一定要绑定一个 :key 属性，并常将id作为key的值(只能是字符串或数字类型且不能重复)，使用index的值当作key的值没有任何意义。