vue自定义指令（扩展的HTML）

最新推荐文章于 2024-06-28 11:34:03 发布

新手新思路新技能

最新推荐文章于 2024-06-28 11:34:03 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/u013005675/article/details/63252449

版权

指令: 扩展html语法
自定义指令:
	属性:
	Vue.directive(指令名称,function(参数){
		this.el	-> 原生DOM元素
	});
	<div v-red="参数"></div>
	指令名称: 	v-red  ->  red
 
	* 注意: 必须以 v-开头
<script>
        Vue.directive('red',function(){
            this.el.style.background='red';
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            这是实例
        </span>
        <span v-red>                这是实例
        </span>        <span v-red>                  这是实例
        </span>

</div></body>

实例2：

<script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red="a">
            asdfasd
        </span>
    </div>
实际上相当于data中的a先传给v-red中的a,然后传给自定义指令中的color，更清晰的自定义指令传参如下
<script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <span v-red="'blue'">
            asdfasd
        </span>
    </div>
</body>
其原理都是事件绑定，如下
<script>
        Vue.directive('red',{
            bind:function(){
                this.el.style.background='red';
            }
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            asdfasd
        </span>
    </div>

</body>