Vue 常用指令(掌握)
1.Vue 常用指令介绍
学习目标
- 理解什么是Vue 指令
- 掌握如何使用Vue指令
- 能够说出常见的Vue指令
内容讲解
【1】Vue 指令介绍
在vue中指令是作用在视图中的即html标签,可以在视图中增加一些指令来设置html标签的某些属性和文本。
指令都是以带有 v- 前缀的特殊属性。
【2】使用Vue指令
使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式。
【3】常见的Vue指令

内容小结
1.使用Vue指令注意事项
1)就是vue中的常见指令都是必须书写在html标签的属性中,在属性值中书写js代码。
2)vue中的指令只能使用在视图中,不能使用在脚本。
2.文本插值v-html
学习目标
内容讲解
【1】文本插值使用格式
1 2 3
| <标签名 v-html="vue中data的key"></标签名> 说明:文本插值v-html通过data的key获取value显示标签的文本中 【2】需求:使用文本插值v-html和插值表达式{{}}获取vue中data数据
|
【3】步骤:
1.在素材中找到文本插值的代码
2.使用文本插值获取vue中的数据
3.打开浏览器查看结果
【4】代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本插值</title> </head> <body>
<div id="div"> <div>{{msg}}</div> <div v-html="msg"></div> <div v-text="msg"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ msg:"<h1>Hello Vue</h1>" } }); </script> </html>
|
内容小结
1.使用文本插值,v-html 用来获取vue中的数据,将数据放到标签的文本中,并且解析标签。
1
| <标签名 v-html="data中的key"></标签名>
|
2.v-html于v-text和插值表达式的区别
1.v-html称为文本插值,属于指令,解析html标签
2.插值表达式:,不解析html标签
3.v-text:属于指令,但是不解析html标签 了解
3.绑定属性 v-bind:属性名或者 :属性名 (重点)
学习目标
内容讲解
【1】绑定属性格式
1 2 3 4
| 完整写法 <标签名 v-bind:属性名="data中key"></标签名> 简写:常用 ***** <标签名 :属性名="data中key"></标签名>
|
【2】需求:给html标签绑定属性
【3】步骤:
1.在素材中找到绑定属性的代码
2.给html标签绑定属性,获取vue的data值作为属性值
3.打开浏览器查看结果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| 【4】代码实现:使用文本插值v-html和插值表达式{{}}获取vue中data数据
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绑定属性</title> <style> .my{ border: 1px solid red; } </style> </head>
<body> <div id="div">
<a href="{{url}}">百度一下</a>
<br>
<a v-bind:href="url">百度一下</a> <br>
<a :href="url">百度一下</a> <br>
<div :class="cls">我是div</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ url:"http://www.baidu.com", cls:"my" } }); </script> </html>
|
内容小结
1.绑定属性格式:
1 2 3 4
| 完整写法: <标签名 v-bind:属性名="data中的key"></标签名> 简写:重点记忆 <标签名 :属性名="data中的key"></标签名>
|
4.条件渲染v-if
学习目标
内容讲解
【1】条件渲染v-if格式
1 2 3
| <标签名 v-if="条件表达式">满足条件显示的内容</标签名> <标签名 v-else-if="条件表达式">满足条件显示的内容</标签名> <标签名 v-else>上述条件都不满足执行的内容</标签名>
|
【2】需求:判断vue中data的某个变量的值,对3取余,余数为0显示div1,余数为1显示div2,否则显示div3
【3】步骤
1.在素材中找到条件渲染的代码
2.在html中获取vue中data的数据并判断,显示结果
3.打开浏览器查看结果
【4】代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> </head> <body> <div id="div">
<div v-if="num % 3 == 0">div1</div> <div v-else-if="num % 3 == 1">div2</div> <div v-else>div3</div>
</div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ num:2, flag:true } }); </script> </html>
|
内容小结
1.条件渲染:v-if
1 2 3 4 5
| <标签名 v-if="条件表达式">如果条件表达式为true则执行文本内容,如果为false则向下继续判断</标签名> <标签名 v-else-if="条件表达式">如果条件表达式为true则执行文本内容,如果为false则向下继续判断</标签名> .... <标签名 v-else>如果上述条件都为false则执行该文本</标签名> 注意:v-else,这里不用书写判断条件
|
5.条件渲染v-show
学习目标
- 能够使用条件渲染v-show
- 能够说出v-show和v-if区别
内容讲解
【1】条件渲染v-show格式
1 2 3
| <标签名 v-show="data中的key"></标签名> 说明: 1.如果data中的key的值是true,则显示标签文本内容,如果是false则不显示标签文本内容
|
【2】需求:获取Vue中data的布尔类型数据并显示
【3】步骤:
1.在素材中找到条件渲染的代码
2.在html中获取vue中data的数据并判断,显示结果
3.打开浏览器查看结果
【4】代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> </head> <body> <div id="div">
<div v-show="flag">div4</div>
</div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#div", data: { num: 2, flag: false } }); </script> </html>
|
内容小结
1.条件渲染v-show
1
| <标签名 v-show="data中的key"></标签名>
|
2.v-show和v-if区别
1.v-if:如果条件不满足,那么在页面中没有任何标签内容,直接删除
2.v-show:如果条件不满足,是通过设置css样式的属性display,设置属性值为none来隐藏标签,标签还在页面中,只是我们看不见
6.列表渲染 v-for
学习目标
内容讲解
【1】格式
1 2 3 4 5 6 7 8 9
| 增强for循环:掌握 <标签名 v-for="x in 数组或者对象名或者集合名"> {{x}} 使用插值表达式获取元素 </标签名>
普通for循环:了解 <标签名 v-for="(x,index) in 数组或者对象名"> 元素:{{x}},索引:{{index}} </标签名>
|
【2】作用:
遍历数组或者对象
【3】代码演示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染</title> </head> <body> <div id="div"> <ul>
<li v-for="element in names"> {{element}} </li>
<li v-for="stu in student"> {{stu}} </li>
<li v-for="(element,index) in names"> 元素:{{element}},索引:{{index}} </li>
<li v-for="(element,index) in student"> 元素:{{element}},索引:{{index}} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ names:["张三","李四","王五"], student:{ name:"张三", age:23 } } }); </script> </html>
|
内容小结
1.列表渲染主要用来遍历容器或者对象
2.使用格式:掌握
1 2 3 4
| 类似于增强for: <li v-for="元素 in 容器名或者对象名"> {{元素}} </li>
|
说明:取出列表渲染中的元素使用插值表达式。
3.使用格式:了解
1 2 3
| <li v-for="(元素,索引) in 容器名或者对象名"> {{元素}} </li>
|
说明:如果遍历的是对象,那么会将对象中的key作为索引返回。
7.事件绑定 v-on:事件名或者@事件名(重点)
学习目标
内容讲解
【1】格式
1 2 3 4 5
| <标签名 v-on:事件名="调用的是vue中的js函数"></标签名> 简写:掌握 <标签名 @事件名="调用的是vue中的js函数"></标签名> 说明: 1.在vue中绑定的事件名都是将原生js的事件名去掉on:click blur...
|
【2】需求:给视图绑定事件
【3】代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件绑定</title> </head>
<body> <div id="div"> <div>{{name}}</div>
<button onclick="fn();">以前方式_单击_改变div的内容</button>
<button v-on:click="change();">单击_改变div的内容</button> <button v-on:dblclick="change();">双击_改变div的内容</button>
<button @click="change();">简写_改变div的内容</button> </div> </body> <script src="js/vue.js"></script> <script> let ve = new Vue({ el:"#div", data:{ name:"黑马程序员" }, methods:{ change(){ this.name = "传智播客"; } } });
function fn() { ve.change(); } </script> </html>
|
内容小结
1.vue的事件绑定:
1 2 3
| <button v-on:事件名="调用vue中的函数">xxx</button> 简写: 经常使用 <button @事件名="调用vue中的函数">xxx</button>
|
2.vue中使用的事件名是将原生js中的事件名中的on给去掉
8.表单绑定v-model(重点) 非常重要
学习目标
- 能够使用v-model表单绑定指令
- 能够理解v-model表单绑定指令的作用
内容讲解
【1】v-model表单绑定作用:
可以实现双向数据绑定:
1 2
| 1)vue中的data数据更改,然后视图中的显示内容也会随着改变 2)视图中的内容改变,vue中的data数据也会随着改变
|
单向数据绑定:
1
| vue中的data数据更改,然后视图中的显示内容也会随着改变
|
【2】v-model表单绑定实现双向数据绑定的原理:
MVVM模型(Model,View,ViewModel):是MVC模式的改进版
在前端页面中,JS对象表示Model,页面表示View,两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel,它是桥梁。
ViewModel负责把Model的数据同步到View显示出来,还负责把View修改的数据同步回Model。

