Vue（十三）自定义指令

Vue自定义指令详解

最新推荐文章于 2024-05-28 16:45:45 发布

weixin_30530523

最新推荐文章于 2024-05-28 16:45:45 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yulingjia/p/8303280.html

自定义指令

分类：全局指令、局部指令

1. 自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)

2. 自定义局部指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="https://unpkg.com/vue"></script>
    <script>

        window.onload = function(){
            /**
            * 自定义全局指令
            * 注：使用指令时必须在指名名称前加前缀v-，即v-指令名称
            */
            Vue.directive('hello',{
                bind(){ //常用！！
                    alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
                },
                inserted(){
                    alert('被绑定元素插入到DOM中时调用');
                },
                update(){
                    alert('被绑定元素所在模板更新时调用');
                },
                componentUpdated(){
                    alert('被绑定元素所在模板完成一次更新周期时调用');
                },
                unbind(){
                    alert('指令与元素解绑时调用，只调用一次');
                }
            })
            //钩子函数的参数
            Vue.directive('word',{
                bind(el,binding){
                    el.style.color = 'red';
                    console.log(binding);
                    console.log(binding.value);  // 拿到指令所传的值  Jan
                    console.log(binding.expression);  // 拿到指令所绑定的名字  userName
                    console.log(binding.arg);  // 给指令传参数
                    console.log(binding.modifiers);  // 给指令传参数
                }
            })

            //传入一个简单的函数，bind和update时调用
            Vue.directive('nihao',function(){
                alert('nihao');
            });

            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'Welcome to China',
                    msg2:'Hello World !',
                    userName:'Jane'
                },
                methods:{
                    change(){
                        this.msg = "欢迎来到中国"
                    }
                },
                directives:{ //自定义局部指令
                    focus:{
                        //当被绑定元素插入到DOM中时获取焦点
                        inserted(el){
                            el.focus();
                        }
                    }
                }
            })
        }

    </script>
</head>

<body>

    <div id="app">
        <h3 v-hello>{{msg}}</h3>
        <button @click="change">更新数据</button>
        
        <hr>

        <h3 v-word:yulingjia.hehe='userName'>{{msg2}}</h3>
        
        <hr>
        
        <h3 v-nihao>111222333444555666</h3>
        
        <hr>
        
        <input type="text" v-model="msg" v-focus>
    </div>

</body>

</html>

3. 练习 - 拖拽 div

拖动页面中的元素

onmouseover onmouseout

onmousedown onmousemove onmouseup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="https://unpkg.com/vue"></script>
    <script>

        window.onload = function(){
            // 自定义全局指令
            Vue.directive('drag',function(el){
                el.onmousedown=function(e){
                    //获取鼠标点击处分别与div左边和上边的距离：鼠标位置 - div位置
                    //clientX clientY 鼠标点击时鼠标的坐标
                    //offsetLeft offsetTop  该DOM元素div 左边和上边的距离
                    //disX disY  鼠标点击的地方距离div左边和上边的距离
                    
                    var disX=e.clientX-el.offsetLeft;
                    var disY=e.clientY-el.offsetTop;
                    console.log(disX,disY);

                    //包含在onmousedown里面，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
                    document.onmousemove=function(e){
                        //获取移动后div的位置：鼠标位置-disX/disY
                        el.style.left=e.clientX - disX + 'px';
                        el.style.top=e.clientY - disY + 'px';
                    }
                    
                    //停止移动
                    document.onmouseup=function(e){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    }
                }
            })

            var vm = new Vue({
                el:'#app',
                data:{
                    hello:"你好",
                    word:"世界",
                }
            })

        }

    </script>

    <style>
        #app div{
            width: 100px;
            height: 100px;
            position: absolute;
            color:#fff;
        }

        #app .hello{
            background-color: red;
            top:0;
            left:0;
        }
        
        #app .word{
            background-color: blue;
            top:0;
            right: 0;
        }
    </style>

</head>

<body>

    <div id="app">
        <div class="hello" v-drag>{{hello}}</div>
        <div class="word" v-drag>{{word}}</div>
    </div>

</body>

</html>