6、Vue指令
指令：带有v-前缀的特殊标签属性
（1）v-html
作用：设置元素的innerHTML
语法：v-html="表达式"
示例：
提供一个地址，这里是百度的地址，通过v-html渲染
结果：
（2）v-show与v-if
1）v-show
①作用：控制元素显示与隐藏
②语法：v-show="表达式"，表达式值true显示，false隐藏
③原理：切换display：none控制显示器
④场景：频繁切换显示隐藏的场景
2）v-if
①作用：控制元素的显示与隐藏（条件渲染）
②语法：v-if="表达式"，表达式值true显示，false隐藏
③原理：基于条件判断，是否创建或移除元素节点
④场景：要么显示，要么隐藏，不频繁切换的场景
3）区别
当表达式值为true时，无显著区别，当值为false时，v-show通过控制css的display：none来控制显示与隐藏
4）示例
提供一个布尔值和两个盒子
值为true时
值为false时
（3）v-else与v-else-if
①作用：辅助v-if进行渲染判断
②语法：v-else 、 v-else-if="表达式"
③注意：需要紧挨着v-if一起使用
1）示例
①v-else
代码
结果
②v-else-if
代码
结果：
（4）v-on
1）作用：注册事件=添加监听+提供处理逻辑
2）语法：
①v-on:事件名="内联语句"
②v-on：事件名="menthod中的函数名"
3）简写：@事件名
4）示例：
内联：
代码：
结果：
函数：
代码：
结果：
点击"切换显示与隐藏"
5）
利用v-on传参，参数名（）
代码：
结果：
（5）v-bind
1）作用：动态设置html的标签属性->src 、url等
2）语法：v-bind：属性名="表达式"
3）简写："：属性名=表达式"
4）示例：
代码：
效果：
（6）v-for
1）作用：基于数据循环，多次渲染整个元素->数组、对象、数字...
2）语法：v-for="(item,index) in 数组"，item-数组中的每一项，index-数组的下标
3）v-for中的key：
①语法： key属性="唯一标识"
②作用：给列表项添加唯一标识，便于Vue进行列表项的正确排序复用。
③注意
-
如果不加key，v-for的默认行为会尝试原地修改元素（就地复用）
-
Key的值只能是字符串或数字类型
-
Key的值必须具有唯一性
-
推荐使用id作为key，不推荐使用index作为key，（index会变化）
代码：
结果：
（7）v-model
1）作用：给表单元素使用，双向数据绑定->快速获取或设置表单元素内容
（数据变化->视图更新，视图变化->数据更新）
2）语法:v-model="变量"
3）示例：
代码：
结果：
点登录：
点重置：
