自定义指令（写一个倒置时）

发布时间：2020-12-14 01:04:45 所属栏目：百科来源：网络整理

导读：自定义指令好处很多，有时候很多简单的功能形不成方法，但是调用的地方有很多，这时候使用自定义指令其实是一个不错的选择，下面就是一个简单的自定义指令实现一个倒置时：看图 !DOCTYPE htmlhtml lang="en"head title/title meta charset="UTF-8" meta nam

自定义指令好处很多，有时候很多简单的功能形不成方法，但是调用的地方有很多，这时候使用自定义指令其实是一个不错的选择，下面就是一个简单的自定义指令实现一个倒置时：
看图

<!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...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!