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的生命周期在面试中也算是比 ...
随机推荐
- 算法Sedgewick第四版-第1章基础-1.4 Analysis of Algorithms-001分析步骤
For many programs, developing a mathematical model of running timereduces to the following steps:■De ...
- PHP 查看扩展信息的命令
PHP 查看扩展信息的命令 这里以查看 Swoole 扩展信息为例. root@639ca1f15214:~# php --ri swoole // php --ri [扩展名称] swoole sw ...
- ModelSim Simulation of RapidIO II IP Core Demonstration Testbench May Require ld_debug Command
Solution ID: fb83262Last Modified: May 17, 2013Product Category: Intellectual PropertyProduct Area: ...
- 小小c#算法题 - 11 - 二叉树的构造及先序遍历、中序遍历、后序遍历
在上一篇文章 小小c#算法题 - 10 - 求树的深度中,用到了树的数据结构,树型结构是一类重要的非线性数据结构,树是以分支关系定义的层次结构,是n(n>=0)个结点的有限集.但在那篇文章中,只 ...
- MVC要点
1.绑定一个DropDownList @Html.DropDownListFor(m => m.MobileType, new List<SelectListItem>() { ne ...
- SQLServer数据库,表内存,实例名分析SQL语句
--数据库内存分析 USE master go DECLARE @insSize TABLE(dbName sysname,checkTime VARCHAR(19),dbSize VARCHAR(5 ...
- Win7共享问题 映射网盘时出现的错误 the specified server cannot perform the requested operation
Win7共享问题 映射网盘时出现的错误:the specified server cannot perform the requested operation 解决方案: 1.重启电脑: 2.修改注册 ...
- 如何理解虚拟React的DOM(转)
目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异 ...
- 对MySQL性能影响较大的五类配置参数
以下主要是对MySQL 性能影响关系紧密的五大配置参数的介绍. 一. 连接 连接通常来自Web 服务器,下面列出了一些与连接有关的参数,以及该如何设置它们. (一). ...
- [SinGuLaRiTy] NOIP膜你赛-Day 1
[SinGuLRiTy-1022] Copyright (c) SinGuLaRITy 2017. All Rights Reserved. 对于所有题目:Time Limit:1s || Memo ...