vue教程2-07 自定义指令

发布时间：2020-12-16 23:12:30 所属栏目：百科来源：网络整理

导读：vue教程2-07 自定义指令 Vue.directive(指令名称,/spanspan style="color: #0000ff;"gt;function/spanspan style="color: #000000;"gt;(参数){ /spanspan style="color: #ff0000;"gt;this.el -/spanspan style="color: #000000;"gt;span style="color: #ff00

vue教程2-07 自定义指令

Vue.directive(指令名称,</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(参数){
    </span><span style="color: #ff0000;"&gt;this.el    -></span><span style="color: #000000;"&gt;<span style="color: #ff0000;"&gt; 原生DOM元素</span>
});

</span><div v-red="参数"&gt;</div>

指令名称: v-red -> red

</span>* 注意: 必须以 v-<span style="color: #000000;"&gt;开头

拖拽:
</span>-------------------------------<span style="color: #000000;"&gt;

二、自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});

自定义指令写法一：

v-red>

'red',.el.style.background='red'

    window.onload</span>=<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
        </span><span style="color: #0000ff;"&gt;var</span> vm=<span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Vue({
            el:</span>'#box'<span style="color: #000000;"&gt;,data:{
                msg:</span>'welcome'<span style="color: #000000;"&gt;
            }
        });
    };</span></pre>

自定义指令写法二：推荐写法

Vue.directive('red',){ .el.style.background=

    window.onload</span>=<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
        </span><span style="color: #0000ff;"&gt;var</span> vm=<span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Vue({
            el:</span>'#box'<span style="color: #000000;"&gt;,data:{
                <span style="color: #ff0000;"&gt;a:</span></span><span style="color: #ff0000;"&gt;'blue'</span><span style="color: #000000;"&gt;
            }
        });
    };</span></pre>

自定义指令写法三：

'red'.el.style.background='red'

    window.onload</span>=<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
        </span><span style="color: #0000ff;"&gt;var</span> vm=<span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Vue({
            el:</span>'#box'<span style="color: #000000;"&gt;
        });
    };</span></pre>

自定义指令：拖拽drag