0

0

vue.js指令是什么

coldplay.xixi

coldplay.xixi

发布时间:2020-11-18 13:40:03

|

2476人浏览过

|

来源于php中文网

原创

vue.js指令是许多内置的指令,比如【v-if】和【v-show】,这些丰富的指令能满足我们的绝大部分业务需求,自定义指令有钩子函数,如【bind、inserted、update】。

vue.js指令是什么

本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。

【相关文章推荐:vue.js

问题一:什么是vue.js中的自定义指令?

自定义一些指令对底层DOM进行操作

立即学习前端免费学习笔记(深入)”;

更多参考

Vue里面有许多内置的指令,比如v-if和v-show,这些丰富的指令能满足我们的绝大部分业务需求,不过在需要一些特殊功能时,我们仍然希望对DOM进行底层的操作,这时就要用到自定义指令。

问题二:自定义指令的几个钩子函数

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。

  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind:只调用一次,指令与元素解绑时调用。

问题三:钩子函数参数

除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

指令钩子函数会被传入以下参数:

1、el:指令所绑定的元素,可以用来直接操作 DOM 。

良精Wap企业网站管理系统 1.2
良精Wap企业网站管理系统 1.2

什么是企业WAP网站,企业3G网站 企业WAP网站一般是指展示企业形象,介绍企业产品的WAP手机网站或者3G手机网站,让客户可以通过手机就能了解一个企业的大体情况和产品内容,从而更广泛的宣传企业,赢得更多的客户关注度!一般企业WAP网站包括:公司介绍,产品介绍,企业新闻动态,服务范围介绍,留言板,企业招聘信息等内容,如果有特殊要求,我们也会按照客户的要求定做。 企业为何要建设手机WAP网站,3

下载

2、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 编译生成的虚拟节点。

3、oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

问题四:如何在vue-cli中使用自定义指令?

文件结构:

.
├── src
│   ├── directives
│   │    ├── index.js
│   │    ├── modules
│   └── main.js
└── ...

在modules下新建foucs.js下

// 聚焦指令
export default {
  bind (el, binding, vnode) {},
  inserted (el, binding, vnode) {
    el.focus()
  },
  update (el, binding, vnode) {},
  componentUpdated (el, binding, vnode) {},
  unbind (el, binding, vnode) {}
}

在src/directives/index.js下

import focus from './modules/focus'
export {focus}

在src/main.js下,使用directives自定义指令

//引入自定义指令
import * as directives from './directives'
//注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

在.vue组件中使用

相关免费学习推荐:JavaScript(视频)

相关专题

更多
PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

52

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

54

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

15

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

125

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

138

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

159

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 2.8万人学习

PHP入门速学(台湾同胞版)
PHP入门速学(台湾同胞版)

共10课时 | 1.2万人学习

Git版本控制工具
Git版本控制工具

共8课时 | 1.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号