章节目录：
一、指令概述
二、插值表达式
2.1 v-text 和 v-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
- 代码示例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
- 代码示例：
<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 事件绑定
- 代码示例：
<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 按键修饰符
- 代码示例：
<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
- 代码示例：
<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
- 代码示例：
<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>
- 效果演示：
