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

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. 数字图像处理实验(2):PROJECT 02-02, Reducing the Number of Gray Levels in an Image 标签: 图像处理MATLAB 2017-

    实验要求: Reducing the Number of Gray Levels in an Image Objective To understand how the number of gray ...

  2. vue 之 nodejs中npm的使用

    npm是什么? 简单的说,npm就是JavaScript的包管理工具.类似Java语法中的maven,gradle,python中的pip. 安装包 我们在桌面上创建一个文件夹/01-studyNpm ...

  3. 层次分析法(Analytic Hierarchy Process,AHP)

    昨天晚上室友问我什么是层次分析法?我当时就大概给他介绍了一下,没有细讲. 今天我仔细讲讲这个. 层次分析法是运筹学里面的一种方法,是讲与决策总是有关的元素分解成目标.准则.方案等层次,在此基础上进行定 ...

  4. 福大软工1816 · 第五次作业 - 结对作业2_EXE图片_备用

    1_每日推荐界面.png 2_论文搜索界面.png 2_论文搜索界面_搜索功能.png 3_流行趋势_十大热词排名统计图.png 4_人物界面.png 5_我的收藏界面.png 6_设置界面.png ...

  5. WordCount编码和测试

    WordCount编码和测试 项目地址:https://github.com/handsomesnail/WordCount PSP表格 PSP2.1 PSP阶段 预估耗时(分钟) 实际耗时(分钟) ...

  6. emr问题处理

    --通过his病历号查询emr中对应的患者ID --通过患者ID找出患者所有的病历集合ID --通过病历集合查找患者所有的病历 --通过病历dataID查找对应的病历数据,病历存在大字段中 '; -- ...

  7. ipa包使用命令上传fir.im或者蒲公英

    我们的工程做了自动打包处理,但是每次打完ipa后只是放置于一个共享盘或者本地,为了方便测试,每次都要手动上传上传fir或者蒲公英,比较麻烦.所以研究了一下怎么能在打完包后直接脚本上传到上传fir或者蒲 ...

  8. c# 创建XML文档,解析XML文档

    1.静态函数 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  9. Linux 新建用户、用户组,给用户分配权限

    注:内容来自网络 Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系统管理员对 ...

  10. java基础之转义符、数据类型

    一.  转义符 1.\n \n的作用是换行,也就是和键盘上的回车键相同 2.\t \t的作用是制表,就是以八个空格为一个单位,当不足八个时会自动补齐八个,如asd\tfgh,那么输出的将会是 . 3. ...