vue教程2-07 自定义指令
Vue.directive(指令名称,</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(参数){
</span><span style="color: #ff0000;">this.el -></span><span style="color: #000000;"><span style="color: #ff0000;"> 原生DOM元素</span>
});
</span><div v-red="参数"></div>
<span style="color: #000000;">
指令名称: <span style="color: #ff0000;">v
</span>* 注意: 必须以 v-<span style="color: #000000;">开头
拖拽:
</span>-------------------------------<span style="color: #000000;">
二、自定义元素指令:(用处不大)
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;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> vm=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Vue({
el:</span>'#box'<span style="color: #000000;">,data:{
msg:</span>'welcome'<span style="color: #000000;">
}
});
};</span></pre>
自定义指令写法二:推荐写法
">
Vue.directive('red',){
.el.style.background= window.onload</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> vm=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Vue({
el:</span>'#box'<span style="color: #000000;">,data:{
<span style="color: #ff0000;">a:</span></span><span style="color: #ff0000;">'blue'</span><span style="color: #000000;">
}
});
};</span></pre>
自定义指令写法三:
window.onload</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> vm=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Vue({
el:</span>'#box'<span style="color: #000000;">
});
};</span></pre>
自定义指令:拖拽drag