Vue的指令学习
一.内容渲染指令
1.<p>{{ xxx }} </p>最常用
2.<p v-text="xxx"></p>会覆盖文本本身的内容
3.<p v-html="xxx"></p>会覆盖文本本身的内容，可以解析标签
二.属性绑定指令
1<img v-bind:src="xxx" />简写<img :src="xxx" />
适用是动态绑定属性值 xxx表示变量
三.事件绑定
1<button v-on:事件名=“处理函数”>按钮</button>简写<button @事件名=“处理函数”>按钮</button>
2.处理函数，要写到methods：{}中。处理函数中，如果需要使用data中的数据或其他方法，通过 this.xxx
3.给事件处理函数传参
①不传递任何参数，无效加小括号。事件处理函数可以直接使用 e
②如果传递了其他参数，并且还需要使用事件对象，事件处理函数要传递 $event 参数
4.修饰符
语法：@事件名.修饰符=“处理函数”
.prevent 用于阻止默认行为
.stop
用于阻止事件冒泡
.enter
按下了回车键，才会触发事件
.esc
按下esc键，才会触发事件
.49
按下数字 1 键，才会触发事件（因为 1 键的keyCode值是 49）
四.双向数据绑定
1.<input v-model="xxx" />
①页面的数据改动，data中的数据就会随之变化
②data中的数据改动，页面的数据也会随之变化
2.修饰符
①.number
会把输入的值，转成数字类型
②.trim
会把输入的值两边的空白去掉
③.lazy
改变数据更新的时机（改为change的时候）
五.条件判断指令
1.<p v-if="条件">待展示的内容</p>
①条件为true，元素显示
②条件为false，元素被移除
2<p v-show="条件">待展示的内容</p>
条件为true
元素显示条件为false，元素隐藏
display: none
如果元素经常切换显示隐藏状态、则使用v-show更好
3. v-if 可以配合 v-else-if 和 v-else一起用
适用于多条件判断
六.循环渲染指令
循环渲染指令
<li v-for="item in 数据">{{ item.username }}</li>
<li v-for="(item, index) in 数据">{{ item.username }}</li>
<li :key="唯一的值"> ...... </li>
①:key的值必须是数字或字符串
②:key的值必须是唯一的，不能重复的
③:key的值必须和数据是对应的，建议使用数据的id值
④:key的作用是防止新增或删除数据后，数据状态紊乱
⑤：key一般配合v-for使用
