17_vue中全局自定义指令directive的使用

最新推荐文章于 2024-05-15 19:00:49 发布
最新推荐文章于 2024-05-15 19:00:49 发布
阅读量501 收藏
点赞数 1
分类专栏： Vue前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41865652/article/details/103175710
版权

1、 全局自定义指令如何定义

Vue的设置全局自定义指令的方法如下：

Vue.directive(
	'指令名称', {
		inserted: function(elem){回调函数需要执行的语句}
	})

options说明：
‘指令名称’ --自定义指令名称
inserted --代表回调函数引用名称；
function(elem){} --代表回调函数；

2、 全局自定义指令如何使用

定义成功了后，在html页面需要使用的指令的标签元素内使用"v-指令名称"进行调用。

3、 全局自定义指令调用实例演示

`实现的主要功能就是：通过vue的全局自定义指令给div标签下的p标签增加样式属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_vue中全局自定义指令的使用</title>
</head>
<body>
	<div class="app">
		<p v-chgstyle>123456789</p>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	// 全局自定义指令的使用
	// 第一：通过Vue的设置自定义指令的方法
	// Vue.directive('指令名称', {inserted: function(elem){}})进行定义
	// 第二：定义成功了后，在需要使用的指令地方使用"v-指令名称"进行调用
	Vue.directive('chgstyle', {
		inserted: function(elem){
			elem.style.color = 'red';
			elem.style.fontSize = '60px';
			elem.style.backgroundColor = 'lightgreen';
		}
	});
	var app = new Vue({
		el: '.app',
	})	
</script>
</html>
嫣夜来
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义指令（全局Vue.directive）(局部directive)
weixin_69742797的博客
05-26 627
1、目标：获取标签，扩展额外的功能； --两种语法-- 全局注册 1、Vue.directive('指令名称'，{inserted(){}}) Vue.directive('myfocus', { //inserted:钩子函数，el：指绑定的元素 inserted(el) { //打印出来看看有没有触发 console.log('123'); //元素聚焦 el.focus() } }) 局部注册 //局部指令 directives:
vue自定义指令directive的使用方法
10-17
1. **全局自定义指令**：通过 `Vue.directive()` 接口全局注册一个自定义指令。例如，创建名为 `demo` 的全局指令： ```javascript let Opt = { bind: function (el, binding, vnode) {}, inserted: function (el...
vue自定义指令定义及使用方式
grand_brol的博客
08-01 1901
全局自定义指令 Vue.directive('focus', { bind: function(el) { //表示当指令绑定到元素身上时会执行bind函数，只执行一次 //el代表被绑定指令的哪个元素，且函数中的第一个参数都为el.el是一个原生的js对象，里面有些元素的dom方法 // 绑定到元素身上时，数据尚在内存中，无法在页面中显示，所以el.focus()没有效果，而console.log('你好呀')可以显示 el.focus()
Vue.directive注册(全局与局部)自定义指令使用详解与实战
最新发布
码海扬帆：前端探索之旅的博客
05-15 1004
Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) })：在 install 方法中，使用 Object.keys(directives) 获取 directives 对象的所有键名（即 draggable 和 longpress），然后通过 forEach 循环遍历这些键名。布局自定义指令：注册了布局自定义指令后，可以在 Vue 模板中使用该指令。Vue自定义指令有全局注册和局部注册两种方式。
vue 全局注册自定义指令 自动化引入 vue.directive 格式化文本
qq_36287830的博客
11-15 929
vue 全局注册自定义指令 自动化引入 //注册文件directive/index.js import Vue from 'vue'//引入vue const directives = require.context('../directive', true, /(?<!index)\.js$/); //实现自动化导入 文件路径，是否遍历子目录，正则匹配 (?<!index)//排除.js前跟着index的文件 directives.keys().map(item => {//在关键字中遍
基于Vue.directive全局指令实现防抖、节流功能
weixin_44153190的博客
05-10 352
基于Vue.directive全局指令添加防抖、节流功能
Vue.directive 自定义指令（全局）
qq_37863511的博客
04-07 428
Vue指令在日常开发中给我们带来了非常便捷的帮助，常用的指令有：v-bind，v-on，v-model，v-show，v-if，v-else，v-for，v-else-if，v-text，v-html，v-pre，v-cloak，v-once，这些都是常用Vue内置指令，就不详细叙述了。 简单示例 // 绑定自定义指令（字体加粗） <span v-max>字体加粗了</span> Vue.directive('Weight', { // 绑定的元素插入DOM后 inse.
vue自定义指令directive实例详解
01-19
下面给大家介绍vue自定义指令directive，具体内容如下所示：   官网截图实例 vue除了一些核心的内部定义的指令（v-model,v-if,v-for,v-show）外，vue也允许用户注册自己的一些功能性的指令，有时候你实在是要对Dom...
详解Vue.directive 自定义指令
10-17
Vue.directive 是 Vue.js 框架中用于创建自定义指令的全局 API。自定义指令允许开发者扩展 Vue 的基础功能，实现一些特定的 DOM 操作或复杂行为。下面我们将深入探讨这个话题。 首先，我们要理解什么是全局 API。...
Vue.directive添加全局指令详解
weixin_30497527的博客
11-02 249
自定义指令创建： Vue.directive( 'mycolor(指令名称:推荐全部小写，驼峰命名会出现问题，看最后面)' , { 　　bind:function(){}, 　　//本例只介绍inserted 　　inserted:function(el, binding){ 　　　　el.style.color="red"; //第一种使用 　　　　el.style.color=b...
vue 注册或获取全局指令directive
01-07
注册方法 Vue.directive(‘my-directive’, { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) {{msg}} 更新 ```import Vue from 'vue'; Vue.directive(loading,{ update(el,binding,vnode){ if(binding.value){ co
vue源码解析：vue全局方法之Vue.directive、Vue.filter、Vue.component实现原理
lee前端技术站
07-17 648
之所以将directive、filter、component三个方法放到一起，是因为这三个方法实现的原理是一模一样的，在vue的源码中，也是一起实现的。 Vue.directive( id, [definition] ) Vue.component( id, [definition] ) Vue.filter( id, [definition] ) 参数： {string} id {Function} [definition] 作用： 注册或者获取全局的指令、组件、过滤器。 原理： src.
Vue.directive 指令的使用方法 ，控制元素 DOM
q515656712的博客
12-14 1195
指令 是Vue项目中的全局API    ，不能写在 局部方法里 例如 : computed:{ body.... } methods:{ body....  } Vue.directive使用方式：  打开页自动 面获取某个 input 焦点 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时...
Vue---自定义指令directive的全局注册和局部注册（含vue3）
COCOLI_BK的博客
10-14 3754
实现自动获取焦点(autofocus) // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) directives(局部组件自定义事件属性) 注意focus处的字段名要是事件名，而非自定义的名字 directives: { focus: { // 指令的定义 bind..
Vue入门指南——自定义全局指令和局部指令
Potry Code的博客
01-20 1763
目录：一、简介二、如何自定义指令1.自定义全局指令2.自定义局部指令三、以传参的方式进行指令设置四、函数简写 一、简介 当开发需求做一个自动获取焦点事件的时候，我们最原生的做法就是通过获取元素来注册事件, document.getElementById("search").focus(); 然而在vue中并不提倡我们直接操作DOM元素。那我们该怎么办呢？这时候就需要我们自定义指令来实现这个功能了...
75-局部自定义指令——bind和update方法
jolinoy的博客
07-08 420
75-局部自定义指令——bind和update方法这里通过directives指令实现。
Vue全局引入JS的方法
weixin_30947043的博客
11-01 1804
两种情况： 1. js为ES5的写法时，如下（自定义的my.js）: function fun(){ console.log('hello'); } 　Vue中的全局引入方式为，在index.html中通过如下方式引入即可： <script src="src/models/my.js"></script> 2. js...
Vue2 自定义全局指令Vue.directive和指令的生命周期
热门推荐
xuanwuziyou的专栏
09-03 1万+
在Vue中，自定义指令的生命周期，有5个事件钩子：1-bind 被绑定，  2-inserted 被插入， 3-update 开始更新， 4-componentUpdated 更新完成，5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。 例子如下： 页面一进来： 在控制台中设置一个新值： 再设置一个新值： 点击解绑，解除绑定(解除绑定之后，
vue2全局自定义指令
08-21
Vue 2 中可以通过 Vue.directive() 方法来定义全局自定义指令。下面是一个示例： ```javascript // main.js import Vue from 'vue' import App from './App.vue' // 自定义指令 Vue.directive('focus', { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值