当前位置: 开发笔记 > 前端 > 正文

vue自定义指令的创建和使用方法实例分析

作者：手机用户2502908547 | 来源：互联网 | 2022-09-03 14:03

这篇文章主要介绍了vue自定义指令的创建和使用方法,结合完整实例形式分析了vue.js创建及使用自定义指令的相关操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了vue自定义指令的创建和使用方法。分享给大家供大家参考，具体如下：

一、自定义指令的创建和使用

Vue自带的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...
但是这些指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，如何来自定义指令.

1、自定义指令

① 创建

new Vue({
　　directives:{
　　　　change:{
　　　　　　bind:function(){},
　　　　　　update:function(){},
　　　　　　unbind:function(){}
　　　　}
　　}
})

在自定义指令时，在指令对应的配置对象中有3个处理函数指令对应的操作

bind
　　指令在绑定到元素要执行的操作
update
　　如果在调用指令时候，传了参数，当参数变化时候，就会执行update所指定的方法
unbind
　　解绑要执行的操作

② 使用自定义指令

directives:{
　　hello:{
　　　　bind:function(){},
　　　　update:function(){},
　　　　unbind:function(){}
　　}
}

使用：

v-hello

注意事项：

建议在给指令的命名采用小驼峰式的命名方式，比如changeBackgroundColor,在使用的时候，采用烤串式写法 v-change-background-color

（方法：参数，返回值）

bind方法以及update方法都是有参数的，
一个是el，对应的是调用指令的元素
一个bindings，是一个对象：name/rawName/value/oldValue...

`背景色`

这样也是可以的，但是写死了，不好

希望本文所述对大家vue.js程序设计有所帮助。

推荐阅读

js
1 Vue基础

Vue基础一、什么是Vue1.1概念Vue(读音vjuː，类似于view)是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不 ... [详细]

蜡笔小新 2023-10-17 19:45:53
js
Vue 教程第一篇——基础概念

认识Vue关于Vue的描述有不少，不外乎都会拿来与Angular和React对比，同样头顶MVVM双向数据驱动设计模式光环的Angular自然被对比的最多，但到目前为止，Angul ... [详细]

蜡笔小新 2023-10-16 17:12:49
html
微软头条实习生分享深度学习自学指南

本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]

蜡笔小新 2023-12-14 20:58:32
html
阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾

本文介绍了阿里Treebased Deep Match(TDM)的学习笔记，同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法，再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用，并介绍了TDM的背景和优势。最后，文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]

蜡笔小新 2023-12-14 19:24:58
html
Lodop中特殊符号打印设计和预览样式不同的问题解析

本文主要解析了在Lodop中使用特殊符号打印设计和预览样式不同的问题。由于调用的本机ie引擎版本可能不同，导致在不同浏览器下样式解析不同。同时，未指定文字字体和样式设置也会导致打印设计和预览的差异。文章提出了通过指定具体字体和样式来解决问题的方法，并强调了以打印预览和虚拟打印机测试为准。 ... [详细]

蜡笔小新 2023-12-14 18:29:32
html
Final关键字的含义及用法详解

本文详细介绍了Java中final关键字的含义和用法。final关键字可以修饰非抽象类、非抽象类成员方法和变量。final类不能被继承，final类中的方法默认是final的。final方法不能被子类的方法覆盖，但可以被继承。final成员变量表示常量，只能被赋值一次，赋值后值不再改变。文章还讨论了final类和final方法的应用场景，以及使用final方法的两个原因：锁定方法防止修改和提高执行效率。 ... [详细]

蜡笔小新 2023-12-14 18:07:46
json
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
html
电销机器人代理需要注意哪些问题？创业者小心这些骗局

电销机器人作为一种人工智能技术载体，可以帮助企业提升电销效率并节省人工成本。然而，电销机器人市场缺乏统一的市场准入标准，产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质，尤其要关注语音识别率。 ... [详细]

蜡笔小新 2023-12-14 16:31:48
html
【译】发送表单数据

这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细]

蜡笔小新 2023-12-14 16:19:10
html
如何去除Win7快捷方式的箭头

本文介绍了如何去除Win7快捷方式的箭头的方法，通过生成一个透明的ico图标并将其命名为Empty.ico，将图标复制到windows目录下，并导入注册表，即可去除箭头。这样做可以改善默认快捷方式的外观，提升桌面整洁度。 ... [详细]

蜡笔小新 2023-12-14 16:17:05
html
数据库的存储结构及其重要性

本文介绍了数据库的存储结构及其重要性，强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离，可以实现对物理存储的重新组织和数据库的迁移，而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构，并介绍了表空间的概念和作用。 ... [详细]

蜡笔小新 2023-12-14 16:00:02
html
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
js
用Vue实现的Demo商品管理效果图及实现代码

本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]

蜡笔小新 2023-12-10 15:14:25
js
【Vue基础】监听属性watch

Vue监听属性是watch，我们可以通过watch来响应数据的变化。代码示例： ... [详细]

蜡笔小新 2023-10-16 19:33:09
js
Vue案例（搜索页面）

<!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]

蜡笔小新 2023-10-16 06:20:19

手机用户2502908547

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章