vue的指令与过滤器

指令

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

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

1、 内容渲染指令

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

v-text

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

{{}}

插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

v-html

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

2、 属性绑定指令

v-bind

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

3、事件绑定指令

v-on

① vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听，通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明
② 在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令
（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event
③ 在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参
④$event是vue提供的特殊变量，用来表示原生的事件参数对象event。$event 可以解决事件参数对象 event
被覆盖的问题
⑤事件修饰符：在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，
vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制

4、双向绑定指令

v-model

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

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-else

v-if 可以单独使用，或配合 v-else 指令一起使用，但是v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别

v-else-if

v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用，v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别

6、列表渲染指令

v-for

在脚手架必须要写:key值，否则会报错
key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

7、使用 Javascript 表达式

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

过滤器

① 过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式
和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用
② filters 函数：在创建 vue 实例期间，可以在 filters 节点中定义过滤器
③ 私有过滤器与全局过滤器：在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以定义全局过滤器

 <div id="app">
        <!-- | 代表调用capi过滤器 -->
        <!-- 这里的message值是以capi过滤器为准 -->
        <p>message的值是：{{message | capi}}</p>
    </div>
    <div id="app2">
        <p>message2的值：{{message | capi}}</p>
    </div>
    <script src="./vue-2.6.12.js"></script>
    <script>
        //定义全局过滤器----独立于每个vue实例之外
        // 第一个参数：是全局过滤器的名字
        // 第二个参数：是全局过滤器的处理函数，形参为管道符前面的值
        Vue.filter('capi',(val)=>{
            return val.charAt(0).toUpperCase()+val.slice(1)
        }),
        new Vue({
            el:'#app',
            data:{
                message:'hello world'
            },
        })
        new Vue({
            el:'#app2',
            data:{
                message:'hello world'
            },
        })
    </script>

④ 连续调用多个过滤器：过滤器可以串联的进行调用
⑤ 过滤器传参：过滤器的本质是 JavaScript 函数，因此可以接收参数
⑥ 过滤器的兼容性：
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能
在企业级项目开发中：
如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能