前言
Vue是一个构建数据驱动的 web 界面的渐进式框架，是一个JavaScript MVVM库，也是目前最流行的前端框架。基于其简单小巧、上手快、核心强大、高效率等独特优势，Vue的虚拟DOM、数据双向绑定，使开发者可以快速上手，极大的提高了前端的开发效率。而Vue指令对于简化开发、提高效率起到了极大的促进作用。
Vue常用指令
Vue指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。指令提供了一些特殊的特性， 将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。 例如，v-bind动态绑定指令、v-if 条件渲染指令、v-for列表渲染指令等。本篇文章主要介绍Vue中的常用内置指令。
v-html指令
适用：string类型
作用：更新元素的innerHTML，即解析元素内容以及样式。
newVue({
el:"#app",
data:{
str:"<span style='color:red;font-size:30px;'>学习VUE指令</span>"}})
<h1>{{str}}</h1>
如果h1标签没有v-html指令，则不会解析数据中包含的标签及CSS样式。实现效果如图
<h1 v-html="str"></h1>
如果h1标签添加了v-html指令，将自动解析数据中包含的标签及CSS样式。实现效果如图
v-text指令
适用：string类型
作用：更新元素的 textContent，进行数据替换。
newVue({
el:"#app",
data:{
strs:"默认数据",
newstr:"VUE指令"}})
<h1>{{strs}}</h1>
如果h1标签没有v-text指令，只展示数据本身的内容。实现效果如图
<h1 v-text="newstr">{{strs}}</h1>
如果h1标签添加v-text指令，将进行数据替换。实现效果如图
v-show指令
适用：任意类型
作用：根据表达式的真假值，设置display属性实现展示和隐藏。当条件变化时该指令触发过渡效果。
注意：v-show为假时加载对应标签但不展示。
newVue({
el:"#app",
data:{
str:"学习VUE指令",
bol:false}})
<h1 v-show="bol">{{str}}</h1>
当v-show为假时，实现隐藏。
<h1>
不会显示。
<h1 v-show="!bol">{{str}}</h1>
当v-show为真时，实现展示。实现效果如图
v-if指令 / v-else-if指令 / v-else指令
适用：任意类型
作用：
v-if 根据表达式的真假值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。当条件变化时该指令触发过渡效果。当和 v-for 一起使用时，v-if 的优先级比 v-for 更高。
v-else-if 表示 v-if 的“else if 块”。可以链式调用。前一兄弟元素必须有 v-if 或 v-else-if。
v-else 为 v-if 或者 v-else-if 添加“else 块”。前一兄弟元素必须有 v-if 或 v-else-if。
注意：v-if为假时不加载对应标签。
newVue({
el:"#app",
data:{
age:30}})
<h1 v-if="age<16">未成年</h1><h1 v-else-if="age>=16 && age<41">青年</h1><h1 v-else-if="age>=41 && age<66">中年</h1><h1 v-else="age">老年</h1>
实现效果如下
v-if与v-show对比
1、区别：
v-show也是条件渲染指令，和v-if指令不同的是：
①v-if指令满足条件时，把元素创建出来并渲染到html中，不满足条件时，会把元素删除，所以元素不会渲染到html中。
②使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。不满足条件的元素会被设置style="display:none"样式，将元素隐藏起来。
2、应用场景
①v-if 指令有更高的切换消耗，v-if当条件成立的时候会将元素加上，不成立的时候，就会移除DOM，并且内部的指令不会执行。
②v-show 指令有更高的初始渲染消耗，v-show只是简单的隐藏和显示，
如果需要频繁切换使用 v‐show 较好，如果在运行时条件不大可能改变 使用v‐if 较好。因此具体问题具体分析。
v-for指令
适用：Array / Object / number / string / Iterable
作用：基于源数据多次渲染元素或模板块，即循环遍历。
newVue({
el:"#app",
data:{
age:30,
arr:["aaa","bbb","ccc","ddd"],
obj:{
uname:"张三",
age:18,
sex:"男"},
num:10,
str:"学习VUE指令"}})
<h1>循环遍历Array</h1><p v-for="(value,index) in arr">{{index}}--------{{value}}</p><h1>循环遍历Object</h1><p v-for="(value,key,index) in obj">{{index}}--------{{key}}--------{{value}}</p><h1>循环遍历number</h1><p v-for="value in num">{{value}}</p><h1>循环遍历string</h1><p v-for="value in str">{{value}}</p>
实现效果如图
v-on指令
适用：Function / Inline Statement / Object
作用：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
缩写：@
newVue({
el:"#app",
data:{
num:0},
methods:{demo1(){this.num ++;},demo2(value){this.num += value;}}})
<button v-on:click="demo1">点赞一</button><button v-on:click="demo2(1)">点赞二</button><button v-on:click="num++">点赞三</button><h1>点赞数{{num}}</h1>
触发v-on事件之前，实现效果如图
触发v-on事件之后，实现效果如图
v-bind指令
适用：any (with argument) / Object (without argument)
作用：动态地绑定一个或多个 attribute属性值，或一个组件 prop 到表达式。
缩写：冒号（:）
newVue({
el:"#app",
data:{
imgs:"./img/1gif.gif",
obj:{
url:"https://www.jd.com",
name:"京东"},
str:"学习VUE v-bind绑定动态属性值",
bol:true}})
<img v-bind:src="imgs"><br><br><a :href="obj.url">{{obj.name}}</a><!-- 动态展示样式 --><h1 :class="{demo:bol}">{{str}}</h1>
实现效果如图
点击图中的“京东”链接，实现效果如图
v-model指令
适用：
<input> / <select> / <textarea> / components组件
作用：在表单控件或者组件上创建双向绑定。
newVue({
el:"#app",
data:{
str:"",
sex:"",
likes:[],
city:""}})
<div id="app"><input type="text" v-model="str"><h1>输入的内容:{{str}}</h1><input type="radio" name="sex" value="男" v-model="sex">男
<input type="radio" name="sex" value="女" v-model="sex">女
<h1>性别:{{sex}}</h1><input type="checkbox" v-model="likes" value="篮球1">篮球1<input type="checkbox" v-model="likes" value="篮球2">篮球2<input type="checkbox" v-model="likes" value="篮球3">篮球3<input type="checkbox" v-model="likes" value="篮球4">篮球4<h1>爱好:{{likes}}</h1><select v-model="city"><option value="西安市">西安市</option><option value="咸阳市">咸阳市</option><option value="汉中市">汉中市</option><option value="渭南市">渭南市</option></select><h1>city：{{city}}</h1><textarea cols="60" rows="20" v-model="str"></textarea></div>
实现效果如图
v-pre指令
作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
注意：不需要表达式。
示例如下
<span v-pre>{{this will not be compiled }}</span>
v-cloak指令
作用：这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
示例如下
newVue({
el:"#app",
data:{
message:"学习VUE指令"}})
<div v-cloak>{{ message }}</div>
[v-cloak]{display: none;}
<div>
不会显示直到编译结束
v-once指令
作用：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
注意：不需要表达式。
newVue({
el:"#app",
data:{
str:"123abc"}})
<div id="app"><input type="text" v-model="str"><h1 v-once>初始数据：{{str}}</h1><h1>新数据：{{str}}</h1></div>
刚进入页面时，实现效果如图
当改变输入框数据时，v-once指令修饰的元素并未发生变化，实现效果如图
v-slot指令
适用：只能用于
<template>
作用：提供具名插槽或需要接收 prop 的插槽。
缩写：#
Vue.component("a1",{
template:"#a1",
props:["title","imgs"]})newVue({
el:"#app",
data:{
obj:{ title:"学习Vue组件", imgs:"./img/0.gif"}}})
<div id="app"><a1 :title="obj.title":imgs="obj.imgs"><template v-slot:two><h1>111111111111</h1><h1>222222222222</h1><h1>333333333333</h1></template><img slot="one" src="./img/p5.jpeg" alt=""><input type="text"></a1></div><template id="a1"><div><slot name="one"></slot><img :src="imgs" style="width: 400px;height:200px;"><slot></slot><h3>{{title}}</h3><slot name="two"></slot></div></template>
实现效果如图
总结
Vue指令使用v-on绑定事件监听, 可简写为@v-bind绑定动态属性值, 可简写为:v-model双向数据绑定v-for遍历数组/对象/字符串/数值v-show条件渲染 (动态控制节点是否展示)v-if条件渲染（动态控制节点是否存在）v-else-if条件渲染（动态控制节点是否存在）v-else条件渲染（动态控制节点是否存在）v-text将数据填充到标签中（不会解析填充内容中的HTML标签）v-html将数据填充到标签中（会解析填充内容中的HTML标签）v-cloak指令保持在元素上直到关联组件实例结束编译v-once只渲染一次，之后Vue就不再渲染这个标签了（视为静态内容）v-pre跳过这个元素和它的子元素的编译过程v-slot提供具名插槽或需要接收 prop 的插槽，可简写为#
版权归原作者 yhang0802 所有， 如有侵权，请联系我们删除。