隨手vue筆記 (二)

目錄

隨手vue筆記 (一)

隨手vue筆記 (二)

 1、自定義指令_函數式

自定義指令就是操作Dom元素

 

 console輸出：

實現代碼：

 

 

 

 

詳細代碼：

<template>
  <div class="container">
      
      <h2>當前的n數值是：<span v-text="n"></span></h2>
      <h2>放到10倍N值是：<span v-big="n"></span></h2>
    <button @click="n++">按鈕</button>
  </div>
</template>
<!-- 需求 -->
<!--1、 定義一個v-Big指令和V-text功能類似，但會把綁定的數值放大10倍 -->
<!--2、 定義一個v-fbind指令 和v-bind功能類似，但可以讓其所綁定的input元素默認獲取焦點。-->
<script>
export default {
  data () {
    return {
        n:0
    }
  },
  //定義指令
  directives:{
      //定義的時候不用加 V-
      //1、對象方式,可以處理細節
      //   big:{ 
      //       key:value,
      //       key:value,
      //   }
    //2、函數方式,不好處理細節
    big(element,binding){
        //element是真實的dom元素，也就是上面的span
        //bingding就是具體的值
        element.innerText = binding.value * 10;
    }
  }
 
}
</script>

<style scoped>

</style>

這裏的big函數什麼時候會被調用呢？

    1、指令與元素成功綁定時

    2、指令所用的到的變量發生變化的時候會調用，這樣的說不準確，準確的說是 指令所在的模板重新解析時會被調用。

 

第二個需求的實現：自定義 v-fbind指令

 代碼:

<template>
  <div class="container">
    <input type="text" v-fbind:value="n"  />
    <button @click="n++">按鈕</button>
  </div>
</template>
<!-- 需求 -->
<!--1、 定義一個v-Big指令和V-text功能類似，但會把綁定的數值放大10倍 -->
<!--2、 定義一個v-fbind指令 和v-bind功能類似，但可以讓其所綁定的input元素默認獲取焦點。-->
<script>
export default {
  data () {
    return {
        n:0
    }
  },
  //定義指令
  directives:{
    fbind(element,binding){ //
        //element是真實的dom元素，也就是上面的 input
        //bingding就是具體的值
        element.value = binding.value * 10;

    }
  }
}
</script>

<style scoped>

 根據一下幾個方法來實現需求二

  //定義指令
  directives:{
    fbind:{ //使用對象,以下幾個函數式固定寫法
      //當指令與元素成功綁定時會調用
      bind(){
        console.log('bind');
      },
      //指令所在元素被插入頁面時
      inserted(){
        console.log('inserted');
      },
      //指令所在的模板被重新解析時
      update(){
        console.log('update');
      }
    }
  }

效果：

完整的代碼：

 

 

 效果：