【Vue3 第二章】插值表达式 & 指令

您所在的位置：网站首页 › vue3虚拟dom › 【Vue3 第二章】插值表达式 & 指令

【Vue3 第二章】插值表达式 & 指令

#【Vue3 第二章】插值表达式 & 指令| 来源: 网络整理| 查看: 265

一、模板语法

插值表达式 {{ data }} 可以用于渲染 Vue 中提供的数据。

import {ref} from "vue" const message = ref("Hello Vue3!!") const num = ref(10) {{message}} ~ {{num + 10}} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} .message { color: red; font-weight: bold; font-family: "楷体","MicroSoft Yahei"; } 复制代码

注：vue中的插值提供了真正的js环境，因此我们可以直接使用 JS 表达式

二、基础指令 2.1 概述

指令是什么

指令就是一个自定义属性，Vue中的指令都是以 v- 开头

{{}} 插值表达式渲染页面闪烁问题

代码加载的时候先加载 HTML 把插值语法当做 HTML 内容加载到页面上当加载完 js 后才把插值语法替换掉所以我们会看到闪烁问题

v-cloak 指令解决插值语法的闪烁问题

原理：先隐藏，替换好值之后再显示最终的值

//CSS中提供样式设置 [v-cloak] { display: none; } //在插值表达式标签中添加v-cloak指令 {{ title }} === {{ num + 10 }} 复制代码 2.2 基础指令

v-text 更新元素的文本内容

v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果想要替换指定的部分内容，请使用插值表达式（mustache interpolations）代替。

{{msg}} 复制代码

v-html 更新元素的 innerHTML

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

Using text interpolation: {{ rawHtml }} Using v-html directive: 复制代码

在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。

v-once 仅渲染元素和组件一次，并跳过之后的更新

执行一次性的插值（当数据改变时，插值处的内容不会继续更新）

应用场景：显示的信息后续不需要再修改，可以使用 v-once 指令来提高性能

This will never change: {{msg}} comment {{msg}} {{i}} 复制代码

v-pre 跳过该元素及其所有子元素的编译

元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

{{ this will not be compiled }} 复制代码

- v-memo 期望的绑定值类型（了解）

Vue3.2版本新增指令。期望的绑定值类型：any[]

缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。

... 复制代码

当组件重新渲染，如果 valueA 和 valueB 都保持不变，这个 `` 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。

正确指定缓存数组很重要，否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。

**v-memo 仅用于性能至上场景中的微小优化，应该很少需要。**最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)：

ID: {{ item.id }} - selected: {{ item.id === selected }} ...more child nodes 复制代码

当组件的 selected 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 item.id，因为 Vue 也会根据 item 的 :key 进行判断。

当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

v-memo 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。

const arr = [1,2,3] // 这里 v-memo 条件成立的话跳过更新复制代码三、数据双向绑定

什么是数据双向绑定？

当数据发生变化的时候，视图会相应的发生变化当视图发生改变的时候，数据也会相应的同步变化

双向绑定的指令

v-model 指令实现数据双向绑定

双向绑定使用场景

利用 v-model 指令，限制在 input select textarea components (组件) 中使用

示例：在这里插入图片描述修饰符

.lazy 默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据 .number 如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入 .trim 如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符复制代码四、事件绑定详解

Vue中的事件绑定指令

v-on 指令用法

v-on 复制代码

指令可以简写为 @ （语法糖）

@语法糖复制代码

事件函数的调用方式

直接绑定函数名

v-on 复制代码

调用函数

v-on 复制代码

事件函数参数传递

普通参数：多个参数使用逗号隔开

v-on 复制代码

事件对象：

tip1：如果事件直接绑定函数名称或者调用函数并未传递任何参数，那么事件函数会默认传递事件对象作为第一个参数；

tip2：如果事件绑定函数调用时传递了参数，那么事件对象必须作为最后一个参数显式传递，并且事件对象的名称必须是 $event

tip3：在不考虑兼容性问题，且允许 window 全局对象存在的情况下，可以在函数内直接通过全局对象获取事件对象 window.event 也可，建议使用传参的方式。

小案例：购物车简易计数器在这里插入图片描述实现思路：

data 中定义初始的数量 num 将 num 使用 “插值表达式” 或 “v-text指令” 设置给对应的标签使用 v-on 指令给加减按钮定义点击事件 add 和 reduce 在 methods 中定义 add 和 reduce 方法的逻辑：数量最少为 1，最大为 20 五、事件修饰符

Vue中常用的事件修饰符

.stop 阻止冒泡 .prevent 取消默认事件 .self 仅当 event.target 是元素本身时才会触发事件处理器 .capture 添加事件监听器时，使用 capture 捕获模式 .once 事件最多被触发一次 .passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。不能和 .prevent 一起使用。

