vue自定义全局指令directive和钩子函数
时间:2019-11-05
本文章向大家介绍vue自定义全局指令directive和钩子函数,主要包括vue自定义全局指令directive和钩子函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、directive
使用自定义全局指令实现文本框获取焦点功能
二、实例
<!-- 注意: Vue中所有的指令,在调用的时候,都以 v- 开头 --> <input type="text" class="form-control" v-model="keywords" id="search" v-focus >
// 使用 Vue.directive() 定义全局的指令 v-focus // 其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀, // 但是: 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用 // 参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作 Vue.directive('focus', { // 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象 inserted: function (el) { // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】 el.focus() // 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效 }, })
三、钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中),触发一次。
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 ,可能会触发多次。
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind
:只调用一次,指令与元素解绑时调用。
四、钩子函数使用
Vue.directive('focus', { bind: function (el) { // 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次 // 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象 // 在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用 // 因为,一个元素,只有插入DOM之后,才能获取焦点 el.focus() }, inserted: function (el) { // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】 el.focus() // 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效 }, updated: function (el) { // 当VNode更新的时候,会执行 updated, 可能会触发多次
el.focus()
}
})
原文地址:https://www.cnblogs.com/wangyuxue/p/11799773.html
- 1分钟生成Net对象的注释
- Android Studio之gradle的配置与介绍
- MLlib中的随机森林和提升方法
- android JNI调用机制
- Android开发小窍门通过泛型简化findViewById类型转换
- lodash源码分析之缓存使用方式的进一步封装
- Android LruCache技术原理
- RecyclerView 必知必会
- AndFix使用感想
- iOS GPUImage源码解读(一)
- Android 几种网络请求的区别与联系
- 构建基于JAVA的朴素贝叶斯文本分类器
- Spring Cloud构建微服务架构:服务网关(基础)【Dalston版】
- RxBinding使用和源码解析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python爬虫-selenium
- 用Python识别图形验证码,实现自动登陆!
- 当Docker遇到Intellij IDEA,再次解放了生产力~
- 用Python爬取自主品牌汽车,看看国产汽车究竟长什么样?(上)
- 工具包 | 使用Python绘制Sci学术期刊配图
- 深入剖析AQS和CAS,看了都说好
- 用Python爬取自主品牌汽车,看看国产汽车究竟长什么样?(下)
- 读者问:小林怎么学操作系统和计算机网络呀?
- 用Python搭建一个简单的代理池
- 用Python模拟登陆GitHub并获取信息
- APUE学习手札 编写一个与3.12节中dup2功能相同的函数,要求不调用fcntl函数,并且要有正确的出错处理
- Python教程 | 最标准的地图调用方式(国家测绘局提供数据)
- Python数据可视化:Python大佬有哪些?
- 新手一看就懂的线程池
- 「面试」破(B)站之旅