自定義指令

指令 就是在vue中v-字首的html特殊屬性

指令 是有限的就那幾個 但是如果我想用的功能沒有的怎麼辦？

自定義指令--------- 就是我們自己定義指令

5個鉤子要記住

<template>
  <div class="about">
   <h1>自定義指令</h1>
   <!-- 自定義指令使用的時候使用v-你的自定義指令名字 -->
   <input type="text" v-xiaoming/>
   <p v-xiaohong>測試自定義指令</p>
  </div>
</template>
​
<script>
export default {
   directives:{
    xiaoming:{
     // bind：繫結指令到元素上，只執行一次
​
     // inserted：綁定了指令的元素插入到頁面中展示時呼叫，基本上都是操作這個鉤子函式
​
     // update：所有元件節點更新時呼叫
​
     // componentUpdated：指令所在元件的節點及其子節點全部更新完成後呼叫
​
     // unbind：解除指令和元素的繫結，只執行一次
     // el這個形參就是當指令繫結到那個dom元素上  形參el就是誰
     inserted(el){
       el.focus()
     }
    },
    xiaohong:{
     inserted(el){
      el.style.color="red";
     }
    }
   }
}
</script>

 

本文來自部落格園，作者：{Teil}}，轉載請註明原文連結：https://www.cnblogs.com/user-001/p/15632662.html