章节目录：
一、指令概述
指令 (
Directives) ：是带有v-前缀的特殊attribute。指令attribute的值预期是单个JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于
DOM。
二、插值表达式
格式：
{{表达式}}说明：
该表达式支持
JS语法，可以调用 js 内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;
可以直接获取 Vue 实例中定义的数据或函数使用
{{ }}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{ }}，
加载完毕后才显示正确数据，我们称为插值闪烁。
2.1 v-text 和 v-html
v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出 。
v-html：将数据输出到元素内部，如果输出的数据有 HTML 。
- 代码示例：
<body>
<div id="app">
v-text:<span v-text="hello"></span>
v-html:<span v-html="hello"></span>
</div>
<script>
/*
1. 使用 v-text 和 v-html 指令来替代{{}}。
*/
var app = new Vue({
el: "#app",
data: {
hello: "say hello"
}
});
</script>
</body>
- 效果演示：
三、v-bind
html 属性不能使用双大括号形式绑定，我们使用
v-bind指令给HTML标签属性绑定值；
而且在将v-bind用于class和style时，Vue.js 做了专门的增强。
- 代码示例1 -（绑定class）：
<body>
<div class="static" v-bind:class="{ active: isActive, 'text-danger' : hasError }">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
hasError: false
}
});
</script>
</body>
- 代码示例2 -（绑定style）：
<body>
<div id="app" v-bind:style="{ color:activeColor }" v-bind:user="userName">
{{userName}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
activeColor: "green",
userName: "jan"
}
});
</script>
</body>
四、v-model
v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
- 代码示例：
<body>
<div id="app">
<input type="checkbox" v-model="language" value="java">java<br />
<input type="checkbox" v-model="language" value="js">js<br />
<input type="checkbox" v-model="language" value="python">python<br />
<h2>你选择的语言是{{language}}</h2>
</div>
<script>
/*
1. 通过v-model指令完成数据的双向绑定。
*/
var app = new Vue({
el: "#app",
data: {
language: []
}
});
</script>
</body>
- 效果演示：
五、v-on
5.1 事件绑定
v-on指令用于给页面元素绑定事件。
语法：v-on:事件名="js片段或函数名"
- 代码示例：
<body>
<div id="app">
<button v-on:click="num++">点赞</button><br />
<button v-on:click="remove">取消点赞</button><br />
{{num}}次点赞
</div>
<script>
/*
1. 通过v-on指令完成页面元素的绑定事件。
*/
var app = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
remove() {
this.num--;
},
},
});
</script>
</body>
- 效果演示：
5.2 事件修饰符
- 代码示例：
<body>
<div id="app">
<!-- 通过鼠标右击触发时间，`.once`表明只执行一次。 -->
<button v-on:contextmenu.once="num++">点赞</button><br />
<button v-on:contextmenu="remove($event)">取消点赞</button><br />
<h2>{{num}}次点赞</h2>
</div>
<script>
/*
1. 通过v-on指令的事件修饰符，完成页面元素的绑定事件。
2. `.stop` ：阻止事件冒泡到父元素。
3. `.prevent`：阻止默认事件发生。
4. `.capture`：使用事件捕获模式 。
5. `.self`：只有元素自身触发事件才执行（冒泡或捕获的都不执行）。
6. `.once`：只执行一次。
*/
var app = new Vue({
el: "#app",
data: {
num: 10
},
methods: {
remove(ev) {
this.num--;
},
},
});
</script>
</body>
- 效果演示：
5.3 按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为
v-on在监听键盘事件时添
加按键修饰符。
- 代码示例：
<body>
<div id="app">
<!-- 按键盘上键执行num+2事件，按下键执行num-2事件。 -->
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2">
</div>
<script>
/*
1. 通过v-on指令的按键修饰符，完成页面元素的绑定事件。
2. 常用按键别名：`.enter` `.tab` `.delete` (捕获“删除”和“退格”键)
`.esc` `.space` `.up` `.down` `.left` `.right`
*/
var app = new Vue({
el: "#app",
data: {
num: 0
}
});
</script>
</body>
- 效果演示：
六、v-for
遍历数据渲染页面是非常常用的需求，Vue 中通过
v-for指令来实现。
- 代码示例：
<body>
<div id="app">
<li v-for="(user,index) in users">
{{index + 1}} {{user.name}} {{user.age}}
</li>
</div>
<script>
/*
1. 通过v-for完成data中的数组遍历。
2. 语法： v-for="(item,index) in items"。 注：index是获取数组下标，为可填参数。
*/
var app = new Vue({
el: "#app",
data: {
users: [
{ name: "jan", age: 18 },
{ name: "nicky", age: 20 },
{ name: "lucy", age: 23 }
]
}
});
</script>
</body>
- 效果演示：
七、v-if和v-show
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-show，当得到结果为true时，所在的元素才会被显示。语法：
v-if=“布尔表达式”,v-show=“布尔表达式”。
- 代码示例：
<body>
<div id="app">
<!-- info = !info表示每次点击后取相反的布尔值。 -->
<button v-on:click="info = !info">点击按钮</button>
<h2 v-if="info">v-if被展示</h2>
<h2 v-show="info">v-show被展示</h2>
</div>
<script>
/*
1. v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。
2. v-show，当得到结果为 true 时，所在的元素才会被显示。
3. 语法：v-if="布尔表达式", v-show="布尔表达式"。
*/
var app = new Vue({
el: "#app",
data: {
info: true
}
});
</script>
</body>
- 效果演示：
八、v-else 和 v-else-if
- 代码示例：
<body>
<div id="app">
<button v-on:click="random=Math.random()">点击获取随机值</button>
{{random}}
<h2 v-if="random>=0.75">
随机值大于0.75
</h2>
<h2 v-else-if="random>0.5">
随机值大于0.5
</h2>
<h2 v-else-if="random>0.25">
随机值大于0.25
</h2>
<h2 v-else>
其他情况
</h2>
</div>
<script>
/*
1. v-else 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。
*/
var app = new Vue({
el: "#app",
data: {
random: 0
}
});
</script>
</body>
- 效果演示：
九、结束语
“-------怕什么真理无穷,进一寸有一寸的欢喜。”
微信公众号搜索：饺子泡牛奶。