// 通过 .stop 修饰符阻止事件冒泡行为外部容器内部容器 //通过 .prevent 修饰符阻止 a 标签默认跳转功能跳转百度 //链式修改复制代码

按键修饰符

.enter => enter键 .tab => tab键 .delete (捕获“删除”和“退格”按键) => 删除键 .esc => 取消键 .space => 空格键 .up => 上 .down => 下 .left => 左 .right => 右

// .enter 回车键用户名：密码：登录 // .delete 删除建复制代码六、属性绑定

v-bind 指令被用来响应地更新 HTML 属性

语法 v-bind:prop = val

语法糖 :prop = val

//属性绑定属性绑定演示

语法糖

复制代码

注：语法糖是对某个操作的简化，来提高开发效率

七、类与样式的绑定 7.1 class 类的绑定

绑定对象语法

v-bind:class = { 类名:类值，类名1:类值1，...，类名n:类值n }

如果类名对应的值为true，则显示这个类名；否则不显示这个类名

绑定数组语法

v-bind:class = [ 值1，值2，...，值n ]

值1、值2对应data中的数据

import { ref, reactive, computed } from 'vue' const clsName = "active-link" // 通过 ref 声明的数据，在 script 中，需要通过 .value 获取和修改值；在 template 模板中使用时，则不需要通过 .value 获取值，模板会自动解析数据 const count = ref(0) // 注意：这里如果想要在count值修改后，实时响应数据变化，需要采用计算属性 const clsObj = computed(() => ({ link: true, activeLink: count.value % 2 == 0 })) let fm = ref(true) 超链接标签演示字符串类型的class和style绑定采用绑定对象的方式实现class和style的赋值采用数组绑定的方式实现class和style count++ hr { margin: 2vh 0; } .link { color: gray; } .active-link, .activeLink { font-weight: bold; } .fm { font-family: "楷体"; } 复制代码 7.2 style 样式绑定

绑定对象语法

v-bind:style = { 样式名:样式值，样式名1:样式值1，...，样式名n:样式值n }

绑定数组语法

v-bind:style = [值1，值2，...，值n]

值1，值2，...，值n 需要在 data 中使用对象定义样式和样式值

指令 v-if、v-else-if 、v-else

多个元素，通过条件判断动态的向DOM树内添加或者删除DOM元素，操作的是DOM结构

应用场景：渲染后变化比较少，建议使用 v-if

指令 v-show

通过设置样式 display:none; 控制元素的隐藏和显示，此时元素已经渲染到页面，操作的是样式

应用场景：渲染后变化比较多，从性能优化的角度来讲建议使用 v-show

演示代码

import { ref } from "vue" const score = 80; const obj = { name: "Jack", age: 23 } let flag = ref(true) 学生成绩大于90，优秀学生成绩大于80，良好学生成绩大于70，中等学生成绩大于60，及格学生成绩小于60，不及格学生成绩大于90，优秀学生成绩大于80，良好学生成绩大于70，中等学生成绩大于60，及格学生成绩小于60，不及格切换 .box { height: 300px; background-color: blue; } /* 下面我们会解释这些 class 是做什么的 */ .v-enter-active, .v-leave-active { transition: opacity 0.5s ease; } .v-enter-from, .v-leave-to { opacity: 0; } 复制代码九、列表渲染 9.1 使用指令 v-for 遍历数组

语法 v-for = " (item, index) in arr "

参数 item代表数组中的每一项 index 代表每一项所对应的索引

key的作用为了高效更新虚拟DOM，帮助Vue快速区分不同元素，用 key 来给每个节点做唯一标识

import { ref, reactive } from 'vue' const arr = ["banana", "orange", "apple", "kiwi fruit", 'peal'] const stuData = ref([{ idCard: 1, name: "Jack", age: 23 }, { idCard: 2, name: "Lucy", age: 18 }, { idCard: 3, name: "David", age: 26 }]) const addInfo = () => { console.log(stuData.value.length) stuData.value.push({ idCard: stuData.value.length + 1, name:"luosi", age:23 }) } {{ item }} ~ {{ index }} 添加一个学生信息编号：{{ item.idCard }} 姓名：{{ item.name }} 年龄：{{ item.age }} 复制代码 9.2 使用指令 v-for 遍历对象

语法 v-for = "( item, key, index) in obj"

参数 item代表对象中的每一项 key代表每一项对应的键名 index代表每一项对应的索引

import { ref, reactive } from 'vue' const obj = reactive({ idCard: 1, name: "张三", age: 23, }) const addAttr = () => { console.log(obj) obj.sex = "男" } {{ item }} ~ {{ key }} {{ item }} ~ {{ key }} 增加属性复制代码

注：2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。而3.x 版本中 v-if 总是优先于 v-for 生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。

十、案例作业

在这里插入图片描述

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章