VUE-关于Vue-directive() 定义

我在视频上看到用法: 

div id="app">
    <div v-li>aaaaa</div>
</div>

<script src="../vue.js"></script>
<script>
    Vue.directive('li', function () {
        console.log(this) // div
        this.el.style.background = 'green';
        this.el.click = function () {
            this.el.style.color = 'red'
        }
    })

视频上  this的输出是Directive，下面有一个属性是el, el对应的是div，但是我同样的代码 this输出的是window,所以我去查了文档，文档所演示的是：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

这个inserted应该是个钩子函数吧，而且对于这个directive的第二个参数，输入的是一个对象 {}，而视频的第二个参数直接是一个function，（当然function 属于对象，肯定是没有错），然后我注意到文档是有传入参数的，所以我在function的参数里传入了el，并输出了el：

Vue.directive('li', function (el) {
       console.log(this);  // window
       console.log(el);  //<div v-li>aaaaa</div>
    });
    new Vue({
        el: '#app',
    })

所以最后完成Vue-directive的自定义属性用法：

<div id="app">
    <div v-li>aaaaa</div>
</div>

<script src="../vue.js"></script>
<script>
    Vue.directive('li', function (el) {
        el.style.background = 'green';
        el.addEventListener('click', function () {
            this.style.color = 'red'
        })
    });
    new Vue({
        el: '#app',
    })
</script>

对于在第二个参数传参的问题，传入一个json对象就是可以实现双向绑定，而一个function则只是单向，上代码体验一下:

<div id="app">
    <div>
        <input type="text" v-model="color">
        <div v-see-change
            :style='{width:"200px",height:"200px",background:color,position:"absolute"}'></div>
    </div>
</div>

<script src="../../vue.js"></script>
<script>
     /**
     * directive 第二个参数用json对象  =》实现双向绑定
     * bind() 定义出现时候的状态
     * 而upadate定义更新时候*/
    Vue.directive('seeChange',{
        bind(el){
            el.style.background = 'blue';
        },
        update(el,se){
            console.log(this);
            el.style.background = se;
        }
    });
    new Vue({
        el: '#app',
        data: {
            color: "blue"
        }
    })
</script>