VUE框架自定义指令之全局指令局部指令与函数式指令和对象式指令的具体实现------VUE框架

旧约Alatus

已于 2023-12-02 00:12:01 修改

阅读量936

点赞数 29

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript 前端框架 vue js ecmascript

于 2023-12-01 16:24:18 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134737851

版权

前端同时被 2 个专栏收录

334 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-text="msg"></h1>
        <h1 v-text-danger="msg"></h1>
        用户名:<input type="text" v-bind-blue="username"/>
    </div>
    <div id="app2">
        <h1 v-text-danger="msg"></h1>
        <h1 v-hehe-haha="msg"></h1>
    </div>
    <script>
        // 函数式定义全局
        Vue.directive('text-danger',function(element,binding)
        {
            element.innerText = binding.value;
            element.style.color = 'red';
        });
        // 对象式定义全局
        Vue.directive('hehe-haha',{
            bind(element,binding){
                element.innerText = binding.value;
            },
            inserted(element,binding){
                element.parentNode.style.backgroundColor = 'yellow';
            },
            update(element,binding){
                element.innerText = binding.value;
            }
        });
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                username : "Jack"
            },
            directives : {
                // 指令名字,v-是不用写的
                // 官方建议的自定义指令最好全部小写
                // 如果多个单词,最好-进行衔接
                // 这个方法会有两个参数,
                'text-dangered' : function(element,binding)
                {
                    // 第一个参数是它出现在的dom元素
                    // 是它真实的dom元素
                    console.log(element);
                    element.innerText = binding.value;
                    element.style.color = 'red';
                    // 第二个是绑定对象,也可以称呼这个为指令对象,他就是我们给标签添加的指令
                    // 我们需要重点用这个绑定对象
                    // 也可以称呼第二个为标签与指令之间确定关系的对象
                    console.log(binding);
                    // 函数有两个调用时机
                    // 第一次调用是指令和标签绑定的时候会调用一次
                    // 模板被重新解析的时候也会再次调用
                },
                // 'bind-blue' : function(element,binding)
                // {
                //     element.value = binding.value;
                //     // 这个绑定是在内存级别的绑定,页面上没有这么一个东西
                //     // 实际的dom树上更加不会有,所以你可以读取他自己,但是获取不了父元素
                //     // 就会在null上设置就会报错了
                //     // 这种方式就叫做函数式
                //     // element.parentNode.style.backgroundColor = 'blue';
                //     // 对象式控制更细致,函数是更粗狂                    
                // }
                 // 对象式写法
                 'bind-blue' : {
                    // 这个是局部的,不是全局的另一个vue实例用不了的
                    // 这个对象中的三个方法名字不能随便写
                    // 这三个函数后期会被框架自动调用的
                    // 特定的节点执行特定的函数,我们称之为钩子函数
                    // 而且他们都有这两个对象作为局部变量,或称形参
                    bind(element,binding)
                    {
                        // 元素与指令初次绑定,自动调用bind方法
                        element.value = binding.value;
                    },
                    inserted(element,binding)
                    {
                        element.parentNode.style.backgroundColor = 'blue';
                        // 元素被插入到页面后,这个函数自动被调用
                        // 这个时候就意味着网页的真实的dom树上已经有这个节点和他的父节点存在了
                    },
                    update(element,binding)
                    {
                        element.value = binding.value;
                        // 模板重新被解析的时候,这个方法会被调用
                    }
                 }
            }
        });
        const vm1 = new Vue({
            el : "#app2",
            data : {
                msg : "Hi"
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

</head>

<body>

<div id="app">

<h1 v-text="msg"></h1>

<h1 v-text-danger="msg"></h1>

用户名:<input type="text" v-bind-blue="username"/>

</div>

<div id="app2">

<h1 v-text-danger="msg"></h1>

<h1 v-hehe-haha="msg"></h1>

</div>

<script>

// 函数式定义全局

Vue.directive('text-danger',function(element,binding)

{

element.innerText = binding.value;

element.style.color = 'red';

});

// 对象式定义全局

Vue.directive('hehe-haha',{

bind(element,binding){

element.innerText = binding.value;

},

inserted(element,binding){

element.parentNode.style.backgroundColor = 'yellow';

},

update(element,binding){

element.innerText = binding.value;

}

});

const vm = new Vue({

el : "#app",

data : {

msg : "Hello",

username : "Jack"

},

directives : {

// 指令名字,v-是不用写的

// 官方建议的自定义指令最好全部小写

// 如果多个单词,最好-进行衔接

// 这个方法会有两个参数,

'text-dangered' : function(element,binding)

{

// 第一个参数是它出现在的dom元素

// 是它真实的dom元素

console.log(element);

element.innerText = binding.value;

element.style.color = 'red';

// 第二个是绑定对象,也可以称呼这个为指令对象,他就是我们给标签添加的指令

// 我们需要重点用这个绑定对象

// 也可以称呼第二个为标签与指令之间确定关系的对象

console.log(binding);

// 函数有两个调用时机

// 第一次调用是指令和标签绑定的时候会调用一次

// 模板被重新解析的时候也会再次调用

},

// 'bind-blue' : function(element,binding)

// {

// element.value = binding.value;

// // 这个绑定是在内存级别的绑定,页面上没有这么一个东西

// // 实际的dom树上更加不会有,所以你可以读取他自己,但是获取不了父元素

// // 就会在null上设置就会报错了

// // 这种方式就叫做函数式

// // element.parentNode.style.backgroundColor = 'blue';

// // 对象式控制更细致,函数是更粗狂

// }

// 对象式写法

'bind-blue' : {

// 这个是局部的,不是全局的另一个vue实例用不了的

// 这个对象中的三个方法名字不能随便写

// 这三个函数后期会被框架自动调用的

// 特定的节点执行特定的函数,我们称之为钩子函数

// 而且他们都有这两个对象作为局部变量,或称形参

bind(element,binding)

{

// 元素与指令初次绑定,自动调用bind方法

element.value = binding.value;

},

inserted(element,binding)

{

element.parentNode.style.backgroundColor = 'blue';

// 元素被插入到页面后,这个函数自动被调用

// 这个时候就意味着网页的真实的dom树上已经有这个节点和他的父节点存在了

},

update(element,binding)

{

element.value = binding.value;

// 模板重新被解析的时候,这个方法会被调用

}

}

}

});

const vm1 = new Vue({

el : "#app2",

data : {

msg : "Hi"

}

});

</script>

</body>

</html>