自定義指令（寫一個倒置時）

時間 2019-12-14

原文原文鏈接

自定義指令好處不少，有時候不少簡單的功能形不成方法，可是調用的地方有不少，這時候使用自定義指令實際上是一個不錯的選擇，下面就是一個簡單的自定義指令實現一個倒置時：
看圖html

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <div id="app">
    <button v-countdown='5'>click</button>
    <br/>
  </div>
</body>
<script>
  function countdownTime(binding) {
    let time = binding.value || 10;
    let timer = setInterval(function () {
      if (time > 1) {
        --time;
        binding.elm.innerHTML = "倒置時還有：" + time + "（秒）";
      } else {
        binding.elm.innerHTML = "click";
        clearInterval(timer);
      }
    }, 1000);
  }
  Vue.directive('countdown', {
    bind(el, vnode, binding) {
      el.addEventListener("click", function () {
        countdownTime(binding);
      });
    },
    unbind(el, binding) {
      el.removeEventListener("click", countdownTime(binding));
    }
  });
  var vm = new Vue({
    el: "#app",
  });

</script>

</html>

api說明：

bind 只調用一次，指令第一次綁定到元素時調用，在這裏能夠進行一次性初始化設置
inserted 被綁定元素插入福接單是調用（僅保證父節點存在，但不必定已被插入文檔中）
update 所在組件的VNode更新時調用，可是可能發生在其子VNode更新以前，指令的值可能發生了改變，也可能沒有，可是能夠通用比較更新先後的值來忽略沒必要要的模板更新
componentUpdated 指令所在組件的VNode及其子VNode所有跟新後調用
unbind 值調用一次，指令與元素解綁時調用

github地址：https://github.com/wqb2017/my...vue

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。