112.【Vue-细刷-03】（二）-阿里云开发者社区

(二十一)、Vue的自定义指令

1.自定义非内嵌指令（不保留h3中的原有text）

自定义的名字前面不加v- ,Vue帮我们自动添加
element是一个真实的Dom节点
banding是我们绑定的数据

在自定义的指令中的名字，必须全部小写。
//  定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据"))  自定义元素必须全部小写
Vue.directive('text-upper',function(element,banding){
                // 利用真实的Dom结点更改文本，然后绑定的数据进行大写
                element.innerText=banding.value.toUpperCase();
            })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        两个需求: 
            1.我们通过使用自定义标签v-text-Upper:"实现对文章大写化"
            1.我们通过使用自定义标签v-text-Lower:"实现对文章小写化"
     -->
    <div id="root">
        <h2 v-text-upper="name"></h2>
    </div>
    <script type="text/javascript">
        //  定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据"))  自定义元素必须全部小写
            Vue.directive('text-upper',function(element,banding){
                // 利用真实的Dom结点更改文本，然后绑定的数据进行大写
                element.innerText=banding.value.toUpperCase();
            })
        new Vue({
            el:"#root",
            data:{
                name:"jSxS"
            }
        });
    </script>
</body>
</html>

2.自定义非内嵌指令（保留h3中的原有text）

要使用 += 而不是原来的=
element.innerText += banding.value.toUpperCase();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        两个需求: 
            1.我们通过使用自定义标签v-text-Upper:"实现对文章大写化"
            1.我们通过使用自定义标签v-text-Lower:"实现对文章小写化"
     -->
    <div id="root">
        <h2 v-text-upper="name">您的名字是:</h2>
    </div>
    <script type="text/javascript">
        //  定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据"))  自定义元素必须全部小写
        Vue.directive('text-upper', function (element, banding) {
            // 利用真实的Dom结点更改文本，然后绑定的数据进行大写
            // element.innerText=banding.value.toUpperCase();
            element.innerText += banding.value.toUpperCase();
        })
        new Vue({
            el: "#root",
            data: {
                name: "jSxS"
            }
        });
    </script>
</body>
</html>

3.自定义非内嵌指令 (非全局)

如果自定义的标签只有 v-xxx,那么我们只需要在方法前写上 xxx:function(){}即可
如果自定义的标签只有 v-xxx-xxxx，那么我们只需要在方法前写上 ‘xxx-xxx’:function(){}即可

<h2 v-lower="name">您的小写名字是:</h2>
            directives:{
                lower:function(element,banding){
                    element.innerText += banding.value.toLowerCase();
                }
            }

<h2 v-text-lower="name">您的小写名字是:</h2>
            directives:{
                'text-lower':function(element,banding){
                    element.innerText += banding.value.toLowerCase();
                }
            }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        两个需求: 
            1.我们通过使用自定义标签v-text-Upper:"实现对文章大写化"
            1.我们通过使用自定义标签v-text-Lower:"实现对文章小写化"
     -->
    <div id="root">
        <h2 v-text-upper="name">您的大写名字是:</h2>
        <h2 v-lower="name">您的小写名字是:</h2>
    </div>
    <div id="root2">
        <h2 v-text-upper="name">您的大写名字是:</h2>
        <h2 v-lower="name">您的小写名字是:</h2>
    </div>
    <script type="text/javascript">
        //  定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据"))  自定义元素必须全部小写
        Vue.directive('text-upper', function (element, banding) {
            // 利用真实的Dom结点更改文本，然后绑定的数据进行大写
            // element.innerText=banding.value.toUpperCase();
            element.innerText += banding.value.toUpperCase();
        })
        new Vue({
            el: "#root",
            data: {
                name: "jSxS"
            },
            // 局部自定义指令
            directives:{
                lower:function(element,banding){
                    element.innerText += banding.value.toLowerCase();
                }
            }
        });
        new Vue({
            el: "#root2",
            data: {
                name: "jSxS"
            },
        });
    </script>
</body>
</html>

