来源
https://www.bilibili.com/video/BV1zq4y1p7ga/?spm_id_from=333.337.search-card.all.click
1、指令的概念
指令（Directives）
是 vue 为开发者提供的
模板语法
，用于
辅助开发者渲染页面的基本结构
。
vue 中的指令
按照不同的用途
可以分为如下 6 大类：
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
注意：指令是 vue 开发中最基础、最常用、最简单的知识点。
1.1 内容渲染指令
内容渲染指令
用来辅助开发者
渲染 DOM 元素的文本内容
。常用的内容渲染指令有如下 3 个：
- v-text
- {{ }}
- v-html
v-text
用法示例
<div id="app">
<!-- 你好啊, 李银河-->
<h2>{{message}},李银河</h2>
<!-- 你好啊 -->
<h2 v-text="message">,李银河</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
},
})
</script>
注意：v-text 指令会
覆盖元素内默认的值
。
{{ }} 语法
vue 提供的
{{ }}
语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是
插值表达式
（英文名为：
Mustache
）。
<div id="app">
<!-- 你好啊 -->
<h2>{{message}}</h2>
<!-- 你好啊,李银河 -->
<h2>{{message}},李银河</h2>
<!-- kobebryant -->
<h2>{{firstName + lastName}}</h2>
<!-- kobe 李银河 bryant -->
<h2>{{firstName +' 李银河 '+ lastName}}</h2>
<!-- kobe 李银河bryant -->
<h2>{{firstName }} 李银河{{lastName}}</h2>
<!-- 200 -->
<h2>{{counter *2}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
firstName: 'kobe',
lastName: 'bryant',
counter: 100
},
})
</script>v-html
v-text
指令和
插值表达式
只能渲染
纯文本内容
。如果要把
包含 HTML 标签的字符串
渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：
<div id="app">
<!-- 这里是当成一个字符串渲染，不可点击： <a href="http://www.baidu.com">百度一下</a> -->
<h2>{{url}}</h2>
<!-- 当成HTML结构渲染可触发点击a标签跳转： 百度一下 -->
<h2 v-html="url"></h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
url: '<a href="http://www.baidu.com">百度一下</a>'
},
})
</script>1.2 属性绑定指令
如果需要为
元素的属性
动态绑定
属性值
，则需要用到
v-bind
属性绑定指令。由于
v-bind 指令
在开发中使用频率非常高，因此，vue 官方为其提供了
简写形式
（简写为英文的
:
）
用法示例如下:
<div id="app" v-cloak>
<img :src="imgUrl" alt="">
<a :href="aUrl">百度一下</a>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
imgUrl: "https://i04piccdn.sogoucdn.com/d37c4eec9299eee6",
aUrl: "http://www.biadu.com"
},
})
</script>v-bind动态绑定class
<style>
.active {
color: red;
}
.link {
font-size: 40px;
}
</style>
<body>
<div id="app" v-cloak>
<!-- 为true加上这个类名 为false移除这个类名
<h2 :class="{类名1:true,类名2:false}">{{message}}</h2> -->
<h2 class="title" :class="{active:isActive,link:isActive}">{{message}}</h2>
<button @click="btnClick()">按钮</button>
<!-- 如果要绑定的类名太多,可以用一个函数封装起来 -->
<h2 class="title" :class=" getClasses()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: false,
},
methods: {
btnClick () {
this.isActive = !this.isActive
},
getClasses() {
// 对象写法
return { active: this.isActive, link: this.isActive }
// 数组写法
// return ['active', 'link']
}
}
})
</script>
</body>v-bind动态绑定style
对象写法：
<div id="app">
<h2 :style="{属性名:属性值}">{{message}}</h2>
<!-- '50px' 必须加上单引号 否则是当做一个变量去解析的 -->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<!-- final_size 被当做一个变量去解析 -->
<h2 :style="{fontSize:final_size + 'px',color: finalColor}">{{message}}</h2>
<!-- 函数封装 -->
<h2 :style="getStyles()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
final_size: 100,
finalColor: 'red'
},
methods: {
getStyles: function () {
return { fontSize: this.final_size + 'px', backgroundColor: this.finalColor }
}
}
})
</script>数组写法：
<div id="app">
<h2 :style="[baseSyle,fontSize]">{{ message}}</h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseSyle: { backgroundColor: 'red' },
fontSize: { fontSize: '100px' },
}
})
</script>1.3 事件绑定指令
通过 v-on 绑定的事件处理函数，需要
在 methods 节点
中进行声明：
<div id="app">
<h2>{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
// es6 写法
increment() {
this.counter < 9 ? this.counter++ : null;
},
decrement() {
this.counter > 1 ? this.counter-- : null;
}
}
})
</script>事件参数对象
在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在
v-on 指令
（简写为
@
）所绑定的事件处理函数中，
同样可以接收到事件参数对象 event
，示例代码如下：
<div id="app">
<!-- 1.事件调用的方法没有参数 -->
<button @click="btn1Click">按钮1</button>
<!-- 2.有参数 -->
<button @click="btn2Click('我是你大爷')">按钮2</button>
<!-- 3.在事件定义时,写方法省略了小括号,但是方法本身是需要一个参数的,这时候,
Vue会将浏览器产生的event事件对象作为参数传入到方法 -->
<button @click="btn3Click">按钮3</button>
<!-- 4.方法定义时,我们需要 event 对象 ,同时又需要其它参数 -->
<!-- 在调用方法时，如何手动的获取到浏览器的参数event对象 -->
<button @click="btn4Click(123,$event)">按钮4</button>
<!-- <button @click="btn5Click">按钮5</button> -->
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
btn1Click() {
console.log(' btn1Click');
},
btn2Click(name) {
console.log(name);
},
btn3Click(event) {
console.log(event);
},
btn4Click(a, event) {
console.log(a, '------', event);
}
}
})
</script>事件修饰符
在事件处理函数中调用
event.preventDefault()
或
event.stopPropagation()
是非常常见的需求。因此， vue 提供了
事件修饰符
的概念，来辅助程序员更方便的
对事件的触发进行控制
。常用的 5 个事件修饰符如下：
|
事件修饰符
|
说明
|
| .prevent | 阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等） |
| .stop | 阻止事件冒泡 |
| .capture | 以捕获模式触发当前的事件处理函数 |
| .once | 绑定的事件只触发1次 |
| .self | 只有在 event.target（返回触发事件的对象(html)） 是当前元素自身时触发事件处理函数 |
事件捕获和冒泡理解：
事件流:描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程即DOM事件流。
比如我们给一个div注册了一个点击事件：
DOM 事件流分为3个阶段:
- 捕获阶段 网景最早提出的：从最顶层的节点开始，然后逐级向下传播到最具体的元素(目标点)接收的过程
- 当前目标阶段 找到点击事件时就是目标阶段
- 冒泡阶段 IE最早提出的： 事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
通俗的点的解释:我们向水里扔一块石头，首先它会有一个下降过程，这个过程就可以理解为从最顶层向事件发生最具体元素(目标点)的捕获过程；之后会产生泡泡，会在最低点向上冒(最具体的元素漂浮在水面)，这个过程相当于事件冒泡。
代码示例：
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
.father .son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: purple;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div id="app" v-cloak>
<div class="father" @click.capture="fatherClick">
<div class="son" @click="sonClick">son盒子</div>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {
sonClick() {
/*
默认情况下：点击son盒子时冒泡阶段 先执行 sonClick方法 再到 fatherClick方法
执行过程： son(目标)->father ->body ->html-> document
打印：
先：son盒子事件触发了
后：father盒子事件触发了
*/
console.log('son盒子事件触发了')
/*
给 father 盒子的点击事件加了 .capture 修饰符 开启事件捕获
点击son盒子时捕获阶段 先执行 fatherClick方法 再到 sonClick方法
过程：document-> html -> body -> father(目标) ->son(目标)
打印：
先：father盒子事件触发了
后：son盒子事件触发了
*/
},
fatherClick() {
console.log('father盒子事件触发了')
}
}
})
</script>注意：
- JS代码中只能执行捕获或者冒泡其中的一个阶段。
- 实际开发中我们很少使用使用事件捕获，我们更关注事件冒泡
- 有些事件没有冒泡，比如onblur、onfocus、onmouseenter、onmouseleave、 onblur 、onfocus
按键修饰符
在监听
键盘事件
时，我们经常需要
判断详细的按键
。此时，可以为
键盘相关的事件
添加
按键修饰符
，例如：
<!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
<div id="app">
<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
</div>
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {},
methods: {
clearInput(e) {
console.log('触发了 clearInput 方法')
e.target.value = ''
},
commitAjax() {
console.log('触发了 commitAjax 方法')
}
},
})
</script>1.4 双向绑定指令
vue 提供了
v-model 双向数据绑定
指令，用来辅助开发者在
不操作 DOM
的前提下，
快速获取表单的数据
<div id="app">
<p>用户的名字是：{{ username }}</p>
<input type="text" v-model="username">
<hr>
<input type="text" :value="username">
<hr>
<select v-model="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</div>
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
city: '2'
}
})
</script>v-model 指令的修饰符
为了方便对用户输入的内容进行处理
，vue 为 v-model 指令提供了 3 个修饰符，分别是：
| 修饰符 | 作用 | 示例 |
| .number | 自动将用户的输入值转为数值类型 | <input v-model.number="age" /> |
| .trim | 自动过滤用户输入的首尾空白字符 | <input v-model.trim="msg" /> |
| .lazy | 在“change”时而非“input”时更新（失去焦点后才触发change事件） | <input v-model.lazy="msg" /> |
示例用法如下：
<!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<div id="app">
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>
<hr>
<input type="text" v-model.trim="username">
<button @click="showName">获取用户名</button>
<hr>
<input type="text" v-model.lazy="username">
</div>
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
n1: 1,
n2: 2
},
methods: {
showName() {
console.log(`用户名是："${this.username}"`)
}
},
})
</script>1.5 条件渲染指令
条件渲染指令
用来辅助开发者
按需控制 DOM 的显示与隐藏
。条件渲染指令有如下两个，分别是：
- v-if
- v-show
示例用法如下：
<div id="app">
<p v-if="flag">这是被 v-if 控制的元素</p>
<p v-show="flag">这是被 v-show 控制的元素</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
flag: false
}
})
</script>v-if 和 v-show 的区别
实现原理不同：
- v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
- v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；
性能消耗不同：
v-if
有更高的
切换开销
，而
v-show
有更高的
初始渲染开销
。因此：
- 如果需要非常频繁地切换，则使用 v-show 较好
- 如果在运行时条件很少改变，则使用 v-if 较好
相同点：
v-if 和 v-show 都可以控制元素在页面上的显示与隐藏，并且他们隐藏之后都不会占用DOM结构的空间位置，不过 v-show隐藏之后还是可以通过 f12 查看到DOM结构，v-if 不能
v-else
v-if 可以单独使用，或配合 v-else 指令一起使用：
注意：v-else 指令
必须配合
v-if 指令一起使用，否则它将不会被识别！
<!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<div id="app">
<p v-if="flag">这是被 v-if 控制的元素</p>
<div v-else>差</div>
</div>
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
// 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
flag: false,
}
})
</script>v-else-if
v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
注意：v-else-if 指令
必须配合
v-if 指令一起使用，否则它将不会被识别！
<!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<div id="app">
<p v-if="flag">这是被 v-if 控制的元素</p>
<p v-show="flag">这是被 v-show 控制的元素</p>
<hr>
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
</div>
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
// 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
flag: false,
type: 'A'
}
})
</script>1.6 列表渲染指令
vue 提供了
v-for
列表渲染指令，用来辅助开发者
基于一个数组来循环渲染一个列表结构
。v-for 指令需要使用
item in items
形式的特殊语法，其中：
- items 是待循环的数组
- item 是被循环的每一项
遍历数组：
<div id="app">
<ul>
<li v-for="(inem,index) in names">{{index+1}}.{{inem}}</li>
</ul>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
names: ['why', 'kobe', 'james', 'curry']
}
})
</script>
遍历对象：
<div id="app">
<!-- 1.在遍历对象的过程中,如果只是获取一个值获取的是value(属性值) -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2.获取key和value 格式:(value,key) value 属性名 key属性值-->
<ul>
<li v-for="(value,key) in info">{{value}}:{{key}}</li>
</ul>
<!-- 3.获取key和value和index 格式:(value,key,index )value 属性名 key属性值 index 索引 -->
<ul>
<li v-for="(value,key,index) in info">{{index}}、{{value}}:{{key}}</li>
</ul>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
info: {
name: 'wzj',
age: 21,
heigth: 1.78
}
}
})
</script>使用 key 维护列表的状态
当
列表的数据变化
时，默认情况下，vue 会
尽可能的复用
已存在的 DOM 元素，从而
提升渲染的性能
。但这种默认的性能优化策略，会导致
有状态的列表无法被正确更新
。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，
从而在
保证
有状态的列表被正确更新
的前提下，
提升渲染的性能
。此时，需要为每项提供一个
唯一的 key 属性
：
<!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<th>索引</th>
<th>Id</th>
<th>姓名</th>
</thead>
<tbody>
<!-- 官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性 -->
<!-- 而且，尽量把 id 作为 key 的值 -->
<!-- 官方对 key 的值类型，是有要求的：字符串或数字类型 -->
<!-- key 的值是千万不能重复的，否则会终端报错：Duplicate keys detected -->
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '张三' },
]
}
})
</script>key 的注意事项
- key 的值只能是字符串或数字类型
- key 的值必须具有唯一性（即：key 的值不能重复）
- 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
- 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
- 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）
2、过滤器
过滤器
（
Filters
）是 vue 为开发者提供的功能，常用于
文本的格式化
。过滤器可以用在两个地方：
插值表达式
和
v-bind 属性绑定
。
过滤器应该被添加在 JavaScript 表达式的
尾部
，由“
管道符
”进行调用，示例代码如下：
<!-- 在双花括号中通过“管道符”调用 capi 过滤器，对 message 的值进行格式化化 -->
<p>message 的值是：{{ message | capi }}</p>
<!-- 在 v-bind (简写：: )中调用 capi 过滤器，对 id 的值进行格式化化 -->
<div :id="rawId | formatId"></div>2.1 定义过滤器
在创建 vue 实例期间，可以在
filters 节点
中定义过滤器，示例代码如下：
<div id="app">
<!-- 在双花括号中通过“管道符”调用 capi 过滤器，对 message 的值进行格式化化 -->
<p>message 的值是：{{ message | capi }}</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// 过滤器函数，必须被定义到 filters 节点之下
// 过滤器本质上是函数
filters: {
// 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
capi(val) {
// 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
// toUpperCase() 方法用于把字符串转换为大写。
console.log(val.charAt(0)) // h
const first = val.charAt(0).toUpperCase() // H
// 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
const other = val.slice(1) // ello vue.js
// 强调：过滤器中，一定要有一个返回值
return first + other // Hello vue.js
}
}
})
</script>2.2 私有过滤器和全局过滤器
在 filters 节点下定义的过滤器，称为“
私有过滤器
”，因为它
只能在当前 vm 实例所控制的 el 区域内使用
。如果希望
在多个 vue 实例之间共享过滤器
，则可以按照如下的格式定义
全局过滤器
：
// 使用 Vue.filter() 定义全局过滤器
Vue.filter('capi', function (str) {
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first + other + '~~~'
})
2.3 连续调用多个过滤器
过滤器可以
串联地
进行调用，例如：
示例代码如下:
2.4 过滤器传参
过滤器的
本质
是
JavaScript 函数
，因此可以接收参数，格式如下：
示例代码如下：
2.5 过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在
vue 3.x
的版本中
剔除了过滤器
相关的功能。
在企业级项目开发中：
- 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
- 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
总结
① 能够知道 vue 的
基本使用步骤
⚫
导入 vue.js 文件
⚫
new Vue() 构造函数，得到 vm 实例对象
⚫
声明 el 和 data 数据节点
⚫
MVVM 的对应关系
② 掌握 vue 中常见
指令
的基本用法
⚫
插值表达式、v-bind、v-on、v-if 和 v-else
⚫
v-for 和 :key、v-model
③ 掌握 vue 中
过滤器
的基本用法
⚫
全局过滤器 Vue.filter('过滤器名称', function)
⚫
私有过滤器 filters 节点
扫一扫
1960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
