Vue自定义指令

最新推荐文章于 2024-04-11 04:27:48 发布

北海之灵

最新推荐文章于 2024-04-11 04:27:48 发布

阅读量1.5k

点赞数 3

分类专栏： Vue 文章标签：自定义指令自定义私有指令

本文链接：https://blog.csdn.net/xukongjing1/article/details/81672801

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

1.使用 Vue.directive()定义全局的指令

其中，参数1是指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀了，在调用的时候，必须在指令名称前面加上 v-前缀来进行调用。

参数2:是一个对象，在这个对象上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。

bind：每当指令绑定到元素上的时候,会立即执行这个 bind 函数，只执行一次。

注意：在每个函数中第一个参数，永远是el,表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象。

inserted：元素插入到DOM中的时候，会执行inserted函数[触发一次]

updated：当VNode 更新的时候，会执行 updated，可能会触发多次。

例子1：自定义全局指令让文本框获取焦点

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
  </head>
<body>
  <div id='app' style="width:90%;margin:0 auto;">
    <div class="panel panel-primary">
      <div class="panel-body form-inline">
        <label>
          搜索名称关键字
          <input type="text" v-model="keywords" v-focus class="form-control"></label>
      </div>
    </div>
   
  </div>

</body>
<script src="../lib/vue.js"></script>
<script>
  //使用 Vue.directive()定义全局的指令，
  //其中，参数1是指令的名称，注意，在定义的时候，指令的名称前面，
  //不需要加 v- 前缀,在调用的时候,必须在指令名称前面加上 v-前缀来进行调用。
  //参数2:是一个对象，在这个对象上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。
  Vue.directive('focus',{
    bind:function(el){//每当指令绑定到元素上的时候,会立即执行这个 bind 函数，只执行一次
      //注意：在每个函数中第一个参数，永远是el,表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
      //在元素刚绑定了指令的时候，还没有插入到DOM中去，这时调用  focus 方法么有作用
      //因为，一个元素，只有插入DOM之后，才能获取焦点
      //el.focus()
    },
    inserted:function(el){//元素插入到DOM中的时候，会执行inserted函数[触发一次]
      el.focus()
    },
    updated:function(){// 当VNode 更新的时候，会执行 updated，可能会触发多次。

    }
  })

  var vm = new Vue({
    el:'#app',
    data:{
    },
    methods:{
    },
  });
</script>
</html>

2.定义调用时可传参的指令

使用钩子函数的第二个binding参数拿到传递的值。

定义：

  Vue.directive('color',{
    bind:function(el,binding){
      el.style.color = binding.value;
    },
  })

使用：

<h3 v-color="'orange'">~~{{msg}}</h3>

binding对象包含以下属性：

name：指令名，不包括 v- 前缀。

value：指令的绑定值，例如：v-my-directive="1+1"，value的值是2.

oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中使用。无论值是否改变都可用。

expression：绑定值的字符串形式。例如 v-my-directive="1+1"，expression的值是 "1+1".

arg：传给指令的参数。例如 v-my-directive:foo，arg的值是"foo".

例子2：自定义颜色指令，颜色可传参。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
  </head>
<body>
  <div id='app'>
    <h3 v-color="'orange'">~~{{msg}}</h3>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  Vue.directive('color',{
    bind:function(el,binding){
      el.style.color = binding.value;
    },
  })
  var vm = new Vue({
    el:'#app',
    data:{
      msg:"欢迎学习Vue"
    },
    methods:{
    },
  });
</script>
</html>

3.自定义私有指令

和自定义全局指令类似，代码如下：

<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
  </head>
<body>
  <div id='app'>
    <h3 v-fontweight="'900'" v-fontsize="'40px'">~~{{msg}}</h3>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      msg:"欢迎学习Vue"
    },
    methods:{
    },
    //自定义私有指令
    directives:{
      'fontweight':{
        bind:function(el,binding){
          el.style.fontWeight = binding.value
        }
      },
      //指令函数的简写形式。
      //注意，这个 function 等同于把代码写到了 bind和 update中
      'fontsize':function(el,binding){
        el.style.fontSize = parseInt(binding.value)+'px'
      }
    }
  });
</script>
</html>

北海之灵

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令

1.使用 Vue.directive()定义全局的指令其中，参数1是指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀了，在调用的时候，必须在指令名称前面加上 v-前缀来进行调用。参数2:是一个对象，在这个对象上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。bind：每当指令绑定到元素上的时候,会立即执行这个 bind 函数，只执行一次。注意：...
复制链接

扫一扫