vue教程2-07 自定义指令

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>

<span style="color: #000000;">
指令名称: <span style="color: #ff0000;">v<span style="color: #ff0000;">-red -> red

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

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

  二、自定义元素指令:(用处不大)
Vue.elementDirective('zns-red'<span style="color: #000000;">,{
bind:<span style="color: #0000ff;">function<span style="color: #000000;">(){
<span style="color: #0000ff;">this.el.style.background='red'<span style="color: #000000;">;
}
});

 

自定义指令写法一:

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