Vue.js 2.x笔记:指令(4)
1. 内置指令
指令是Vue.js 中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM 行为。
Vue.js 本身提供了大量的内置指令来进行对DOM 的操作,同时可以开发自定义指令。
2. 自定义指令
在 Vue 2.0 中,代码重用和抽象(reuse and abstraction)的主要是以组件的形式。
但是,可能某些情况下,还是需要对普通元素进行一些底层 DOM 访问,这是自定义指令的使用场景之处。
2.1 注册指令
2.1.1 全局自定义指令
Vue.directive(id, definition)
:注册全局自定义指令,接收参数id和定义对象。
其中,
id :指令的唯一标识
定义对象:指令的相关属性及钩子函数。
<div id="app">
<input v-focus />
</div>
<script>
// 注册一个名为 `v-focus` 的全局自定义指令
Vue.directive('focus', {
// 当绑定的元素插入到 DOM 时调用此函数……
inserted: function (el) {
// 元素调用 focus 获取焦点
el.focus()
}
}); var vm = new Vue({
el: "#app"
});
</script>
2.1.2 局部指令
注册局部指令:通过设置组件的 directives 选项。
<div id="app">
<input v-focus />
</div>
<script>
var vm = new Vue({
el: "#app",
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
});
</script>
2.2 钩子函数
指令的定义对象提供了几个钩子函数(全部可选):
bind
:在指令第一次绑定到元素时调用,只会调用一次。可以在此钩子函数中,执行一次性的初始化设置。
inserted
:在已绑定的元素插入到父节点时调用(只能保证父节点存在,不一定存在于 document 中)。
update
:在包含指令的组件的 VNode 更新后调用,但可能之前其子组件已更新。指令的值可能更新或者还没更新,然而可以通过比较绑定的当前值和旧值,来跳过不必要的更新。
componentUpdated
:在包含指令的组件的 VNode 更新后调用,并且其子组件的 VNode 已更新。
unbind
:在指令从元素上解除绑定时调用,只会调用一次。
Vue.js 2.x笔记:指令(4)的更多相关文章
- Vue.JS快速上手(指令和实例方法)
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记(二)
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- vue.js初学,笔记1,安装
最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...
- vue.js介绍,常用指令,事件,以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue.js 2.x笔记:组件(5)
1. 组件简介 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码. 组件:为了拆分Vue实例的代码量,以不同的组件来划分不同的功能模块,需要 ...
随机推荐
- Fescar(Seata)-Springcloud流程分析-1阶段
Fescar是阿里18年开源的分布式事务的框架.Fescar的开源对分布式事务框架领域影响很大.作为开源大户,Fescar来自阿里的GTS,经历了好几次双十一的考验,一经开源便颇受关注.今天就来看了F ...
- SOFARPC源码解析-搭建环境
文档地址:https://www.sofastack.tech 简介摘要 SOFA 是蚂蚁金服自主研发的金融级分布式中间件,包含构建金融级云原生架构所需的各个组件,包括微服务研发框架,RPC 框架,服 ...
- 痞子衡嵌入式:恩智浦MCU安全加密启动一站式工具NXP-MCUBootUtility用户指南
NXP MCU Boot Utility English | 中文 1 软件概览 1.1 介绍 NXP-MCUBootUtility是一个专为NXP MCU安全加密启动而设计的工具,其特性与NXP M ...
- 基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)
今天我们来盘一盘Socket通讯和WebSocket协议在即时通讯的小应用——聊天. 理论大家估计都知道得差不多了,小编也通过查阅各种资料对理论知识进行了充电,发现好多demo似懂非懂,拷贝回来又运行 ...
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- 微信小程序性能优化之一
性能优化 界面和业务逻辑之间事件交互小程序调用nativeNative回调小程序 图片源文件优化 渲染优化 ---------------------------------------------- ...
- WIN10安装不上IIS,使用IISExpress作为发布服务
[背景] 本人开发Win程序,需要调用网站资源作为Win程序的辅助功能,为此需要本地开发环境支持IIS.最近重装系统,VS安装完后,接着再安装IIS,可以在添加删除程序中反复尝试,均告安装失败提示.最 ...
- react异步加载组件
1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...
- Hacking HackDay: Albania
概述: Name: HackDay: Albania Date release: 18 Nov 2016 Author: R-73eN Series: HackDay 下载: https://down ...
- Android Studio Error:Execution failed for task ':app:preDebugAndroidTestBuild'.彻底解决的方法以及修改AScompileSDKVersion
Error Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > Conflict with dependency ...