Vue的常用指令
大纲
- 什么是指令
- 常用指令介绍
什么是指令
官方定义:指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
解释:Vue 指令是带有 v- 前缀的特殊 attribute,它的值是一个表达式,指令帮助我们操作 DOM,当表达式的值发生改变时更新渲染 DOM
常用指令介绍
1.v-text
v-text
是元素的 InnerText 属性,它的作用和之前我们使用的 {{}}
一样,用于数据绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div v-text="message"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: "Hello!"
},
})
</script>
</body>
</html>
我们使用了 v-text 指令,它绑定 message 值,会将 message 的值动态插入 <div>
标签内。
2.v-html
v-html
是元素的 innerHTML,它用于绑定一段 html
标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div v-html="message"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: "<div>您好,我是小慕!</div>",
}
})
</script>
</body>
</html>
我们使用了 v-html 指令,它绑定 message 值,会将 html 元素插入 <div>
标签内。
3.v-bind
v-bind
用于给元素的属性赋值。v-bind
后面是 :属性名=[变量名]。例如:v-bind:title="message"
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div v-bind:title="title">
鼠标悬停查看消息!
</div>
<div>
<a v-bind:href="href">慕课网</a>
</div>
<div>
<img v-bind:src="src"/>
</div>
<div>
<button v-bind:disabled="disabled">禁用按钮</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
title: "您好,我是YF,每天可以从我这学到更多的东西!",
href: 'https://www.baidu.com/',
src: 'img/img1.png',
disabled: true
}
})
</script>
</body>
</html>
vue
还提供了指令 v-bind
的简写方式,可以直接通过:属性名
的方式。
4.v-for
v-for
用于列表的循环渲染。基本语法:v-for="item in data"
,data 可以是数组或者对象,接下来我们介绍对两种数据类型的循环。
v-for 对数组的循环渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in music">{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
// 要循环的数组
music: [
{ name: '青花瓷' },
{ name: '阳光总在风雨后' },
{ name: '十年' }
]
}
}
})
</script>
</body>
</html>
在 JS 代码中,我们定义了数组 music。
在 HTML 中,我们使用 v-for 对数组进行遍历,循环输出<li></li>
,并在每次循环的时候将 name 插入到 <li>
标签内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in obj">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
obj:{
name:'YF',
age:19,
sex:'女'
}
}
}
})
</script>
</body>
</html>
在 JS 代码,我们定义了对象 obj;
在 HTML ,我们使用 v-for 对数组进行遍历,循环输出<li></li>
,并在每次循环的时候将属性的值插入到 <li>
标签内。
5.v-if和v-show
vue
提供了v-if
和v-show
两个指令来控制页面元素的显示和隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<button>我是添加按钮,我一直在</button>
</div>
<div>
<button id="show" v-show="deleteButton">我是删除按钮,我通过v-show控制显隐</button>
<button v-on:click="deleteButton = true">设置显示</button>
<button v-on:click="deleteButton = false">设置隐藏</button>
</div>
<div>
<button id="if" v-if="editButton">我是修改按钮,我通过v-if控制显隐</button>
<button v-on:click="editButton = true">设置显示</button>
<button v-on:click="editButton = false">设置隐藏</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
deleteButton: true,
editButton: true
}
}
})
</script>
</body>
</html>
从图中可以发现:通过v-show
设置状态的按钮元素还在页面中,只是通过样式display:none
设置隐藏。而通过v-if
设置状态的按钮元素从页面中删除了。
v-if
:根据表达式的值在 DOM 中生成或移除一个元素。
v-show
:根据表达式的值通过样式的改变来显示或者隐藏 HTML 元素。
6.v-if ,v-else-if ,v-else
事实上,v-if
的条件渲染和JavaScript条件判断语句中的if、else、else if
非常类似。
使用v-else指令来表示v-if的“else块”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
你好,YF!
</div>
<div v-else>
Hello,yf!
</div>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
在 HTML 代码中,当随机数大于 0.5 的时候会显示中文的“你好,yf!”,否则,显示英文的 “Hello, yf!”。
v-else-if,充当v-if的“else-if块”,可以连续使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="number === 1">
A
</div>
<div v-else-if="number === 2">
B
</div>
<div v-else>
C
</div>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
number: 1
}
}
})
</script>
</body>
</html>
在 HTML 代码中,我们通过判断 number 的值来控制元素的显示隐藏。首先判断 number 是否为 1 ,如果是显示 A,如果不是,则判断 number 是否为 2,如果是显示 B,否则显示 C。
7.v-on
有时候,我们需要给元素绑定事件,vue
中提供了指令 v-on
来进行事件的绑定。用法:v-on:事件名="方法"
,例如:v-on:click=“alert”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="hello">hello</button>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {},
methods: {
hello() {
alert('hello')
}
}
})
</script>
</body>
</html>
我们给按钮定义来点击事件,并在点击的时候触发 methods 中的 hello 方法。
和v-bind
一样vue
同样给v-on
提供了简写方式,只需要通过@事件类型
的方式就可以了。例如:@click="hello"
。
当然,v-on
不仅只有click
一种事件,还有 v-on:keyup.enter
、v-on:keyup.page-down
、v-on:submit
等。
8.v-model
在原生 Javascript 的项目中,要获取用户输入框输入的内容,需要通过DOM
对象的方式。在Vue
项目中则不用这么繁琐,因为vue
通过了指令v-model
来实现数据的双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<label>年龄:</label>
<input v-model="age"/>
</div>
<div>当前输入的年龄是: {{age}}</div>
<button @click="add">加一岁</button>
<button @click="alertYear">弹出年龄</button>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: 10
},
methods: {
add(){
this.age = this.age + 1;
},
alertYear() {
alert(this.age)
}
}
})
</script>
</body>
</html>
上述代码中,我们通过给input
元素绑定指令v-model
, 使得输入框中的数据 和 data
中的age
形成双向绑定。这样当用户在输入框内输入值的时候age
也会同时改变。同样,当我们在methods
中通过add
方法修改age
的值时,输入框中的值也会同时改变。
9.v-pre
该指令会跳过所在元素和它的子元素的编译过程,也就是把这个节点及其子节点当作一个静态节点来处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-pre>当前输入的年龄是: {{age}}</div>
<div>当前输入的年龄是: {{age}}</div>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: 10
},
})
</script>
</body>
</html>
我们给 div 添加了 v-pre 指令,所以 插值表达式 {{age}} 并不会生效。同样,第三行的 div 没有添加 v-pre 指令,能正常编译显示
10.v-once
模板只会在第一次更新时显示数据,此后再次更新该 DOM 里面引用的数据时,内容不会自动更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<label>年龄:</label>
<input v-model="age"/>
</div>
<div v-once>当前输入的年龄是: {{age}}</div>
<div>当前输入的年龄是: {{age}}</div>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: 10
}
})
</script>
</body>
</html>
我们给 div 添加了 v-once 指令,当输入框内的数据发生改变时,被v-once
作用的 div
并不会实时更新数据。
小结
本小节我们学习了 Vue 中的一些常用的指令,主要有以下知识点:
- v-text、v-html 用于页面渲染;
- v-show、v-if、v-else-if、v-else 条件渲染指令;
- v-model 用于数据双向绑定;
- v-on 用于事件绑定;
- v-for 用于循环。
年龄是: {{age}}
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: 10
}
})
</script>
```
[外链图片转存中…(img-m9zS4Zb1-1620465064319)]
我们给 div 添加了 v-once 指令,当输入框内的数据发生改变时,被v-once
作用的 div
并不会实时更新数据。
小结
本小节我们学习了 Vue 中的一些常用的指令,主要有以下知识点:
- v-text、v-html 用于页面渲染;
- v-show、v-if、v-else-if、v-else 条件渲染指令;
- v-model 用于数据双向绑定;
- v-on 用于事件绑定;
- v-for 用于循环。