VUE钩子函数

举报
tea_year 发表于 2021/12/29 22:22:27 2021/12/29
【摘要】 钩子函数 指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值...

钩子函数

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

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

  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

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

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

钩子函数参数

钩子函数的参数有:

  • el: 指令所绑定的元素,可以用来直接操作 DOM 。
  • binding: 一个对象,包含以下属性:
    • name: 指令名,不包括 v- 前缀。
    • value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2
    • oldValue: 指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"
    • arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"
    • modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }
  • vnode: Vue 编译生成的虚拟节点。
  • oldVnode: 上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

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


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>VUE钩子</title>
  6. <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app" v-aaa:hello.a.b="message"></div>
  10. <script>
  11. Vue.directive('aaa',{
  12. bind:function(el,binding,vnode){
  13. var s=JSON.stringify
  14. el.innerHTML=
  15. 'name'+s(binding.name)+'<br/>'+
  16. 'value'+s(binding.value)+'<br/>'+
  17. 'express'+s(binding.expression)+'<br/>'+
  18. 'argument'+s(binding.arg)+'<br/>'+
  19. 'modifiers'+s(binding.modifiers)+'<br/>'+
  20. 'vnode keys'+Object.keys(vnode).join(',')
  21. }
  22. })
  23. new Vue({
  24. el:'#app',
  25. data:{message:'晨光课堂教程'}
  26. })
  27. </script>
  28. </body>
  29. </html>

钩子函数的简写:


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>VUE钩子</title>
  6. <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <div v-aaa="{color:'red',text:'晨光课堂'}"></div>
  11. </div>
  12. <script>
  13. Vue.directive('aaa',function(el,binding){
  14. //设置指令的背景颜色;
  15. el.innerHTML=binding.value.text
  16. el.style.backgroundColor=binding.value.color
  17. })
  18. new Vue({
  19. el:'#app'
  20. })
  21. </script>
  22. </body>
  23. </html>

 

文章来源: aaaedu.blog.csdn.net,作者:tea_year,版权归原作者所有,如需转载,请联系作者。

原文链接:aaaedu.blog.csdn.net/article/details/86590694

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。