Vue知识点

指令

v-example="value" —— 这样可以传值到指令中，指令会根据value值来操作html

<div v-if="boolValue">boolValue为true时会显示</div>

v-example="'string'" —— 使用字符串作为表达式

<p v-html="'<h1>Hello word</h1>'"></p>

v-example:arg="value" —— 这里可以传参数（arg），例：class就是参数，className是参数值

<div v-bind:class="className"></div>

v-example:arg.modifier="value" —— 使用修饰符（modifier），例：点击后调用preventDefault()

<button v-on:submit.prevent="onSubmit"></button>

自定义指令

指令定义函数提供了几个钩子函数 (可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。
• insert：被绑定元素插入父节点时调用。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子元素的 VNode 更新之前。
• componentUpdated：所在组件的 VNode 及其子元素的 VNode 全部更新时调用。
• unbind：只调用一次，指令与元素解绑时调用。

以上每个钩子函数都有可以用的el，binding和vnode参数，除了update和componentUpdated之外，还会暴露oldVnode，以区分传递的旧值和新值。

• el 指令所绑定的元素，可以用来直接操作 DOM 。
• binding 一个对象，包含以下属性：name,value,oldValue,expression,arg和modifiers
• vnode Vue 编译生成的虚拟节点。

binding和vnode都是只读。

实例：

Vue.directive('tack',{
    bind(el,binding,vnode){
        el.style.position = 'fixed';
        el.style.top = binding.value + 'px';
    }
})

<div id="app">
    <p>向下滚动页面</p>
    <p v-tack="70">我固定在离顶部70px的地方</p>
</div>

若想要区分偏离的70px是在顶部还是左侧，可以通过传递一个参数：

Vue.directive('tack',{
    bind(el,binding,vnode){
        const s = (binding.arg == 'left'?'left':top);
        el.style[s] = binding.value + 'px'; 
    }
})

<p v-tack:left="70">现在我会在距离左侧70px的地方</p>

同理，也可以使用多个值：

你也可以使用多个值，像自带指令一样用：

Vue.directive('tack',{
    bind(el,binding,vnode){
        el.style.position = 'fixed';
        el.style.top = binding.value.top+'px';
        el.style.left = binding.value.left+'px';
    }
})

<p v-tack="{top:'40',left:'100'}">我固定在离顶部40px、左侧100px的地方</p>

 

简单创建一个滚动动画小例子：

Vue.directive('scroll',{
    inserted:function(el,binding){
        let f = function(evt){
            if(binding.value(evt,el)){
                window.removeEventListener('scroll',f);
            }
        }
        window.addEventListener('scroll',f);
    }
});

new Vue({
    el:'#app',
    methods:{
        handleScroll:function(evt,el){
            if(window.scrollY>50){
                TweenMax.to(el,1.5,{
                    y:-10,
                    opacity:1,
                    ease:sine.easeOut
                })
            }
            return window.scrollY>100;
        }
    }
});

<div class="box" v-scroll="handleScroll">
    <p>Your Name, this film, is a tale of what happens to a boy and girl who are destined to meet. Neither one knows it yet, but somewhere out there is a person they are bound to care deeply about.</p>
</div>