Vue API(directives) 自定義指令

前言：除了vue的內置指令以外，我們可以定義自定義指令。內置指令表相見：https://www.cnblogs.com/ilovexiaoming/p/6840383.html

我們定義一個最簡單的

<script>
export default {
  name: 'App',
  data(){
    return{
      yanse:'red'
    }
  },
  // 所有自定義指令
  directives:{
    zzh(el,binding){
      console.log(el);
      console.log(binding);
      el.style='color:'+binding.value;
    }
  }
}
</script>

　我們在這里定義了一個指令，用於改變字體的顏色，我們如何去調用我們自定義的指令，實際上你就可以當作是內置指令一樣去調用它了！

 

給zzh綁定的值一定要是 具體的數據/state/computed，不可以直接綁定值。

其中el是綁定的這個dom，而binding里是一些源數據

 其中呢，我們不光可以去指定它的style，能干的事情還有很多，我們再去指定一下它的className,為了演示效果，我們引用一下animate.css,在main.js全局注冊一下就好.

fadeInDown(el){
      el.className = 'animated fadeInDown';
 }

　在dom標簽上寫上classname就ok了。