vue 的指令与过滤器

目录

1. 指令的概念

1.1 内容渲染指令

1.1.1v-text

1.1.2{ { }} 语法

1.1.3 v-html

1.2 属性绑定指令

属性绑定指令的简写形式

使用 Javascript 表达式

1.3 事件绑定指令

事件绑定的简写形式

事件参数对象

绑定事件并传参

$event

事件修饰符

按键修饰符

1.4 双向绑定指令

v-model 指令的修饰符

1.5 条件渲染指令

v-if 和 v-show 的区别

v-else

v-else-if

1.6 列表渲染指令

v-for 中的索引

使用 key 维护列表的状态

key 的注意事项

2. 过滤器(Vue3中已删除这个语法，只能在Vue2项目中使用)

过滤器的基本使用：

2.1 定义过滤器 

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

2.3 连续调用多个过滤器

2.4 过滤器传参

2.5 过滤器的兼容性

3.  品牌列表案例

3.1. 案例效果​编辑

3.2. 整体实现步骤

3.3. 整体代码：

HTML部分:

引用部分lib： 

 CSS部分：

总结：

---

 

1. 指令的概念

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

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

①  内容渲染指令

②  属性绑定指令

③  事件绑定指令

④  双向绑定指令

⑤  条件渲染指令

⑥  列表渲染指令

注意：指令是vue 开发中最基础、最常用、最简单的知识点。

1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

1、v-text

2、{ { }}

3、v-html

1.1.1v-text

用法示例：

 注意：v-text 指令会覆盖元素内默认的值。

1.1.2{ { }} 语法

vue 提供的 { { }} 语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种 { { }} 语法的专业名称是插值表达 式（英文名为：Mustache）。

注意：相对于v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。

1.1.3 v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的HTML 元素，  则需要用到v-html 这个指令：

最终渲染的结果为：

1.2 属性绑定指令

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

属性绑定指令的简写形式

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

使用 Javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：

1.3 事件绑定指令

vue 提供了v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

注意：原生 DOM 对象有onclick、oninput、onkeyup 等原生事件，替换为vue 的事件绑定形式后，

分别为：v-on:click、v-on:input、v-on:keyup

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