VUE——使用钩子函数

指令定义函数提供几个钩子函数

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update：所在组件的VNode更新时调用，但可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：所在组件的VNode及其孩子的VNode全部更新时调用。 unbind：只调用一次，指令与元素解绑时调用。
钩子函数的参数包括el，binding，vnode，oldVnode。

Vue.directive('focus',{bind: function(el){ //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数是一个原生的JS对象
//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用//el.focus()},inserted: function(el){ //inserted表示元素插入到DOM中的时候，会执行inserted函数【触发1次】el.focus()},updated: function(el){ //当VNode更新的时候，会执行updated，可能会触发多次}
})

钩子函数被赋予以下参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含以下属性：
（1）name: 指令名，不包括v-前缀。
（2）value: 指令的绑定值，例如：v-my-directive=“1+1”, value值是2
（3）oldValue: 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
（4）expression: 绑定值的字符串形式。例如：v-my-directive=“1+1”，expression的值是"1+1"。
（5）arg: 传给指令的参数。例如v-my-directive: foo，arg的值是"foo"。
（5）modifiers: 一个包含修饰符的对象。例如: v-my-directiove.foo.bar，修饰符对象modifiers的值是{foo: true, bar: true}。

vnode: Vue编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了el之外，其他参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。

VUE——使用钩子函数相关推荐

vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
Vue的钩子函数是什么意思?Vue都有哪些钩子函数？
Vue的钩子函数是什么意思?Vue都有哪些钩子函数? Vue钩子函数就是指在一个Vue实例从创建到销毁的过程自动执行的函数. beforeCreate:在Vue实例创建之前执行. Created:在V ...
c语言中的钩子函数,生命周期（vue的钩子函数）
生命周期图示创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后 beforeCreate:function(){ console.log('1-beforeCreate 组件还未被创建' ...
vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
vue的钩子函数created以及mounted的示意(转载)
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
Vue 路由钩子函数
路由钩子函数分为三种: 全局前置守卫 router.beforeEach全局解析守卫 router.beforeResolve全局后置钩子 router.afterEach路由独享的守卫 before ...
【vue】钩子函数和回调函数的区别
一般认为,钩子函数就是回调函数的一种,其实还是有差异的,差异地方就是:触发的时机不同. 先说钩子函数: 钩子(Hook)概念源于Windows的消息处理机制,通过设置钩子,应用程序对所有消息事件进行拦 ...
前端（day05）Vue，Vue的钩子函数created：
Vue 概念:一套构建用户界面的渐进式前端框架 1.创建一个HTML文件 <!DOCTYPE html> <html lang="en"> <head ...
关于vue的钩子函数+生命周期
https://segmentfault.com/a/1190000008010666 转载于:https://www.cnblogs.com/llllpzyy/p/9711566.html

VUE——使用钩子函数

VUE——使用钩子函数相关推荐

最新文章

热门文章