前言：指令是vue.js模板中最常用的一项功能，它带有v-的前缀，比如v-html v-model v-if v-pre等。
主要职责就是当其表达式的值改变时，相应的将某些行为应用到DOM上。
Vue内置了很多指令帮助我们快速完成常见的DOM操作，比如循环渲染、显示与隐藏等。
一、v-bind的基本用途是动态更新HTML元素上的属性，比如 id class 等
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
url: "https://cn.vuejs.org/",
imgUrl:"https://cn.vuejs.org/images/logo.png"
}
})
</script>v-bind可以省略v-bind直接写一个冒号":"
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl"/>
<!--等价于-->
<a :href="url">链接</a>
<img :src="imgUrl"/>二、v-on用了绑定事件监听，这样我们就可以进行一些交互
<div id="app">
<div v-if="isShow">
<a :href="url">链接</a>
<img :src="imgUrl"/>
</div>
<button v-on:click="handelToggle">点击{{isShow ? '隐藏' :'显示' }}</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isShow:true,
url: "https://cn.vuejs.org/",
imgUrl:"https://cn.vuejs.org/images/logo.png"
},
methods:{
handelToggle:function(event){
console.log(event)
this.isShow=!this.isShow
}
}
})
</script>在button按钮上，使用来v-on:click给该元素绑定来点击事件
v-on可以监听原生DOM事件除了click外，还有dbclick,keyup,mousemove等。
v-on可以直接用@来缩写
<button v-on:click="handelToggle">点击{{isShow ? '隐藏' :'显示' }}</button>
<!--等价于-->
<button @click="handelToggle">点击{{isShow ? '隐藏' :'显示' }}</button>Vue提供了一个特殊变量 event
三、v-clock 不需要表达式，在Vue实例结束编译时从DOM元素上移除，经常配合css的display:none使用
<style type="text/css">
[v-clock]{
display: none;
}
</style>
<div id="app" v-clock>
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
url: "https://cn.vuejs.org/",
imgUrl:"https://cn.vuejs.org/images/logo.png"
}
})
</script>在一般情况下，v-clock是解决初始化慢，加载闪动的最佳实例
四、v-once 是一个不需要表达式的指令，定义元素或组件只渲染一次。
<style type="text/css">
[v-clock] {
display: none;
}
</style>
<div id="app" v-clock>
<div v-once>
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl" />
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
url: "https://cn.vuejs.org/",
imgUrl: "https://cn.vuejs.org/images/logo.png"
}
})
</script>首次渲染后，不再根据数据的变动而重新渲染。优化性能时可能会用到。
五、条件渲染指令
1、v-if,v-else-if,v-else
与javascript的语法类似
<div id="app">
<p v-if="state===1">state为1时显示</p>
<p v-else-if="state===2">state为2时显示</p>
<p v-else>否则显示该行</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
state:2
}
})
</script>2、v-show
v-show的用法与v-if基本一致，只不过v-show是改变元素的css属性desplay.当v-show的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式diaplay:none.
六、列表渲染指令v-for
当需要一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for.它的表达式需要结合in来使用，类似item in items的形式。
<div id="app">
<ul>
<li v-for="(item,index) in users">{{index+1}}、姓名：{{item.name}}年龄：{{item.age}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
users:[
{name:'张三',age:19},
{name:'李四',age:22},
{name:'王五',age:30},
{name:'周二',age:26}
]
}
})
</script>除了数组，对象也是可以遍历的。遍历对象时，有两个参数是可选的，分别是键名和索引
<div id="app">
<ul>
<li v-for="(value,key,index) in useInfo">
{{index}}-{{key}}:{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
useInfo:{
name:'张三',
age:19,
sex:'男'
}
}
})
</script>渲染后的结果为
