vue 自定义指令directive 使用方法详解

最新推荐文章于 2023-04-14 09:14:12 发布
最新推荐文章于 2023-04-14 09:14:12 发布
阅读量415 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js javascript es6 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45473986/article/details/106121359
版权

自定义指令

局部定义方式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义指令(局部)</title>
</head>
<body>
    <div id="box">
    	<div class="box" v-zhilin="data"></div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
	new Vue({
		el:"#box",
		data:{
			data:'数据'
		},
		directives:{
			zhilin:(ele,val)=>{
				console.log(ele)//元素本身<div class="box"></div>
				console.log(val.value)//指令传入的值 '数据'
			}
		}
	})
</script>
</html>

全局定义方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义指令(全局)</title>
</head>
<body>
    <div id="box">
    	<div class="box" v-zhilin="data"></div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
	Vue.directive('zhilin',(el,val)=>{
		console.log(ele)//元素本身<div class="box"></div>
		console.log(val.value)//指令传入的值 '数据'
	})
	new Vue({
		el:"#box",
		data:{
			data:'数据'
		}
	})
</script>
</html>
Web-jxc
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
doc---vue-cli脚手架项目问题总结（7）——vue的directives自定义指令的使用
qq_38185872的博客
04-14 270
##、directives自定义指令 // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) // 注册一个局部自定义指令 v-focus directives: { foc...
指令Vue.directive使用教程
qq_51384850的博客
03-23 1497
【vue开发】vue指令Vue.directive使用教程 1.指令的注册 指令跟组件一样需要注册才能使用，同样有两种方式，一种是全局注册: Vue.directive('dirName',function(){ 　　//定义指令 }); 另外一种是局部注册： new Vue({ 　　directives:{ 　　　　dirName:{ 　　　　　　//定义指令 　　　　} 　　} }); 2.指令的定义 指令定义，官方提供了五个钩子函数来供我们使用，分别代表了一个组件的各个生命周期 bind: 只调用
Vue自定义Directive
cangqiong_xiamen的博客
12-28 103
Vuejs除了自身提供的 v-if, v-model 等标准的Directive之外， 还提供了非常强大的自定义功能。 使用这个功能，我们就可以定义属于我们自己的Directive. 例子 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></s...
directive-x:JSX指令
05-19
指令X JSX指令 Directive-X是JSX扩展，可简化JSX中的编码。 它使用Babel转换其“ xProps ”（操纵JSX元素结构）。 入门 安装 通过npm安装软件包： npm install directive-x --save-dev 由于Directive-X是Babel插件，因此您需要将其包含在.babelrc文件中： { "plugins" : [ "es2015" , "react-preset" , "directive-x" ] } 如果愿意，也可以将其包含在package.json文件中。 用法 Directive-X允许您避免初学者发现讨厌JSX的常见宵禁，从而使您可以编写更好的JSX。 检查一下： x重复 xRepeat指令/ prop允许您像ng-repeat一样迭代数组。 但是，在对其进行编译后，它将通过使用Array.map()函数
vue自定义指令、JSX语法和过滤器
攀登Fox的博客
06-05 3317
目录1、自定义指令1.1、全局指令1.2、局部指令2、JSX语法3、过滤器3.1、全局过滤器3.2、局部过滤器 1、自定义指令 1.1、全局指令 在main.js中使用directive()函数自定义一个v-focus全局指令（实际开发过程中，我们可以创建一个js文件专门管理自定义全局指令，然后在main.js中引入该文件即可） import Vue from 'vue' import App from './App' //自定义全局指令 v-focus Vue.directive('focus',{
学习AngularJs:Directive指令用法（完整版）
10-22
主要学习AngularJs:Directive指令用法，内容很全面，感兴趣的小伙伴们可以参考一下
vue自定义指令directive实例详解
08-28
Vue 自定义指令Directive 实例详解 Vue 自定义指令Directive 是一种强大的工具，允许开发者注册自己的指令，以便于更好地操作 DOM 元素。在 Vue 中，自定义指令Directive 可以分为全局指令和局部指令两种。 全局...
Vue.directive自定义指令的使用详解
12-04
- 在Vue中，创建自定义指令使用`Vue.directive()`方法。以拖拽为例，我们可以定义一个名为`v-drag`的指令。在HTML中，通过`<div v-drag>`将该指令应用到元素上。 - 指令的生命周期中有多个钩子函数，比如`inserted...
vue自定义指令实现方法详解
01-21
本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考，具体如下： vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？ 自己定义的指令就是自定义指令。 语法： Vue.directive(id, definition...
directive-自定义指令的方法.md
flyingpig2016的博客
07-18 1292
02directive——Angularjs的创建指令方法restrict 值分类: E 作为元素名使用,例如：<hello></hello> A 作为属性使用(默认),例如：<div hello></div> C 作为类名使用 , 例如：<div class="hello"></div> M 作为注释使用, 例如：<!--directive:hello--> directive的templa
Angularjs directive方法
氏张
05-22 357
app.directive("ishello", function () { return { //element "A" 属性 "C" Class A的调用方法就是在某一个标签里面写directive定义的属性名,E的调用方法就是将template替换到元素里面,C的调用方法就是class="ishello" restric...
Vue通过directive自定义指令动态获取数据字典并缓存
忍法阡陌的博客
08-02 6279
业务场景如下： 后端设计了字典表结构如下： 属性 属性名 id ID code 字典代码 name 字典名 type 字典类型 description 字典描述 通过字典类型（type）查询后端接口返回的数据结构如下： { status:true, data:[{ id:2, code:"TOKEN_STATUS_01", name:"OPEN"...
【vue】vue 自定义指令directive的使用场景:
SunPeng的博客
04-14 1417
【vue】vue 自定义指令directive的使用场景:
自定义指令获取data数据
weixin_46336091的博客
11-17 2097
在vue自定义指令中的this指向的是window，无法通过this获取实例中的da数据而自定义指令中的回调函数有里有两个参数参数1是指令绑定的dom对象参数2是指令绑定的对象在指令中若想地道道vue实例中的data数据，可以通过绑定值得方案传入【html】< div id = " app " > < div v-title = " title " > 我是标题
Vue非常好用的directive 方法指令
Luka
12-23 273
##参数1 ：*指令的名称，注意，在定义的时候，名称前面不需要加 v- 前缀，但在调用的时候，必须在指令名称前加上 v- 前缀来进行调用。value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。在每个函数中，第一个参数，永远是 el ，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象。###参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。name: 指令名，不包括 v- 前缀。
vue中自定义组件“ directives “的常用功能
WACBG的博客
03-12 1769
directives 可以全局使用以及组件内部定义使用 directives是什么？ 注册自定义的指令 directives有什么作用？ 对普通 DOM 元素进行底层操作，就会用到自定义指令 directives怎么使用？ .vue页面的使用 <template> <div> <button v-btn="txt" :data-msg="imgurl">{{ btntext }}</button> </div> </tem
vue的自定义指令及使用场景
winpanys的博客
04-05 646
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 一、注册自定义指令 全局注册：（一般使用写在自定义js中，在app.vue中引用该js的方式） // 注册一个全局自定义指令 `v-focus` ...
【深入vue3 之 directive 指令的使用与讲解】
热门推荐
从今年开始写写博客~~
01-26 2万+
自定义全局指令：实例app.directive() 参数： {string} name {Function | Object} [definition] 返回值： 如果传入 definition 参数，则返回应用实例。 如果不传入 definition 参数，则返回指令定义。 用法： 注册或检索全局指令。 自定义指令概念： 在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 自定义指令是vue提供给我们用原生DOM封装一系
【Vue2】自定义指令 directives & 过滤器 filter
Superman_H的博客
02-08 907
# 自定义指令 directives ## directives 的简写 - 我们可以通过配置项 `directives` 来自定义指令 - 自定义指令时直接写指令名 `XXX`，使用时需要加上前缀为 `v-XXX` ```html ``` ```js let vm = new Vue({ el: "#app", data: { num
vue自定义指令操作外部方法
最新发布
06-10
要在Vue自定义指令中调用外部方法，可以使用Vue的mixins功能。首先，需要在外部组件中定义一个mixin，该mixin包含需要在自定义指令中调用的方法。例如： ```javascript var MyMixin = { methods: { myMethod: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值