Vue指令

_enzo

已于 2022-08-28 12:33:20 修改

阅读量65

点赞数

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

于 2021-07-29 09:10:13 首次发布

本文链接：https://blog.csdn.net/katherin_wanzi/article/details/119189874

版权

Vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.自定义全局指令(钩子函数)

<body>
    <div id='app'>
        输入：<input type="text" id="search" v-focus>
    </div>
    <script>
        Vue.directive('focus', {  //指令的名称focus,使用时要写成v-focus
            inserted: function(el) { //元素插入到dom中，才会获取焦点
                el.focus();
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
               
            },
            methods: {
                
            }
        })
    </script>
</body>

2.使用钩子函数的第二个参数binding参数拿到传递的值

在这里插入图片描述

<body>
    <div id='app'>
        输入：<input type="text" id="search" v-focus v-color="'blue'">
    </div>
    <script>
        Vue.directive('focus', {  
            inserted: function(el) {
                el.focus();    
            }                  
        })

        //自定义一个设置字体颜色的指令
        Vue.directive('color', {   
            bind: function(el, binding) {  
                //el.style.color = 'red';  
                el.style.color = binding.value; 
                //console.log(binding.value); //blue
                //console.log(binding.expression);//'blue'
            }                     
        })

        var vm = new Vue({
            el: '#app',
            data: {
               
            },
            methods: {
                
            }
        })
    </script>
</body>

inserted:元素从内存中插入到页面中调用该函数,和js行为有关的，最好写在inserted中
bind:元素加载到内存中就会调用该函数,每当指令绑定到元素上的时候,会立即执行该函数，只执行一次,和样式相关的操作，一般放在bind中执行

3.定义私有指令

<body>
    <div id="app">
        <p v-color="'pink'" v-fontweight="900">{{ dt | msgFormat }}</p>
    </div>
    <script>
        //全局指令
        Vue.directive('color', {   
            bind: function(el, binding) { 
                el.style.color = binding.value; 
            }                     
        })
        var vm = new Vue({
            el: "#app",
            data:{
              dt: new Date()
            },
            methods: {},
            filters: {
                msgFormat: function(dateStr, pattern='') {
                    var dt = new Date(dateStr);
                    var y = dt.getFullYear();
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                    var d = dt.getDate().toString().padStart(2, '0');
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`;
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0');
                        var mm = dt.getMinutes().toString().padStart(2, '0');
                        var ss = dt.getSeconds().toString().padStart(2, '0');
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }
                }
            },
            directives: {     //定义私有指令
                'fontweight': {  
                    bind: function(el, binding) {
                        el.style.fontWeight = binding.value;
                    }
                }
            }
        });
    </script>
</body>

4.指令函数的简写形式

在这里插入图片描述

<body>
    <div id="app">
        <p v-color="'pink'" v-fontweight="900" v-fontsize="'50'">{{ dt | msgFormat }}</p>
    </div>
    <script>
        //全局指令
        Vue.directive('color', {   
            bind: function(el, binding) { 
                el.style.color = binding.value; 
            }                     
        })
        var vm = new Vue({
            el: "#app",
            data:{
              dt: new Date()
            },
            methods: {},
            filters: {
                msgFormat: function(dateStr, pattern='') {
                    var dt = new Date(dateStr);
                    var y = dt.getFullYear();
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                    var d = dt.getDate().toString().padStart(2, '0');
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`;
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0');
                        var mm = dt.getMinutes().toString().padStart(2, '0');
                        var ss = dt.getSeconds().toString().padStart(2, '0');
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }
                }
            },
            directives: {     //定义私有指令
                'fontweight': {  
                    bind: function(el, binding) {
                        el.style.fontWeight = binding.value;
                    }
                },
                'fontsize':function(el, binding) {  //简写形式
                    el.style.fontSize = parseInt(binding.value) + 'px';
                }
            }
        });
    </script>
</body>