×

VUE每日一学:Vue之常用的内置指令

作者:abc1232022.01.04来源:Web前端之家浏览:4408评论:0
关键词:vuejs

Vue每日一学:Vue之常用的内置指令。

Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令,这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上,尽量不去操作增删改 DOM。通过了解如何去自定义指令,可以想象内置指令是如何完成的。

内置指令

指令名称描述使用
v-model绑定数据<\input v-model="message">
v-text输出文本,不能解析标签<\p v-text="message"></p>
v-html输出文本,可解析标签<\p v-html="message">/p>
v-once只绑定一次数据<\p v-once >{{message}}</p>
v-bind绑定属性<\img v-bind:src="imgurl"> 或 <\img :src="imgurl">
v-if控制是否显示容器 值转为布尔为false时 注释该容器,反之显示<\div v-if="true"></div>
v-show控制是否显容器,改变的时display:none/block<\div v-show="true"></diiv>
v-for循环遍历数组、对象<\li v-for="(val,key) in arr">{{val}}</li>
v-cloak在还没有执行到vue代码的时候隐藏元素,可解决‘闪烁'问题<\p v-cloak>{{message}}</p>

自定义指令

在需要特殊功能时,使用自定义指令对 DOM 进行底层操作

注册

自定义指令的注册分为全局注册和局部注册,类似组件的注册,只是方法名为 directive,写法如下:

// 全局注册 自定义指令
Vue.directive(‘mydir',{
  // 指令选项
});
// 全局注册 自定义指令函数
Vue.directive('mydir', function () {
 // 这里将会被 `bind` 和 `update` 调用
})
// 局部注册(只针对组件内元素)
export default {
  directives: {
    mydir: {
      // 指令选项
    }
  }
}

需要注意的是:Vue.directive( ) 注册指令要在实例初始化 new Vue( ) 之前才能全局注册指令。定义指令时驼峰式写法会报错,所以一般小写。

指令选项

自定义指令的选项是由几个钩子函数(可选)组成,可以根据需求选择不同的钩子,例如使用全局注册一个指令时:

Vue.directive('mydir', {
 bind: function () {
  // 只调用一次,指令第一次绑定到元素时调用,用于在绑定元素时执行一次的初始化动作。
  },
 update: function () {
  // 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值,
  // 之后被绑定元素所在的模板更新时调用,而不论绑定值是否变化,可以忽略不必要的模板更新。  
  }, 
 inserted: function () {
  // 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  },
 componentUpdated: function () {
  // 被绑定元素所在模板完成一次更新周期时调用。
  },
 unbind: function () {
  // 只调用一次, 指令与元素解绑时调用。
  }
})

以上每个钩子函数都有几个参数可用:

  1. el:指令所绑定的元素,可以用来直接操作 DOM;

  2. binding:包含指令信息的一个对象;

  3. vnode:Vue 编译的生成虚拟节点;

  4. oldVnode:上一次的虚拟节点,仅在update和componentUpdated钩子函数中可用。

示例:

// 一个带自定义指令的元素
<div v-mytest:foo.m1.m2="1+1">MyDirective</div>

// 部分 JS 代码
export default {
  directives:{
   mytest: {
    bind: function (el, binding, vnode) {
     console.log(el)
     console.log(binding)
     console.log(vnode)
    }
   }
  }
}

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20220104.html

网友评论文明上网理性发言 已有0人参与

发表评论: