自定义指令实例示例和分析

最新推荐文章于 2022-10-11 17:00:51 发布
最新推荐文章于 2022-10-11 17:00:51 发布
阅读量581 收藏
点赞数
分类专栏： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ygy211715/article/details/89469697
版权

今天要尝试写一个指令，因为，有个人跟我说，如果只是业务上的问题能解决但不尝试新的东西，不会有什么进步。

这个指令的功能是点击编辑图标，会出来输入框让用户输入，输入完毕以后点击对号图标则保存该数据到数据库，点击叉则取消保存到数据库。

//编辑完成状态

//编辑状态

首先看下指令的声明

html代码

指令绑定

link方法中的三个参数，分别代表该指令的作用域，绑定指令的元素，绑定指令的元素的属性

第一个参数scope，如果在指令中声明了自己的scope，那么这个scope指的就是这个指令的scope，例如本例中scope中能看到的数据hcAppDesc,hcAppNs,hcAppName

如果没有声明自己的scope，则这里指的就是父级的scope，也就是绑定指令的元素所在的控制器的scope

@：代表的是需要绑定指令的元素传过来一个字符串

&：代表的是需要绑定多个指令传过来一个方法，在指令中使用该方法进行业务实现

element也就是绑定元素的指令，attr指的是绑定指令的元素的属性，例如本例中打印element和attr的值在控制台中显示如下

我的指令是绑定给一个span标签，该标签的class是inline

 

 

 

ygy211715
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实战-完全掌握Vue自定义指令
yyds2026的博客
03-01 363
除了核心功能默认内置的指令 (v-model和v-show等)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-modelv-onv-forv-if等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼~
Vue自定义指令（实例分析）
super码力的博客
04-20 1249
Vue的自定义指令，了解其中的原理，才知道如何去自定义指令，内部包含完整实例解析
Vue2.0自定义指令与实例的属性和方法
weixin_34381666的博客
07-08 605
前言 本文主要介绍自定义指令、生命周期、计算属性和实例的属性和方法 如果有需要源代码，请猛戳源代码 本文首发地址为GitHub博客,写文章不易，请多多支持与关注！ 一、自定义指令 Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令，第二个参数可以是对象数据，也可以是一个指...
自定义指令的介绍与案例
weixin_48864616的博客
01-11 768
自定义指令分为全局指令 和局部指令 自定义指令 官方api 文档里有这么一句话：对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 1.全局指令 举例1：让指定文本框自动获取焦点 如果我们想实现这个例子，原生js的写法是： //原生js写法：网页一打开，就让指定的输入框自动获取焦点 document.getElementById('search').focus() 但我们不建议这样做。我们可以通过Vue中的自定义指令来实现这个例子。 1.1 定义 所谓全局指令，是指可以在多个vue实例中使用的
vue的自定义指令
zyf971020的博客
09-29 751
vue自定义指令
Vue2自定义指令及事例
qq_54598736的博客
10-11 1025
Vue2自定义指令及事例
vue2.0自定义指令示例代码详解
10-17
指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记。这篇文章主要介绍了vue2.0自定义指令的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue自定义指令拖拽功能示例
12-09
下面给大家分享vue自定义指令拖拽功能代码，具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name=...
AngularJS实现自定义指令与控制器数据交互的方法示例
10-19
主要介绍了AngularJS实现自定义指令与控制器数据交互的方法,结合具体实例形式分析了AngularJS自定义指令的实现以及与控制器数据交互的操作技巧,需要的朋友可以参考下
使用Angular自定义字段校验指令的方法示例
11-28
这里是根据官网实例自定义MAC地址的正则校验，环境为Angular： 7.2.0 ， NG-ZORRO：v7.0.0-rc3 添加指令 /shared/validator.directive.ts 注册到 NG_VALIDATORS 提供商中 providers: [ {provide: NG_VALIDATORS,...
自定义指令有什么用？自定义指令的语法
jia1532097285的博客
06-12 540
自定义指令的用法
vue自定义指令用法经典实例小结
12-29
本文实例总结了vue自定义指令用法。分享给大家供大家参考，具体如下： 自定义指令: 一、属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-red=参数></div> 指令名称:     v-red  ->  red * 注意: 必须以 v-开头 拖拽: 二、自定义元素指令:（用处不大） Vue.elementDirective('zns-red',{ bind:function(){ this.el.style.background='red'; } }); 自定义指令写法
vue自定义指令directive实例详解
08-28
主要介绍了vue自定义指令directive的相关资料，下面通过实例给大家介绍,需要的朋友可以参考下
Vue 自定义指令功能完整实例
10-16
主要介绍了Vue 自定义指令功能,结合完整实例形式分析了vue.js自定义指令相关实现与使用操作技巧,需要的朋友可以参考下
vue自定义指令用法
u010007013的博客
05-12 508
在vue中，普通 DOM 元素进行底层操作，这时候就可能用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令。 自定义指令和自定义组件一样，也是先注册后使用，其注册和组件的注册很类似，也分为全局注册和局部注册。只是注册组件时是使用的component关键字，而注册指令时要使用directive关键字。 全局注册使用自定义指令： Vue.directive('mydirective',{ // 钩子函数bind：只调用一次，指令第一次绑定到元素时调用。 // 在这里可以进行一次性的
vue自定义指令实例使用（实例说明自定义指令的作用）
weixin_30538029的博客
06-29 957
在写vue项目的时候，我们经常需要对后台返回的数据进行大量的渲染操作，其中就包含了大量的对特殊数据的进一步处理，比如说时间戳、图片地址、特殊数据显示等等特殊数据处理改进。 其实遇到这种情况，通过Vue过滤器filter，或者给Vue下面原型方法里添加自定义方法都可以解决我们的问题，不过我们要说的是自定义指令，前面两种方式有他们好处，自定义指令也有自己独特的优点，比如说自定义指令自身就包含一系列生...
自定义指令实例
qq_21205435的专栏
03-17 488
在网上找到一个好的例子，初学自定义指令的可以看看： js代码 var myApp = angular.module("myApp", []); // 添加 controller myApp.controller("myCtrl", function($scope) { $scope.customerName = "葡萄城控件"; $scope.credit = 8800;
自定义指令介绍与案例实践
勾勾的博客
06-21 305
自定义指令自定义指令介绍什么是自定义指令自定义指令的组成自定义指令的参数自定义指令简单案例 自定义指令介绍 什么是自定义指令 Vue.directive( id, [definition] ) 自定义指令介绍 directives - 对普通 DOM 元素进行底层操作 官方说法：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到
vue 自定义指令（directive）实例
wandoumm的博客
05-15 2068
二、自定义指令详解钩子函数：directive.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566/** * 自定义指令 */import Vue from 'vue' /** * 模板 * v-la...
vue自定义指令面试题
最新发布
09-23
vue自定义指令是一种在Vue.js中定义的特殊行为，可以用于对DOM元素进行操作和交互。在Vue中，我们可以通过自定义指令来扩展指令库，以便根据需要添加特定的功能。 在Vue中，创建自定义指令的方法是通过在Vue实例的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值