vue directives的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app" v-tests :tsprops='123'>
<p>{{ tsprops }}</p>
<keep-alive>
<test></test>
</keep-alive>
</div>
<script>
Vue.directive("tests",{
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind (){
debugger;
},
inserted (){
debugger;
},
update (){
debugger;
}
})
// 注册
Vue.component('test', {
template: '<h1 v-tests>{{txt}}</h1>',
inject: ["test1", "test"],
mounted (){
debugger;
this.test1();
this.txt = "被改变变化";
},
data(){
return {
txt: "测试文字"
}
},
directives: {
tests: {
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind (){
debugger;
},
inserted (){
debugger;
},
update (){
debugger;
}
}
}
})
new Vue({
el: '#app',
props: {
tsprops: ""
},
provide (){
return {
test: "appData",
test1: this.appFn
}
},
data: {
message: 'Hello Vue.js!'
},
methods: {
appFn (){
debugger;
}
}
})
</script>
</body>
</html>
不知道咋说呀，directive就是一个自定义事件 定义好的可以 v-name使用！~~。 完了 真没什么好说的。。
补充一下 自定义中钩子内部的回调参数
el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下 property：name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用
里面比较常用的大概就是arg了 这东西可以用于动态传参 在 bind 或者 inseted响应的时候 通过这个属性值获取对应的属性数据进行处里 实现动态指令
例如我写个指令 鼠标一上去变红色字体 v-changeColor 但是 我想让他变白色咋办，总不能每次变色都去修改代码吧。 这个时候只需要写一个v-changeColor:[#ffffff] ,当然 其实这是个错误用法 但是语法意思上是这个道理。我不太会举例大概就是这个意思了
