位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > 钩子
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Vue.js 自定义指令 下一篇: Vue.js 路由

钩子函数

指令定义函数提供了几个钩子函数(可选):

l  bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

l  inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。      update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

l  componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

l  unbind: 只调用一次, 指令与元素解绑时调用。

 

钩子函数参数

钩子函数的参数有:

 

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

binding: 一个对象,包含以下属性:

l  name: 指令名,不包括 v- 前缀。

l  value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2

l  oldValue: 指令绑定的前一个值,仅在 update componentUpdated 钩子中可用。无论值是否改变都可用。

l  expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" expression 的值是 "1 + 1"

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

l  modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }

vnode: Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点,仅在 update componentUpdated 钩子中可用。

以下实例演示了这些参数的使用:

<div id="app"  v-huang:hello.a.b="message">
</div>
 
<script>
Vue.directive('huang', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#app',
  data: {
    message: '小白教程!'
  }
})
</script>

浏览器输出内容

name: "huang"
value: "小白教程!"
expression: "message"
argument: "hello"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce

有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:

Vue.directive('huang', function (el, binding) {

  // 设置指令的背景颜色

  el.style.backgroundColor = binding.value.color

})

指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:

实例

<div id="app">
    <div v-huang="{ color: 'gray', text: '小白教程!' }"></div>
</div>
 
<script>
Vue.directive('huang', function (el, binding) {
     // 简写方式设置文本及背景颜色
     el.innerHTML = binding.value.text
     el.style.backgroundColor = binding.value.color
})
new Vue({
  el: '#app'
})
</script>

效果图

小白教程网www.2d5.net

image.png

上一篇: Vue.js 自定义指令 下一篇: Vue.js 路由
毕业设计网             广告联系QQ:45157718(微信同号)