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

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. Luogu 4514 上帝造题的七分钟

    二维差分+树状数组. 定义差分数组$d_{i, j} = a_{i, j} + a_{i - 1, j - 1} - a_{i, j - 1} - a_{i - 1, j}$,有$a_{i, j} = ...

  2. niginx隐藏入口文件index.php

    location / { if (!-e $request_filename) { rewrite ^/(.*)$ /index.php/$ last; break; } }

  3. 1.6 opencv视频操作基础

    利用opencv中的VideoCapture类,来对视频进行读取显示,以及调用摄像头. VideoCapture是opencv 2.X中新增的一个类,对应于之前C语言版本的CvCapture结构体.它 ...

  4. Person.delete请求－－－－强大的bug－－－下班之前总结整个过程

    默认访问的是: findAll(query) 还有个findAll(ids,query) 只有findAll才调用了findEntity->findById: 那么我重写了findById,查询 ...

  5. 基于.NET平台常用的框架整理[转载]

    自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就 ...

  6. Android proguard代码混淆

    为什么要代码混淆? Android的安装文件是apk格式.APK是AndroidPackage的缩写.是由android sdk编译的工程打包生成的安装程序文件. Apk其实是zip文件,但是后缀名被 ...

  7. Linux计划任务 定时任务 Crond 配置详解 crond计划任务调试 sh -x 详解 JAVA脚本环境变量定义

    一.Crond 是什么?(概述) crontab 是一款linux系统中的定时任务软件用于实现无人值守或后台定期执行及循环执行任务的脚本程序,在企业中使用的非常广泛.     现在开始学习linux计 ...

  8. Binder学习笔记（三）—— binder客户端是如何组织checkService数据的

    起点从TestClient.cpp的main函数发起: int main() { sp < IServiceManager > sm = defaultServiceManager(); ...

  9. 「十二省联考 2019」异或粽子——tire树+堆

    题目 [题目描述] 小粽是一个喜欢吃粽子的好孩子.今天她在家里自己做起了粽子. 小粽面前有 $n$ 种互不相同的粽子馅儿,小粽将它们摆放为了一排,并从左至右编号为 $1$ 到 $n$.第 $i$ 种馅 ...

  10. P3321 [SDOI2015]序列统计 FFT+快速幂+原根

    \(\color{#0066ff}{ 题目描述 }\) 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S.小C用这 ...