一、推荐大家安装的 VScode 中的 Vue 插件
[button color="info" icon="" url="https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets" type=""]Vue 3 Snippets[/button]
[button color="info" icon="" url="https://marketplace.visualstudio.com/items?itemName=octref.vetur" type=""]Vetur[/button]
二、vue 的基本使用
- 导入 vue.js 的 script 脚本文件
- 在页面中声明一个将要被 vue 所控制的 DOM 区域
-
创建 vm 实例对象(vue 实例对象)
<div id="app">{{url}}</div> <script src="../vue-2.6.12.js"></script> <script> const vm = new Vue({ el: '#app',//el指定选择器 data: { url: 'www.xxhzm.cn' } }) </script>
三、vue 的指令与过滤器
指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类:
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
注意:指令是 vue 开发中最基础、最常用、最简单的知识点。
3.1 内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个:
v-text
{{ }}
v-html
v-text
用法示例:
{{ }} 语法
vue 提供的 {{ }} 语法,专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达
式(英文名为:Mustache)。
用法示例:
v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素,
则需要用到 v-html 这个指令
3.2 属性绑定指令
如果需要为元素的属性动态绑定属性值,则需要用到 v-bind 属性绑定指令。用法示例如下:
由于 v-bind 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的 : )。
注意:原生 DOM 对象有 onclick、oninput、onkeyup、onmouseover 等原生事件,替换为 vue 的事件绑定形式后,
分别为:v-on:click、v-on:input、v-on:keyup、v-on:mouseover
3.3 事件绑定指令
通过 v-on 绑定的事件处理函数,需要在 methods 节点中进行声明:
由于 v-on 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的 @ )。
在使用 v-on 指令绑定事件时,可以使用 ( ) 进行传参,示例代码如下:
3.3.1 按键修饰符
在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符,例如:
<div id="app">
<input type="text" @keyup.enter="enter">
<input type="text" @keyup.esc="esc">
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
enter() {
console.log('你按到了enter')
},
esc() {
console.log('你按到了esc')
}
}
})
在第一个表单内按enter键就会输出你按到了enter,第二个esc同上
3.4 双向绑定指令
vue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据例子:
<div id="app">
<p v-model="username">{{ username }}</p>
<input type="text" v-model="username">
</div>
<script src="../vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '小小孩子们'
}
})
在输入框内更改内容p标签会同步变更
input
select
textarea
都可以使用v-model
3.5 条件渲染指令
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个,分别是:
- v-if
- v-show
v-if 和 v-show 的区别
实现原理不同:
v-if 指令会动态地创建或移除 DOM 元素,从而控制元素在页面上的显示与隐藏
v-show 指令会动态为元素添加或移除 style="display: none;" 样式,从而控制元素的显示与隐藏
性能消耗不同:
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此:
如果需要非常频繁地切换,则使用 v-show 较好
如果在运行时条件很少改变,则使用 v-if 较好
但实际开发中基本都使用v-if
使用v-if判断成绩
演示地址:https://www.xxhzm.cn/vue/day1/v-if.html
3.6 循环渲染指令
vue 提供了 v-for 列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使
用 item in items 形式的特殊语法,其中:
- items 是待循环的数组
- item 是被循环的每一项
v-for 指令还支持一个可选的第二个参数,即当前项的索引。语法格式为 (item, index) in items,示例代码如下:


注意:v-for 指令中的 item 项和 index 索引都是形参,可以根据需要进行重命名。例如 (user, i) in userlist
使用 key 维护列表的状态
当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种
默认的性能优化策略,会导致有状态的列表无法被正确更新。
为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲
染的性能。此时,需要为每项提供一个唯一的 key 属性:
key 的注意事项
- key 的值只能是字符串或数字类型
- key 的值必须具有唯一性(即:key 的值不能重复)
- 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
- 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
- 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)
示例:
<!-- 官方建议,只要用到了v-for指令,那么一点要绑定一个 :key 属性 -->
<!-- 而且,尽量把id作为key值 -->
<!-- 官方对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>
Comments | NOTHING