Vue常用指令(文末参考详解)
先说三个Vue中的缩写指令：
v-on，监听指令，缩写：@，比如@click="doSomething"便是监听到点击事件后执行函数doSomething；
v-bind，动态绑定指令，缩写：:，比如:src="srcFilePath"其中srcFilePath是一个会动态变化的值，一般从后端获取；
v-slot，插槽指令，缩写：#，一般不使用缩写，可用于接收值然后在子组件中使用。
v-show：根据真假切换元素的显示状态
专门控制一个元素显示隐藏的特殊指令，用程序控制一个元素的显示或隐藏时，都用v-show。
原理：只要new Vue()扫描到v-show，就会先计算=右边的判断条件的值，如果=右边的判断条件值为true，则当前元素默认正常显示，如果=右边的判断条件值为false，则v-show自动被翻译为style="display:none"，表示当前元素隐藏。
-
本质是修改元素的display，实现显示隐藏
-
指令后面的内容，最终会解析为布尔值
-
值为true元素显示，值为false元素隐藏
<body>
<div id="app">
<button @click='show=false'>隐藏</button>
<button @click='show=true'>显示</button>
<button @click='show=!show'>切换</button>
<h1 v-show='show'>Hello Vue!</h1>
</div>
<script>
new Vue({
el: '#app',
data: { show: true },
})
</script>
</body>
v-if：根据真假切换元素的显示状态
专门控制两个元素二选一显示，当要在两个元素之间选择一个时，就用v-if和v-else。
原理：当new Vue()扫描到v-if时，先计算=右边条件变量或表达式的值，如果v-if等号右边的条件为true，则new Vue()会保留v-if所在元素，删除v-else所在元素；如果v-if等号右边条件为false，则new Vue()会先删除v-if所在的元素，保留v-else所在的元素。根据条件来加载元素。
-
本质是通过操纵dom元素来切换显示状态
-
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
-
频繁的切换用v-show,反之使用v-if，前者的切换消耗小
<body>
<div id="app">
<button @click='add=false'>删除</button>
<button @click='add=true'>添加</button>
<!-- v-if指令：根据条件来加载元素 -->
<h1 v-if='add'>灰太狼来了！</h1>
</div>
<script>
new Vue({
el: '#app',
data: { add: true }
})
</script>
</body>
小结：Vue中隐藏元素的方式有哪些？他们有什么区别？分别有什么用途？（面试题）
1）Vue中 v-show 和 v-if 都能实现元素的隐藏操作；
2）差异：
v-show：利用css的display='none'实现隐藏
v-if：利用 DOM 元素的移除，实现隐藏
3）用途：
v-show：适合频繁切换显示的场景
v-if：移除/增加 DOM，消耗高，会降低页面的性能，适合一次性使用的场景
eg：之后我们的数据都来源于网络，假设发送请求需要1s，则 在请求完毕前，先隐藏一部分页面，请求完成后再显示。
v-text：设置标签的内容（textContent）
-
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
-
v-text的缩写形式为{{}}，即差值表达式
-
内部支持写表达式
v-html：设置元素的innerHTML
-
内容中有html结构会被解析为标签
-
v-text指令无论内容是什么，只会解析为文本
-
二者酌情选择使用
v-on：为元素绑定事件
-
事件名不需要写on，例如v-on:click
-
指令可以简写为@，例如@click，@keyup
-
绑定的方法定义在methods属性中
v-bind：为元素绑定属性
-
v-bind的作用是设置元素的属性（比如src,title,class）
-
完整写法是 v-bind:属性名
-
简写的话可以直接省略v-bind，只保留 :属性名
-
需要动态的增删class建议使用对象的形式，{对象名:值}
v-for：根据数据生成列表结构 (遍历容器)
-
数组经常和v-for结合使用
-
语法是（item,index）in 数据集合
-
item 和 index 可以结合其他这令一起使用
-
数组长度的更新会同步到页面上，是响应式的
v-on补充
-
事件绑定的方法携程函数调用的形式，可以传入自定义参数
-
定地方法是需要定义形参来接收传入的实参
-
事件的后面跟上.修饰符可以对事件进行限制
-
如键盘事件@keyup的.enter可以限制触发的按键为回车松开
v-model：获取和设置表单元素的值（双向数据绑定）
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联，即双向绑定
参考原文：https://blog.csdn.net/io_123io_123/article/details/122588644
