背景剖析
传统的html并不反对表达式、分支语句、循环语句等构造的定义，为了补救其有余很多前端框架，模板引擎通过在html元素中增加自定义属性，而后底层再借助解析引擎对html自定义属性进行解决，以这样的形式来加强html的性能。
Vue中的罕用指令
v-bind
在html中如果心愿元素的属性值随程序内容的产生而变动，能够借助v-bind或:代替，其根本语法如：
<元素 v-bind:属性名="变量或js表达式">也能够采纳其简化模式，其根本语法如：
<元素 :属性名="变量或js表达式">案例剖析：
<div id="app"> <font :color="color">hello</font> </div> <script> new Vue({ el:"#app", data:{ color:"red" } }); </script>v-show
v-show为一个专门管制元素的显示暗藏的非凡指令，其根本语法为：
<元素 v-show="bool类型的变量或返回bool类型的js表达式">当Vue对象扫描到v-show时，就会立即执行""中的变量或js表达式,
如果变量或js表达式的值为true，则什么也不干，元素放弃原样显示。如果变量或js表达式的值为false，则new Vue()主动为以后元素增加display:none。
示例要害代码如下：
<style> .pop{ width:300px; height:150px; background-color:lightGreen; } .pop>.close{ float:right; padding:5px 10px; cursor:pointer; } </style> <div id="app"> <button @click="show">show</button> <div v-show="display" class="pop"> <span class="close" @click="hide">×</span> </div> </div> <script> //2. 创立new Vue对象 new Vue({ el:"#app", data:{ display:false }, methods:{ show(){ this.display=true; }, hide(){ this.display=false; } } }) </script>v-if 和 v-else
v-if 和 v-else 是在html实现分支管制，二选一的一种实现形式，在应用时，v-if和v-else对应的的两个元素必须紧挨着写！两头不能插入其余元素，其根本语法为：
<元素1 v-if="boolean类型的变量或js表达式"><元素2 v-else>示例要害代码如下：
<div id="app"> <!--第一个div是已登录时显示的内容--> <div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">登记</a></h3></div> <!--第二个div是未登录时显示的内容--> <div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div> </div> <script> new Vue({ el:"#app", data:{ isLogin:false //开局用户默认是未登录的 }, methods:{ login(){ this.isLogin=true; }, logout(){ this.isLogin=false; } } }) </script>v-else-if
v-else-if专门和v-if搭配应用，管制多个元素多选一显示的非凡的指令。其根本语法为：
<元素1 v-if="条件1"><元素2 v-else-if="条件2"><元素3 v-else-if="条件3">... ...<元素n v-else>留神，v-if和v-else-if和v-else之间必须连着写，不能插入其余元素。
示例要害代码如下：
<div id="app"> <span v-if="score>=90">优良</span> <span v-else-if="score>=80">良好</span> <span v-else-if="score>=70">及格</span> <span v-else>及格</span> </div> <script> var vm=new Vue({ el:"#app", data:{ score:95 } }) //在控制台中: vm.socre=85 </script> v-for
v-for是一个专门用于依据数组内容重复生成多个雷同构造的元素的非凡指令。其语法为：
<要重复生成的元素 v-for="(以后元素值, 以后地位) of 数组">示例要害代码如下：
<div id="app"> <!--需要: 依据tasks数组中的工作列表重复生成多个li--> <ul> <li v-for="(t,i) of tasks" :key="i"> {{i+1}} - {{t}} </li> </ul> </div> <script> var vm=new Vue({ el:"#app", data:{ //用一个数组保留待办事项列表 tasks:["吃饭", "睡觉"] } }) </script>v-for还能够遍历对象属性，例如：
<div id="app"> <!--需要: 遍历lilei对象，在页面显示李磊对象的详细信息--> <ul> <li v-for="(value,key) of lilei" :key="key"> {{key}} : {{value}} </li> </ul> </div> <script> var vm=new Vue({ el:"#app", data:{ lilei:{ name:"Li Lei", age:11 } } }) </script>v-for 还能够进行计数，例如：
<div id="app"> <ul> <li v-for="i of pageCount" :key="i">{{i}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ pageCount:5 //共5页 } }) </script>v-on
v-on 是一个专门绑定事件处理函数的指令，其根本语法为：
<元素 v-on:事件名="事件处理函数名()">v-on 也能够应用@符号代替，其根本语法结构为：
<元素 @事件名="事件处理函数名() 如果事件处理函数不须要传入实参值，则()也可省略,例如：
<元素 @事件名="事件处理函数名">但凡在页面中定义的事件处理函数，都要在new Vue()中的methods成员内增加对应的函数实体。
示例要害代码如下：
<div id="app"><!--点哪个div，哪个div就能够喊本人疼！--><div id="d1" @click="say('html')">d1</div><div id="d2" @click="say('css')">d2</div></div> <script> new Vue({ el:"#app", methods:{ say(name){ console.log(`hello ${name}!`) } } }) <script>v-html
如果{{}}绑定的是一段HTML片段时，是不会交给浏览器解析的。而是原样显示HTML片段的内容——和DOM中的textContent是一样的,如果心愿html可被解析能够应用v-html代替{{}}。其根本语法结构为：
<元素 v-html="变量"> 这个地位显示变量内容 </元素>示例要害代码如下：
<div id="app"> <h3>{{msg}}</h3> <h3 v-html="msg"></h3> </div> <script> new Vue({ el:"#app", data:{ msg:`来自<<<a href="javascript:;">新华社</a>>>的音讯` } }) </script>v-text
v-text是可代替{{}}绑定元素内容的非凡指令,用于设置元素外部的文本内容，而且能够避免因网络提早短暂显示{{}}的景象。其语法为：
<元素 v-text="变量或js表达式"> </元素>示例要害代码如下：
<div id="app"> <!--js的天下 --> <h3 v-text=`用户名:${uname}`></h3> <!--js的天下 --> <h3 v-text=`积分:${score}`></h3> </div> <script> setTimeout(function(){ new Vue({ el:"#app", data:{ uname:"dingding", score:1000 } }) },6000) </script>v-model
v-model 是用于实现双向绑定的指令，既能将程序中的变动，自动更新到页面上(model->view)，又能将页面上产生的变动，更新回程序中的变量中(view->model),其根本语法为：
<表单元素 v-model:value="变量">示例要害代码如下：
<div id="app"> <!--单向绑定: (Model->View 不能View->Model)--> <!-- <input :value="keyword"> --> <!--双向绑定: (Model->View 又能View->Model)--> <input v-model:value="keyword"> <button @click="doUpdate">更新</button> </div> <script> var vm=new Vue({ el:"#app", data:{ keyword:"ABC" //开局用户没有输出任何关键词 }, methods:{ doUpdate(){ console.log(`查找 ${this.keyword} 相干的内容...`) } } }) <script>单选操作的双向绑定：
单选操作的value因为是写死的固定的备选值！用户在不同radio之前切换选中状态时，其实扭转的是radio的checked属性值。所以，想用双向绑定取得以后选中的radio的值，应该绑定checked属性:
<input type="radio" value="固定值" v-model:checked="变量">示例代码如下：
<div id="app"> 性别: <label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label> <label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label> <h3>您选的性别是:{{sex==1?"男":"女"}}</h3> </div> <script> new Vue({ el:"#app", data:{ sex:1 } }) </script> select元素的双向绑定
一个select下蕴含多个option元素。所有备选值value，都散布在每个option上。然而每个备选值value也是写死的。用户每次抉择不同的option时，其实select元素会将选中的option的value值，批改到select的value属性上。其语法为：
<select v-model:value="变量"> <option value="值1">xxx</option> ... ... ... ...</select>示例代码如下：
<div id="app"> <select v-model:value="src"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="hangzhou">杭州</option> </select><br/> <img :src="src"> </div> <script> new Vue({ el:"#app", data:{ src:"beijing" } }) </script>总结(Summary)
本大节，次要是对vue中罕用的的一些指令元素进行了剖析，在了解和利用的过程中能够参考本文档和官网文档再联合实际进行纯熟利用。