vue系列文章（25）vue自定义指令，钩子函数

前面文章中，我们使用了很多vue提供 的指令，如v-mode ,v-on,v-show等。

Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

我们在html中使用自定义的指令

<template>
  <div id="show-blogs" v-theme:column="'narrow'">
    <h1>博客总览</h1>
    <div class="single-blog" v-for="blog in blogs">
      <h2 v-rainbow>{{blog.title}}</h2>
      <article>{{blog.body}}</article>
    </div>
  </div>
</template>

其中上述代码的v-theme和v-rainbow都是我们自定义的指令，那么我们必须在main.js中实现我们自定义的指令所执行的操作。

//自定义指令
Vue.directive("rainbow",{
  bind(el,binding,vnode){
    el.style.color = "#"+Math.random().toString(16).slice(2,8);
  }
})
Vue.directive('theme',{
  bind(el,bingding,vnode){
    if(bingding.value =="wide"){
      el.style.maxWidth = "1260px"
    }else if(bingding.value == 'narrow'){
      el.style.maxWidth == "560px"
    }

    if(bingding.arg == 'column') {
      el.style.background = "#6677cc";
      el.style.padding = "20px";
    }
  }
})

 

如上述代码所属，我们需要加入Vue.directive操作，其中的第一个参数是我们的指令名，如v-rainbow，那么我们的指令名就是rainbow,第二个是个钩子函数对象，bing(el,binding,vnode)

如果自定义指定中带有参数，如v-theme= "narrow"那么，我们必须将字符串的参数加上引号

通过binding.value 判断参数的值进行操作。

也可以像v-on:click指定这样绑定自定义指令的属性，如v-theme:column绑定我们自己的属性column

通过binding.arg判断我们的参数，进行逻辑操作。

如果上面文章对你有用，打赏下我吧@*@