数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 一、模板语法 插值表达式 { { data }} 可以用于渲染 Vue 中提供的数据。 注：vue中的插值提供了真正的js环境，因此我们可以直接使用 JS 表达式 二、基础指令 2.1 概述 指令是什么 指令就是一个自定义属性，Vue中的指令都是以 v- 开头 { {}} 插值表达式渲染页面闪烁问题 代码加载的时候先加载 HTML 把插值语法当做 HTML 内容加载到页面上 当加载完 js 后才把插值语法替换掉 所以我们会看到闪烁问题 v-cloak 指令解决插值语法的闪烁问题 原理：先隐藏，替换好值之后再显示最终的值 //CSS中提供样式设置 [v-cloak] { display: none; } //在插值表达式标签中添加v-cloak指令 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}}

• { {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 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。 三、数据双向绑定 什么是数据双向绑定？ 当数据发生变化的时候，视图会相应的发生变化 当视图发生改变的时候，数据也会相应的同步变化 双向绑定的指令 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 也可，建议使用传参的方式。 小案例：购物车简易计数器 实现思路： 1. data 中定义初始的数量 num 2. 将 num 使用 “插值表达式” 或 “v-text指令” 设置给对应的标签 3. 使用 v-on 指令给加减按钮定义点击事件 add 和 reduce 4. 在 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中的数据 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 演示代码 九、列表渲染 9.1 使用 指令 v-for 遍历数组 语法 v-for = " (item, index) in arr " 参数 item代表数组中的每一项 index 代表每一项所对应的索引 key的作用 为了高效更新虚拟DOM，帮助Vue快速区分不同元素，用 key 来给每个节点做唯一标识 9.2 使用 指令 v-for 遍历对象 语法 v-for = “( item, key, index) in obj” 参数 item代表对象中的每一项 key代表每一项对应的键名 index代表每一项对应的索引 注：2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。而3.x 版本中 v-if 总是优先于 v-for 生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。 十、案例作业