学习vue第九节，自定义vue指令 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
            <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
            
    </head>
    <body>
        <div id="app">
            
            <!-- 调用局部指令 v-fontweight v-fontsize -->
            <input type="text" v-model="msg1" v-fontweight="'bold'" /><span v-fontsize='"25px"'>{{msg1}}</span>
            
            <br />
            <!-- 调用全局指令 v-focus v-focus 有参数的情况下加双引号 -->
            <input type="text" v-focus v-color='"red"'/>
        </div>
        <script type="text/javascript">
            // 自定义 全局指令。
            // 参数1：指令名称，不用加v-前缀
            // 参数2：对象，可以加一些指令相关的函数
            Vue.directive('focus',{
                // inserted 表示被绑定元素插入父节点时调用,触发函数【触发一次】
                inserted:function(el){//el参数表示添加指令的dom对象
                    el.focus();
                }                
            })
            
            Vue.directive('color',{
                // 每当绑定到元素上时，会立即执行（相当于在内存中就执行，所有focus指令不能用bind）【触发一次】
                bind:function(el,binding){//el参数表示添加指令的dom对象,binding 表示一个对象，有多个属性
                // binding.name  binding.value  binding.expression 
                    el.style.color=binding.value;
                }                
            })
            var vm=new Vue({
                el:'#app',
                data:{
                    msg1:''
                },
                methods:{
                    
                },
                directives:{//定义私有的指令
                    'fontsize':{
                        bind:function(el,size){
                             el.style.fontSize=size.value
                        }
                    },
                    'fontweight':function(el,weight){//定义私有的指令简写-默认使用bind 和update ，参照color的bind
                        el.style.fontWeight=weight.value;
                        
                    }
                }
                
            })
        </script>
    </body>
</html>

以前都是用vue自带的指令，现在我们也可以自己创建指令了

posted @ 2020-05-31 20:42  三线码工  阅读(123)  评论(0)  编辑  收藏  举报