Vue为开发者提供了内置指令，通过内置指令就可以用简洁的代码实现复杂的功能。
| 指令 | 说明 |
| v-bind | 单向数据绑定 |
| v-model | 双向数据绑定 |
| v-on | 监听事件 |
| v-text | 插入文本内容 |
| v-html | 插入包含HTML的内容 |
| v-for | 列表渲染 |
| v-if | 条件渲染 |
| v-show | 显示隐藏 |
1.v-bind
v-bind可以实现属性单向数据绑定
Vue
<div id="app">
<input v-bind:value="msg">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'我是v-bind'
}
})
</script>2.v-model
v-model主要实现数据双向绑定，通常用在表单元素上
Vue
<div id="app">
<input type="text"v-model="msg">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'我是v-model'
}
})
</script>3.v-on
v-on是事件监听指令，直接与事件类型配合使用
Vue
<div id="app">
<p>{{msg}}</p>
<button v-on:click="showinfo">请单击</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'请单击按钮查看内容'
},
methods:{
showinfo(){
this.msg = '我是v-on指令'
}
}
})
</script>4.v-text
v-text是在DOM元素内部插入文本内容
Vue
<div id="app">
<p v-text="msg"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg :'三天之内v-text'
}
})
</script>5.v-html
v-html是在DOM元素内部插入HTML标签内容。
Vue
<div id="app">
<p v-html="msg"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg :'<h2>我是v-html</h2>'
}
})
</script>6.v-for
v-for可以实现页面列表渲染，常用来循环数组。
Vue
<div id="app">
<div v-for="(item,index) in list" data-id="index">
索引是:{{index}},元素内容是：{{item}}
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 45, 24, 213, 24]
}
})
</script>7.v-if
v-if用来控制元素显示或隐藏，属性为布尔值。
8.v-show
v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创建。
Vue
<div id="app">
<div v-if="isshow"style="background-color: pink;">我是v-if/我是v-show</div>
<button @click = "isshow=!isshow">显示/隐藏</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isshow:false
}
})
</script>