最近在学习自定义指令，这里做个整理

vue允许注册自定义指令，在2.0中，代码复用和抽象的主要形式是组件。然而有的情况下仍需要对普通DOM元素进行底层操作，这时就会用到自定义指令。

全局指令directive，局部指令directives

一个指令定义对象可以提供的钩子函数：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

和样式有关的操作，一般都在bind中执行
和js有关的操作，最好是在inserted中执行

钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM；

binding：一个对象，包含以下属性：

name: 指令名，不包括 v- 前缀

value：指令的绑定值，

expression：字符串形式的指令表达式

VNode：Vue 编译生成的虚拟节点

这是这两天了解到的指令/钩子函数/钩子函数参数，以后或许会有更新

今天主要的疑问是不太了解update这个函数的使用

vue--钩子函数1的更多相关文章

  1. vue 钩子函数 使用async await

    示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. Vue钩子函数生命周期实例详解

    vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...

  3. Vue钩子函数

    Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...

  4. vue 钩子函数的使用

    1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...

  5. vue 钩子函数的初接触

    vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...

  6. vue 钩子函数

    beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...

  7. vue钩子函数的妙用之“created()和activated()”

    一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...

  8. vue 钩子函数中获取不到DOM节点

    原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...

  9. VUE钩子函数created与mounted区别

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.

  10. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

随机推荐

  1. php学习笔记-逻辑运算符

    $a and $b 只有当$a和$b都是true才返回true,否则false. $a or $b 只要$a或者$b至少有一个是true则返回true.意思是或者$a是true,或者是$b是true, ...

  2. Ubuntu14.04文件目录说明

    一.Dev设备目录 二.etc配置文件目录 三.bin默认程序安装目录 四.boot系统启动用到的配置文件以及内核镜像 五.home用户目录 六.lib库文件目录 七.media系统自动挂载设备会选择 ...

  3. Luogu 3934 Nephren Ruq Insania

    和Ynoi2016 炸脖龙重题了. BZOJ 5394. 首先是扩展欧拉定理: 一开始傻掉了……递归的层数和区间长度无关……也就是说我们每一次直接暴力递归求解子问题一定不会超过$logP$层,因为当模 ...

  4. C/C++中struct/union/class内存对齐

    struct/union/class内存对齐原则有四个: 1).数据成员对齐规则:结构(struct)(或联合(union))的数据成员,第一个数据成员放在offset为0的地方,以后每个数据成员存储 ...

  5. Newtonsoft Json操作类库的使用

    1.解析简单Json字符串 if (l_sSenJson != "") { JObject obj2 = (JObject)JsonConvert.DeserializeObjec ...

  6. 数据结构_just_sort

    问题描述 给定两个序列 a b,序列 a 原先是一个单调递增的正数序列,但是由于某些原因,使得序列乱序了,并且一些数丢失了(用 0 表示).经过数据恢复后,找到了正数序列 b ,且序列 a 中 0 的 ...

  7. python基本概念——字符串

    1.字符串 一个字符串用什么引号开头,就必须用什么引号结尾.两上三引号之间的一切都作为字符串的内容,对应的单引号与双引号却只能创建单行字符串. 2.转义符 \,行末的单独一个反斜杠表示字符串在下一行继 ...

  8. 【Android学习】三种布局<include />、<merge />、<ViewStub />

    1.布局重用<include /> <include />标签能够重用布局文件,使用起来非常简单 <include layout="@layout/layout ...

  9. 输入框获取焦点后placeholder文字消失、修改placeholder的样式

    输入框获取焦点后placeholder文字消失: <input placeholder='' onfocus="this.placeholder=''" onblur=&qu ...

  10. FineUI从iis6迁移到iis7.5上遇到的奇葩事情

    前天把一台旧服务器上的windows2003+iis6上的fineui项目迁移到了win7+iis7上面来了,没有编译,直接以源码方式运行. 本来运行的好好的,昨天下午在上面用vs2010打开了一下看 ...