vue--钩子函数1
最近在学习自定义指令,这里做个整理
vue允许注册自定义指令,在2.0中,代码复用和抽象的主要形式是组件。然而有的情况下仍需要对普通DOM元素进行底层操作,这时就会用到自定义指令。
全局指令directive,局部指令directives
一个指令定义对象可以提供的钩子函数:
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
钩子函数参数
el:指令所绑定的元素,可以用来直接操作 DOM;
binding:一个对象,包含以下属性:
name: 指令名,不包括 v- 前缀
value:指令的绑定值,
expression:字符串形式的指令表达式
VNode:Vue 编译生成的虚拟节点
这是这两天了解到的指令/钩子函数/钩子函数参数,以后或许会有更新
今天主要的疑问是不太了解update这个函数的使用
vue--钩子函数1的更多相关文章
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- Vue钩子函数
Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
- vue 钩子函数
beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...
- vue钩子函数的妙用之“created()和activated()”
一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
- VUE钩子函数created与mounted区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
随机推荐
- cakephp静态资源404
location ~ /\.(css|js|woff|ttf|gif|jpg|jpeg|png|bmp|swf) { rewrite ^/$/(.*)$ /$/app/webroot/$ last; ...
- XML DTD语法详解
XML DTD详解 XML DTD详解 前情提要与本文内容介绍 前面的两篇XML相关博文: 第一篇是介绍格式正规的XML: 格式正规的XML:语法 属性 实体 处理指令 样式单 CDATA节 第二 ...
- 使用 Bulma
一.起因 最近我在学习 SASS,通过它,可以将 CSS 像编程语言一样书写. 在最近之前,我又学习了 Flex 布局,用起来很方便. 所以,我学习了 Bulma 这个纯 CSS 框架--使用 Fle ...
- Altium Designer 3D模型的下载与添加
先 先晒几个图:是不是很逼真啊.. ---------------------------------------教程---------------------------------------- ...
- 国外物联网平台(2):微软Azure IoT
国外物联网平台(2)——微软Azure IoT 马智 平台定位 连接设备.其它 M2M 资产和人员,以便在业务和操作中更好地利用数据. 连接 IoT 设备 将所有设备连接到云,从这些设备接收大规模数据 ...
- 【阿圆实验】Alertmanager HA 高可用配置
注意:没有使用supervisor进程管理器的,只参考配置,忽略和supervisor相关命令.并且alertmanager的版本不得低于0.15.2,低版本alert不支持集群配置. 一.alert ...
- AngularJS(五)——filter(过滤器)
前言 过滤器可以用一个管道字符(|)添加到表达式和指令中.比如做ITOO的时候或者其他项目的时候,总是想统一货币日期等显示,以前的做法,不断循环该控件或该标签,然后循环转换.如果利用AngularJS ...
- linux中断和异常睡眠问题
中断和异常: 中断只代表异步中断,异常代表同步中断,这样系统调用是异常处理,不是中断处理. 这里异常处理是可以休眠block的,因为异常处理所需的数据是存储在异常栈中,而每个进程都有一个异常栈,所以异 ...
- [转载]C#实现获取浏览器信息
原文地址:C#实现获取浏览器信息作者:flywithme Request.Browser.MajorVersion.ToString();//获取客户端浏览器的(主)版本号 Request.Bro ...
- 直播点赞,上升的动画-- CAKeyFrameAnimation
// // ViewController.m // DMHeartFlyAnimation // // Created by Rick on 16/3/9. // Copyright © 20 ...