Vue 指令（内置+自定义）

最新推荐文章于 2024-08-02 11:37:39 发布

啵啵丶

最新推荐文章于 2024-08-02 11:37:39 发布

阅读量1.1k

点赞数 11

分类专栏： Vue 文章标签： javascript css3 前端 vue.js ecmascript

本文链接：https://blog.csdn.net/m0_53620413/article/details/121602664

版权

Vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

一、v-text 指令

1. 作用： 向其所在的节点中渲染文本内容

2. 与插值语法的区别： v-text 会替换掉节点中的内容，{{xx}} 则不会，意思就是用了 v-text 之后，再在标签中间写内容就没有意义了，因为会被替换掉，而且如果 v-text 中的内容里面写了标签，它也当字符，不支持结构的解析，所以这种方法少用，不灵活

<body>
    <div id="root">
        <div v-text="name">你好</div>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name: '<span>123</span>'
            }
        })
    </script>
</body>

上面即使我们在标签里写了 '你好'，但是页面显示的内容还是 <span>123</span>，不信的小伙伴可以复制代码去试试噢

二、v-html 指令

1. 作用：向指定节点中渲染包含 html 结构的内容

2. 与插值语法的区别：

v-html 会替换掉节点中所有的内容， {{x}} 则不会
v-html 可以识别 html 结构

3. 严重注意： v-html 有安全性问题！

在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击
一定要在可信的内容上使用 v-html，永远不要用在用户提交的内容上！

把上面中的 v-text 改成 v-html 其他不变，最终的页面效果是 123 ，v-html 识别了 html 结构，解析了 span 标签，这样很直观就能看出它俩的区别

三、v-cloak 指令（没有值）

1. 本质是一个特殊属性， Vue 实例创建完毕并接管容器后，会删掉 v-cloak属性

2. 使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}}的问题

<style>
[v-cloak] {    //属性选择器
    display: none;   
}
</style>
<body>
<h2 v-cloak>{{name}}</h2>
</body>

这段代码的意思就是在 Vue 实例创建完毕并接管容器之前，display：none 都是生效的，即页面不会出现 '{{name}}' 这种还未被 Vue 渲染的页面，当 Vue 接管后，自动删掉 v-cloak 属性，显示最终效果

四、v-once 指令(没有值)

1. v-once 所在节点在初次动态渲染后，就视为静态内容了

2. 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能

<body>
    <div id="root">
        <h2 v-once> 初始化的 n 的值是:{{n}} <h2>
        <button @click="n++">点击一次 n+1</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                n: 1
            }
        })
    </script>
</body>

如果该段代码中不加 v-once ，那么每点击一次按钮 n 都加 1，但是加了 v-once 后，不管你怎么点按钮，n 的值都不会再变了，因为它已经变成静态内容了

五、v-pre 指令(没有值)

1. 作用：跳过其所在节点的编译过程

2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<h2 v-pre>Vue 其实很简单 </h2>

六、自定义指令_函数式

语法：new Vue({ directives:{指令名:回调函数} })

其中自定义 big 函数何时会被调用？

1. 指令与元素成功绑定时（一上来）

2. 指令所在的模板被重新解析时

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是: <span v-text="n"></span></h2>
        <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name: '张三',
                n: 1
            },
            directives:{
                big(element,binding){
                    element.innerText = binding.value * 10
                }
            }
        })
    </script>
</body>

像代码中，即使没有改变 n , 只是改变了 name 值， v-big 也会被调用一次，因为它所在的模板被重新解析了

自定义函数用 directives 创建，其中函数(element,binding){} 第一个为指令所在的标签元素，第二个为绑定的信息，其中有很多属性，比如 binding.value 就是存放值的

既然标签拿到了，就可以操作Dom元素，把值直接放到标签里就行

七、自定义指令_对象式

语法：new Vue({ directives:{指令名:配置对象} })

那什么时候会用到对象式自定义指令呢？

例如，你想要在一开始就获取表单的焦点，那只写 fbind(element,binding){element.focus() } 是没有效果的，因为这个指令与元素成功绑定时，会执行一次，此时 input 表单还没在页面上显示，就已经调用了 input.focus 是没用的. 类似于当你动态的创建一个元素时，你还没把元素放到页面上就开始访问它的父元素了，这时候是访问不到的

所以，解决这个的办法就是用对象式创建自定义指令，对象会把每个阶段分的比较细，大致分为三类，如下：

directives:{
                fbind:{
                    //指令与元素成功绑定时（一上来）
                    bind(element,binding){
                        element.value = binding.value
                    },
                    //指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus()
                    },
                    //指令所在的模板被重新解析时
                    update(element,binding){
                        element.value = binding.value
                    }

                }
            }

一般 bind()中的内容和 update()中的内容一致，它俩的合并就是函数式自定指令

注意：其中 bind()、inserted()、update() 名字是固定的不能自定义