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] ,当然其实这是个错误用法但是语法意思上是这个道理。我不太会举例大概就是这个意思了

posted @ 2021-10-09 15:44 blurs 阅读(371) 评论(0) 收藏举报

刷新页面返回顶部

blurs

vue directives的使用

公告