【3】
在vue中实现双向数据绑定使用表单绑定:v-model.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单绑定</title> </head> <body> <div id="div"> <form autocomplete="off">
姓名_单向绑定:<input type="text" name="username" :value="username"> <br>
姓名_双向绑定:<input type="text" name="username" v-model="username"> <br> 年龄:<input type="number" name="age" v-model="age"> 性别:<input type="text" name="gender" v-model="gender">
</form> {{username}} <hr> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ username:"张三", age:23, gender:"男" } }); </script> </html>
|
内容小结
1.表单绑定:v-model可以实现双向数据绑定。
2.双向数据绑定:

1 2
| vue中的data数据改变,视图也会随着改变 --- 单向绑定 视图改变,vue中的data中的数据也会改变
|
3.使用格式:
1
| 姓名_双向绑定:<input type="text" name="username" v-model="data中的变量名">
|
9.指令小结
1.文本插值:将data中的变量名表示的值解析到文本中
注意:可以解析html标签
1 2 3 4 5 6 7
| <div v-html="data中的变量名"></div> <div v-html="username"></div> 实现效果: <div>锁哥</div> data:{ username:"锁哥" }
|
2.绑定属性:
1 2 3
| <input v-bind:属性名="data中的变量名"/> 可以绑定任意属性 简写:使用较多 <input :属性名="data中的变量名" />
|
3.条件渲染:
1 2 3 4 5 6 7 8
| <li v-if="条件表达式">文本1</li> <li v-else-if="条件表达式">文本2</li> .... <li v-else>文本</li>
<li v-show="条件表达式">文本</li> 如果条件表达式为true则显示文本,为false则给标签添加css样式即display:none 隐藏
|
4.列表渲染:
1 2 3 4 5 6 7
| <li v-for="元素 in 容器或者对象名"> {{元素}} </li>
<li v-for="(元素,索引) in 数组名或者对象名"> {{元素}} </li>
|
5.事件绑定:
1 2 3 4 5 6 7
| <button v-on:事件名="调用vue中的函数"> 单击 </button> 简写:经常使用,去掉原生js的事件名中的on <button @事件名="调用vue中的函数"> 单击 </button>
|
6.表单绑定 :实现双向数据绑定。视图改变,data数据改变。data数据改变,视图也改变。
1
| <input v-model="data中的变量名"/>
|