vue中自定义全局指令和自定义局部指令

最新推荐文章于 2024-07-05 12:28:10 发布

晓明的日常操作

最新推荐文章于 2024-07-05 12:28:10 发布

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wangming2531/article/details/108869479

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

这两个指令的好处就是我事先定义好指令的内容，到用的时候直接调用这个指令就可以了
咋用那？
1.调用的方法
两者的调用方法一样
直接在你的标签中加上
v-指令名字:参数(常量)
v-指令名字=“参数（变量）”
比如v-color：bule
v-color=“bule” //bule为变量

<p v-color:blue @click="change()" v-if="show">文字{{msg}}</p>

牢记书写的格式！！！
例子1：比如我想定义字体的颜色，只要我给什么颜色，字体就是什么颜色？该怎么实现？
全局指令js部分单独一个.js文件之后引入进来
全局指令代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <p v-color:blue @click="change()" v-if="show">文字{{msg}}</p>
            <button v-color:red>按钮</button><!-- v-color:颜色名 -->
            <button v-color:yellow >按钮</button><!-- v-color:颜色名 -->
            <button v-color="c">按钮</button><!-- v-color='变量' -->
        </div>

        <script src="js/vue.js"></script>
        
        <script src="js/library.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:0,
                    show:true,
                    c:'pink'
                },
                methods:{
                    change(){
                        this.msg++;
                        this.show=false;
                    }
                }
            })
        </script>
    </body>
</html>

全局指令js内容

 // 自定义全局指令 
 // Vue.directive('指令名字',{钩子函数 bind  inserted update unbind 根据实际情况写钩子函数})
 // 使用指令：v-指令名字:参数(常量) v-指令名字="参数（变量）" 
Vue.directive('color',{
    bind(){
        // 指令绑定到标签上
        console.log('bind')
    },
    // 钩子函数
    inserted(el,obj){
        // 标签插入到页面中
        // el当前标签 
        // obj.arg获取的是常量的参数
        // obj.value获取的是变量的参数
        console.log(obj)
        console.log('inserted')
        if(obj.arg){
            el.style.color=obj.arg
        }else{
            el.style.color=obj.value
        }
    },
    update(){
        // 数据更新
        console.log('update')
    },
    unbind(){
        // 解除绑定
        console.log('unbind')
    }
})

使用 Vue.directive() 定义全局的v-color指令

参数1：指令的名称。注意，在定义的时候，指令的名称前面，不需要加 v- 前缀。但是，在调用的时候，必须在指令名称前加上 v-前缀来进行调用
参数2：是一个对象，这个对象身上，有一些指令相关的函数（钩子函数），这些函数可以在特定的阶段，执行相关的操作。

一般常用的钩子函数有三个
bind：每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次。
inserted：被绑定元素插入父节点（DOM）时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

注意!!!:
在每个钩子函数中，第一个参数永远是 el ，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象。

局部指令

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" id="txt" v-focus>
            <button v-color:red v-bg>按钮</button>
            <button v-color="red">按钮</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            setTimeout(function(){
                // txt.focus()
                // 选择标签.focus()自动聚焦
            },10)
            new Vue({
                el:'#app',
                data:{
                    red:'blue'
                },
                // 自定义局部指令
                // directives:{
                //     指令名字:{
                //         钩子函数
                //         内部结构和全局一样
                //     }
                // }
                directives:{
                    color:{
                        // 钩子函数 bind  inserted update unbind
                        inserted(el,obj){
                            if(obj.arg){
                                el.style.color=obj.arg
                            }else{
                                el.style.color=obj.value
                            }
                        }
                    },
                    bg:{
                        inserted(el){
                            el.style.background='pink'
                        }
                    }
                }
            })
        </script>
    </body>
</html>

晓明的日常操作

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中自定义全局指令和自定义局部指令

这两个指令的好处就是我事先定义好指令的内容，到用的时候直接调用这个指令就可以了咋用那？1.调用的方法两者的调用方法一样直接在你的标签中加上v-指令名字:参数(常量)v-指令名字=“参数（变量）”比如v-color：bulev-color=“bule” //bule为变量<p v-color:blue @click="change()" v-if="show">文字{{msg}}</p>牢记书写的格式！！！例子1：比如我想定义字体的颜色，只要我给什么颜色
复制链接

扫一扫

专栏目录