前端-VUE：基本指令与过滤器的使用

ZHOUQYI
135 阅读6分钟

1. vue 简介

官方的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架

vue 的特性： 数据驱动视图 和 双向数据绑定

1.1 数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构

  • 好处：当页面数据发生变化时，页面会自动重新渲染！
  • 注意：数据驱动视图是单向的数据绑定

1.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中

  • 好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值

1.3 MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理

MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分

  • Model 表示当前页面渲染时所依赖的数据源
  • View 表示当前页面所渲染的 DOM 结构
  • ViewModel 表示 vue 的实例，它是 MVVM 的核心

工作原理： ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起

Snipaste_2022-04-23_22-23-36.jpg 当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

2. vue 的指令

2.1 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

vue 中的指令按照不同的用途可以分为如下 6 大类：

  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件渲染指令
  6. 列表渲染指令

2.2 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

的内容渲染指令有如下3个：

  • v-text
  • {{ }}
  • v-html

区别：

  • v-text 指令会覆盖元素内默认的值
  • {{ }} 语法，是专门用来解决 v-text 会覆盖默认文本内容的问题，专业名称是插值表达式（用的最多）
  • v-text 指令和 {{ }} 插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令

2.3 属性绑定指令 v-bind (:)

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令

由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）

2.4 事件绑定指令 v-on (@)

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明

由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）

事件修饰符: 在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制

Snipaste_2022-04-23_22-33-55.jpg

按键修饰符 @keyup : 在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

2.5 双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符

Snipaste_2022-04-23_22-36-43.jpg

2.6 条件渲染指令

条件渲染指令用来辅助开发者按需控制 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-else 和 v-else-if 指令一起使用，但是v-else 和 v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别

2.7 列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法

  • items 是待循环的数组
  • item 是被循环的每一项

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items

key 维护列表的状态：

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性

key 的注意事项：

  • key 的值只能是字符串或数字类型
  • key 的值必须具有唯一性（即：key 的值不能重复）
  • 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
  • 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
  • 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

3. 过滤器 (vue3.0以淘汰)

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

3.1 私有过滤器和全局过滤器

创建 vue 实例期间，在 filters 节点中定义的过滤器是私有过滤器，只能在当前 vm 实例所控制的 el 区域内使用

当希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

Vue.filter('过滤器名称',() => {
  return ...
}

注： 在Vue3中，官方推荐使用计算属性或方法替换过滤器使用

avatar
文章
阅读
粉丝