4.Vue的自定义插件 ⭐

Vue自带的原型数据...

Vue解析不到的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义插件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>{{now}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false  //关闭生产提示
        const vm=new Vue({
            el:'#root',
           data:{
            name:'CKQN'
           }
        });
        vm.$now=new Date();   // xxx这里解析不到数据
    </script>
</body>
</html>

Vue这样的话就能够解析到.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义插件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>{{$now}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false  //关闭生产提示
        // 向Vue原型上追加一个$now属性，值为当前的时间。 $now是给实列vm用的。
        Vue.prototype.$now=new Date().toTimeString();  // 这里进行格式化数据...    
        const vm=new Vue({
            el:'#root',
           data:{
            name:'CKQN'
           }
        });
        // vm.$now=new Date();
    </script>
</body>
</html>

插件的正式使用

插件的定义: 插件就是一个包含install方法的对象。

非插件实列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义插件</title>
    <script src="../js/vue.js"></script>
    <!-- <script src="../18_插件/atguigu.js"></script> -->
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2 v-upper-text="name"></h2>
        <h2 v-lower-text="name"></h2>
        <!-- 调用我们自定义插件种的原型 -->
        <h2>{{$random(2,8)}}</h2>  
    </div>
    <script>
         // 添加两个全局指令
    //  大写
    Vue.directive('upper-text',function(el,bangding){
        el.innerText=bangding.value.toUpperCase();
    })
    //  小写
    Vue.directive('lower-text',function(el,bangding){
        el.innerText=bangding.value.toLowerCase();
    })
    // 给Vue自身添加属性
    Vue.projectName='学生管理系统';
    Vue.MyVersion='v1.0.0'
    Vue.showInfo=function(){
        console.log('我是一些信息');
    };
    // 给Vue原型上添加数据，供vm使用。
    Vue.prototype.$random=function(min,max){
        return Math.random()*(max-min)+min   // TODO (0~1)*6+2
    }
        /*
            插件的定义： 是一个包含install方法的对象,
        */
        Vue.config.productionTip = false  //关闭生产提示   
        // //Vue会帮助我们去调用atguigu 这个插件里面的install方法
        // Vue.use(atguigu)
        console.log(Vue.projectName)
        console.log(Vue.MyVersion)
        Vue.showInfo()
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'CKQN'
            }
        });
    </script>
</body>
</html>

插件实列

基本方法
1. 需要引入插件的js
<script src="../18_插件/atguigu.js"></script>
2. 使用插件:  Vue.use(插件的名字)
 Vue.use(atguigu)

atguigu.js

const atguigu={
}
atguigu.install=function(Vue,options){
    // 添加两个全局指令
    //  大写
    Vue.directive('upper-text',function(el,bangding){
        el.innerText=bangding.value.toUpperCase();
    })
    //  小写
    Vue.directive('lower-text',function(el,bangding){
        el.innerText=bangding.value.toLowerCase();
    })
    // 给Vue自身添加属性
    Vue.projectName='学生管理系统';
    Vue.MyVersion='v1.0.0'
    Vue.showInfo=function(){
        console.log('我是一些信息');
    };
    // 给Vue原型上添加数据，供vm使用。
    Vue.prototype.$random=function(min,max){
        return Math.random()*(max-min)+min   // TODO (0~1)*6+2
    }
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义插件</title>
    <script src="../js/vue.js"></script>
    <script src="../18_插件/atguigu.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2 v-upper-text="name"></h2>
        <h2 v-lower-text="name"></h2>
        <!-- 调用我们自定义插件种的原型 -->
        <h2>{{$random(2,8)}}</h2>  
    </div>
    <script>
        /*
            插件的定义： 是一个包含install方法的对象,
        */
        Vue.config.productionTip = false  //关闭生产提示   
        //Vue会帮助我们去调用atguigu 这个插件里面的install方法
        Vue.use(atguigu)
        console.log(Vue.projectName)
        console.log(Vue.MyVersion)
        Vue.showInfo()
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'CKQN'
            }
        });
    </script>
</body>
</html>