2-12 vue自定义指令
2017-09-05 本文已影响27人
codeTao
自定义指令
自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。
- 定义自定义指令
<body>
<!--全局指令-->
<div id="app">
<span v-red>sk666</span>
</div>
<!--局部指令-->
<div id="app2">
<span v-skblue>sk666</span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//自定义指令
//注意:vue自定义指令, 名称格式:指令名称前加v-
Vue.directive('red', {
bind:function (el) {
el.style.background = 'red';
}
});
var vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
});
//局部指令, directives 选项定义局部指令
var vm2 = new Vue({
el:'#app2',
directives:{
//格式: 指令名称 : {}
skblue:{
bind:function (el) {
el.style.background = 'blue'
}
}
}
})
</script>
