vue常用指令-自定义局部指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-常用指令-自定义局部指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.自定义全局指令的特点
在任何一个Vue实例控制的区域中都可以使用
2.自定义局部指令的特点
只能在自定义的那个Vue实例中使用
3.如何自定义一个局部指令
给创建Vue实例时传递的对象添加
directives: {
// key: 指令名称
// value: 对象
'color': {
bind: function (el, obj) {
el.style.color = obj.value;
}
}
}
-->
<!--这里就是MVVM中的View-->
<div id="app1">
<p v-color="'blue'">我是段落</p>
</div>
<div id="app2">
<p v-color="'red'">我是段落</p>
</div>
<script>
/*
Vue.directive("color", {
// 这里的el就是被绑定指令的那个元素
bind: function (el, obj) {
el.style.color = obj.value;
}
});
*/
// 这里就是MVVM中的View Model
let vue1 = new Vue({
el: '#app1',
// 这里就是MVVM中的Model
data: {},
// 专门用于存储监听事件回调函数
methods: {}
});
// 这里就是MVVM中的View Model
let vue2 = new Vue({
el: '#app2',
// 这里就是MVVM中的Model
data: {},
// 专门用于存储监听事件回调函数
methods: {},
// 专门用于定义局部指令的
directives: {
"color": {
// 这里的el就是被绑定指令的那个元素
bind: function (el, obj) {
el.style.color = obj.value;
}
}
}
});
</script>
</body>
</html><< 上一篇
下一篇 >>