Vue API(directives) 自定義指令
阿新 • • 發佈:2018-11-10
前言:除了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了。