vue基础之指令(内置指令,自定义指令,指令的生命周期函数)
指令很多,先了解一下,在 vue 中,有很多内置的指令.
比如:
v-for
用于遍历v-if & v-show
用于隐藏和显示元素(区别在于后者是修改 display:block|none,前者是不创建把元素从dom中删除或者创建.v-bind:
属性绑定,把数据绑定在HTML元素的属性上.v-html & v-text
把数据绑定在HTML元素的属性上,作用同 innerHTML & innerTextv-on:
绑定HTML元素事件v-if & v-else-if & v-else
条件渲染v-model
绑定表单元素,实现双向绑定.
等等…
所以,关于指令,我们可以总结下面几点:
- 指令是写在 HTML 属性地方的.
- 指令都是以 v- 开头的.
- 指令表达式的右边一般也可以跟值 v-if = false
实例:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id='app'><input type="text"><input type="text" v-focus v-color="'red'" placeholder="我有v-focus,所以,我获取了焦点"></div><script>// 定义一个全局指令Vue.directive('focus', {inserted(el) {el.focus()}})var vm = new Vue({el: '#app',data: {},methods: {},// 定义一个局部指令directives: {color: {bind: function (el, binding) {// 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次// 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象// 在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用// 因为,一个元素,只有插入DOM之后,才能获取焦点// 和样式相关的操作,一般都可以在 bind 执行console.log(binding)el.style.color = binding.value},inserted: function (el) { // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】console.log(el);// 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效},updated: function (el) { // 当VNode更新的时候,会执行 updated, 可能会触发多次}}}});</script>
</body></html>
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:
只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。一般和样式相关的操作在这里执行inserted:
被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。一般js行为有关的在这里执行update:
所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated:
指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind:
只调用一次,指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数参数
指令钩子函数会被传入以下参数:
el:
指令所绑定的元素,可以用来直接操作 DOM。binding:
一个对象,包含以下属性:name:
指令名,不包括 v- 前缀。value:
指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。oldValue
:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都 可用。expression
:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。arg
:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。
函数简写
在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:
Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value
})
vue基础之指令(内置指令,自定义指令,指令的生命周期函数)相关推荐
- Vue 基础之常用内置指令
Vue 基础之常用内置指令 描述 指令 内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
- JavaWeb第三讲 JSP内置对象、基本动作指令、常见编译指令及四大作用域
JSP内置对象.基本动作指令.常见编译指令及四大作用域 (一) JSP工作原理 当一个jsp页面第一次被访问的时候,jsp将执行以下三个步骤,之后的访问速度会因为class文件已经生成而大大提高,当j ...
- JDK注解(内置和自定义)
JDK注解(内置和自定义) 1.内置 @Override:可以确保重写的方法,的确存在与父类.接口中,可以有效避免单词拼错的情况 @Deprecated:给用于提示,该方法由于安全,性能问题等,已经不 ...
- vue支付宝html,vue 解决在微信内置浏览器中调用支付宝支付的情况
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转 ...
- Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
- vue中的指令——内置指令
什么是指令 指令是带 v- 前缀的特殊属性,其值限定为单个表达式. vue提供了少量指令供大家使用,在一定程度上简化了开发过程.当然除了内置指令,还有自定义指令,本篇就是只对内置指令进行讲解. 内置指 ...
- Vue.js入门 0x2 内置指令(1)
基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 , 常和 css的 display: none:配合使用. <div id= ...
- JavaScript基础语法_JavaScript内置对象
JavaScript内置对象 JavaScript中的对象分为3种:自定义对象,内置对象,浏览器对象 前两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于js独有 内置对象就是指J ...
- 信号 应用场景 内置信号 内置信号操作 自定义信号
信号 在某些操作前后,允许特定操作 应用场景 在数据库操作前后,添加日志. 内置信号 Model signalspre_init # django的modal执行其构造方法前,自动触发post_ini ...
- 列举5个python内置函数和使用方法_Python基础-----函数、内置函数、递归等练习
!/usr/bin/env python -*- coding:utf-8 -*- ########################################################## ...
最新文章
- 程序员如何才能提高自己?通过一次重构代码讲解自己的感受【有代码比较】...
- 读书-算法《程序设计导引及在线实践》-简单计算题5:装箱问题
- MySQL高级 - SQL技巧 - 数字函数与字符串函数
- 20210217:力扣第228周周赛(上)
- 25. 文件系统——源程序的编译安装(make,make install,ldd,ldconfig -v)
- 虚拟软件VMware workstation安装
- java堆 数据结构 堆_快速堆数据结构
- c语言32bit数大小端转换,玩儿转C语言:bit 位域大小端转换及传输
- win10背景色改成豆沙绿,解决锁屏后失效方法
- Python 与金融科技2|数据的滑动平均值及多图可视化
- DID去中心化身份认证技术调研
- outlook正在使用outlook数据文件(.ost)旧的副本,请退出outlook,删除此文件,然后重启outlook。
- 新西兰本科计算机专业挂科率,2020年新西兰通信工程专业挂科率高吗?
- NOIP2015 口胡题解
- JVM vs DVM
- 罗技 连点 脚本_轻松办公 如入无人之静 罗技MK295静音键鼠套装全球首发震撼上市...
- Vue 中 css scoped 样式穿透 ( stylus[] / sass / less[/deep/] )
- HIN 异构信息网络(Heterogeneous Information Network)
- 研发4面真题解析(Java岗):和阿里大佬的技术面谈,隔壁都馋哭了
- python 3标准库道格_《PYTHON 3标准库 [美] 道格·赫尔曼》[美] 道格·赫尔曼(Doug Hellmann)著【摘要 书评 在线阅读】-苏宁易购图书...
热门文章
- C++头文件预编译与命名空间使用方法
- Infopath 2013 通过UserProfileService读取AD用户信息
- IOS开发之把 Array 和 Dictionaries 序列化成 JSON 对象
- 拓端tecdat|R语言GGPLOT2绘制KOLMOGOROV-SMIRNOV KS检验图ECDF经验累积分布函数曲线可视化
- 拓端tecdat|Python支持向量回归SVR拟合、预测回归数据和可视化准确性检查实例
- 拓端tecdat|约会数据动态可视化分析:R语言使用ggplot和ganimate制作的动画图
- 拓端tecdat|R、Python、Open Refine采集pdf数据,清理数据和格式化数据
- springboot整合mybatis-plus多数据源分别连接mysql和oracle
- rdbms mysql_不同RDBMS下Join 用法 - MySQL
- 【鲲鹏HCIA考试】随堂习题卷六