Vue内置指令
1 v-show：根据表达式的真假值来显示和隐藏元素
v-show根据表达式的真假值来显示和隐藏元素。
在下面的示例中，第一个p标签不设置该属性，第二个p标签设置v-show为true，第三个p标签设置v-show为false，最后的结果是显示前两个p标签，第三个不显示，示例代码如下：
<div id="app">
<p>我是橘猫吃不胖</p>
<p v-show="show">AAAAA</p>
<p v-show="hide">BBBBB</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true, // 显示AAAAA
hide: false // 隐藏AAAA
}
})
</script>
除此之外，可以动态的修改v-show的属性值，示例代码如下：
<div id="app">
<p>我是橘猫吃不胖</p>
<p v-show="show">AAAAA</p>
<p v-show="hide">BBBBB</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true,
hide: false
}
})
// 每隔1秒修改hide的值，达到在屏幕上闪烁的效果
window.setInterval(function () {
vm.hide = !vm.hide
}, 1000)
</script>
2 v-html：插入标签
v-html会插入标签。
示例：点击按钮后，插入一个p标签，再次点击按钮后p标签消失
<div id="app">
<button @click="show">点击</button>
<div v-show="isShow" v-html="p"></div>
</div>
<script>
var vm = new Vue({ // 创建实例
el: '#app',
data: {
isShow: false, // 设置p标签默认是隐藏的
p: "<p>橘猫吃不胖</p>" // 设置要插入的p标签
},
methods: {
show: function () { // 此处的show是给按钮绑定的事件
this.isShow = !this.isShow;
}
}
})
</script>
3 v-text：在元素当中插入值
v-text可以在元素当中插入值。
示例：初始时不给h1标签中设置值，而是在data中定义值，页面上会正常显示定义的值
<div id="app">
<!-- 设置一个h1标签，但是并不设置值 -->
<h1 v-text="msg"></h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "橘猫吃不胖" // 定义要显示在h1标签中的值
}
})
</script>
4 v-if和v-else：根据表达式的真假值来动态插入和移除元素
v-if和v-else可以根据表达式的真假值来动态插入和移除元素。
示例：根据不同的表达式真假值显示不同的效果，当role设置为0的时候，显示超级管理员
<div id="app">
<p v-if="role == 0">超级管理员</p>
<p v-else-if="role == 1">普通管理员</p>
<p v-else>账户已停用</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
role: 0 // 设置role的值
}
})
</script>
当设置role为1时，显示普通管理员
<div id="app">
<p v-if="role == 0">超级管理员</p>
<p v-else-if="role == 1">普通管理员</p>
<p v-else>账户已停用</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
role: 1 // 设置role的值
}
})
</script>
当role不为0或者1时，显示账户已停用
<div id="app">
<p v-if="role == 0">超级管理员</p>
<p v-else-if="role == 1">普通管理员</p>
<p v-else>账户已停用</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
role: 3 // 设置role的值
}
})
</script>
5 v-for：根据变量的值来循环渲染元素
v-for可以根据变量的值来循环渲染元素。
示例：v-for指令遍历数组
<div id="app">
<span v-for="i in arr"> {{ i }} </span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
arr: [11, 22, 33, 44] // 定义arr数组
}
})
</script>
示例：v-for遍历数组及数组中元素的索引
<div id="app">
<span v-for="(i , index) in arr"> {{ index }} : {{ i }} </span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
arr: [11, 22, 33, 44] // 定义arr数组
}
})
</script>
示例：v-for指令遍历对象
<div id="app">
<span v-for="i in obj"> {{ i }} </span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
obj: { // 定义对象
"a": 1,
"b": 2,
"c": 3
}
}
})
</script>
示例：v-for遍历对象的属性名及属性值
<div id="app">
<span v-for="(item,key) in obj">
{{ key }}:{{ item }}
</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
obj: { // 定义对象
"a": 1,
"b": 2,
"c": 3
}
}
})
</script>
示例：v-for遍历对象的索引、属性名及属性值
<div id="app">
<span v-for="(item,key,index) in obj">
{{ index }}—{{ key }}:{{ index }}
</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
obj: { // 定义对象
"a": 1,
"b": 2,
"c": 3
}
}
})
</script>
示例：v-for遍历对象数组
<div id="app">
<span v-for="item in obj">
{{ item }}
</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
obj: [
{ name: "张三", age: 20 },
{ name: "李四", age: 21 },
{ name: "王五", age: 22 }
]
}
})
</script>
示例：v-for指令遍历对象数组的具体内容
<div id="app">
<span v-for="item in obj">
{{ item.name }}
{{ item.age }}
</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
obj: [
{ name: "张三", age: 20 },
{ name: "李四", age: 21 },
{ name: "王五", age: 22 }
]
}
})
</script>
示例：v-for遍历常量
<div id="app">
<span v-for="i in 5">
{{ i }}
</span>
</div>
<script>
var vm = new Vue({
el: "#app"
})
</script>
6 v-bind：绑定元素的属性并执行相应的操作
v-bind可以绑定元素的属性并执行相应的操作。
示例：为a标签绑定href属性
<div id="app">
<a v-bind:href="link">去百度</a>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
link: "https://baidu.com"
}
})
</script>
点击链接可以进行页面的跳转。
7 v-on：监听元素事件，并执行相应的操作
v-on可以监听元素事件，并执行相应的操作。
示例：v-on绑定一个事件
<div id="app">
<button v-on:click="myClick">点击</button>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
myClick: function () {
console.log("点击了按钮");
}
}
})
</script>
示例：v-on绑定多个事件
<div id="app">
<button v-on="{
click: myClick,
mouseenter: mouseEnter,
mouseleave: mouseLeave
}">点击</button>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
myClick: function () {
console.log("点击了按钮");
},
mouseEnter: function () {
console.log("鼠标进入按钮");
},
mouseLeave: function () {
console.log("鼠标移出按钮");
}
}
})
</script>
8 v-model：实现了数据和视图的双向绑定
v-model可以实现数据和视图的双向绑定。
示例：与input进行绑定，选择性别后在下方显示选择
<div id="app">
<p>请选择你的性别：</p>
<input type="radio" value="男" v-model="gender">男
<input type="radio" value="女" v-model="gender">女
<p>您选择的性别是：{{ gender }}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
gender: ""
}
})
</script>
示例：与选择器绑定，在下方显示选择的值
<div id="app">
<p>请选择你的幸运数字：</p>
<p>
<select v-model="number">
<option>1</option>
<option>2</option>
</select>
</p>
<p>你的选择是：{{ number }}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
number: ""
}
})
</script>
示例：与textarea绑定，当textarea中的值变化时，也同步显示在页面上
<div id="app">
<textarea v-model="content"></textarea>
<p>文本框中内容：{{ content }}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
content: "今天是个好日子" // 设置textarea初始就是有值的
}
})
</script>
9 v-once：让元素或组件只渲染一次
v-once指令可以让元素或组件只渲染一次，一旦绑定，数据就不会改变。
示例：
<div id="app">
<h3>v-once</h3>
<input type="text" v-model="voncetext" />
<p>{{voncetext}}</p>
<p v-once>{{voncetext}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
voncetext: "测试v-once"
}
})
</script>
两个p标签，input中使用了v-model双向绑定了对象属性voncetext，
（1）在没有使用v-once的时候，输入框的值改变了，p标签的内容也会随之改变
（2）在使用v-once的时候，输入框的值改变了，p标签的内容不会改变
10 v-pre：跳过这个元素和它的子元素的编译过程
v-pre指令用于跳过这个元素和它的子元素的编译过程。对于大量没有指令的节点使用v-pre指令可以加快编译速度。
示例：
<div id="app">
<h1 v-pre>{{ message }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Vue.js教程'
}
})
</script>
11 v-cloak：解决初始化慢而导致页面闪动
插值表达式存在“闪动”的问题：vue.js文件没有加载完成时，在页面上上会出现 “{{message}}”的字样，等到vue创建实例、编译模板时，DOM就会被替换掉，过程中屏幕上会出现闪动一下。v-cloak指令可以解决初始化慢而导致页面闪动的问题。
示例代码：
<div id="app" v-cloak>{{message}}</div>
<style>
[v-cloak] {
display: none !important;
}
</style>
<script>
var app = new Vue({
el: "#app",
data: {
message: "this is a book"
}
})
</script>
12 自定义指令
通过自定义指令，我们可以对DOM进行更多的底层操作，这样不仅可以在某些场景下为我们提供快速解决问题的思路，而且让我们对vue的底层有了进一步的了解。我们可以通过Vue.directive({})或者directives:{}来定义指令
1、通过Vue.directive({})注册全局指令，Vue.directive({})内部的钩子函数如下：
钩子函数：
（1）bind：此钩子函数只会被调用一次，可以定义一个在绑定时执行一次的初始化动作
（2）inserted：当被绑定的元素插入到父元素中时低调用（此处的父元素不局限于document中）
（3）update：不论被绑定的值是否发生了变化，在更新时都会被调用
（4）componentUpdated：被绑定的元素在模板完成一次更新周期时调用
（5）unbind：只调用一次，元素解绑时调用
参数：
（1）el: 指令所绑定的DOM元素，可以直接用来操作DOM
（2）binding: 一个对象，包含以下属性
name: 指令的名称
value： 指令绑定的值
oldValue: 指令绑定前一个值
expression: 绑定值的字符串形式
arg： 传给指令的参数
modifiers: 这是一个包含修饰符的对象
示例：页面载入时，input元素自动获取焦点
<div id="app">
<p>页面载入时，input元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
2、通过directives:{}注册局部指令
示例：
<div id="app">
<p>页面载入时，input元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>