Vue.js之自定义指令的使用

已于 2022-08-11 19:51:21 修改
阅读量329 收藏
点赞数
分类专栏： JavaScript 文章标签： vue.js javascript
于 2022-07-13 17:01:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827643/article/details/125767564
版权

目录

1.自定义全局指令

2.自定义局部指令

         3.自定义指令的不同函数

本文主要介绍如何在Vue.js如何自定义全局和局部指令，以两个案例进行介绍，分别自定义v-focus和v-color指令。v-focus实现在表单输入框获取焦点，v-color可设置元素的背景颜色。

1.自定义全局指令

基本语法如下：Vue.directive(指令名,function(绑定的元素，......){

})

 Vue.directive('focus', {
            inserted: function(element) {
                element.focus()
            }
        })
        Vue.directive('color', {
            bind: function(e, b) {
                e.style.backgroundColor = b.value
            }
        })

 定义完即可在元素上使用，需要加上“v-”前缀

 <div id="app">
        <div><input type="text" name="" id=""></div>
        <div><input type="text" name="" id="" v-focus></div>
        <div><input type="text" name="" id="" v-color="color"></div>
    </div>

 完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div><input type="text" name="" id=""></div>
        <div><input type="text" name="" id="" v-focus></div>
        <div><input type="text" name="" id="" v-color="color"></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        Vue.directive('focus', {
            inserted: function(element) {
                element.focus()
            }
        })
        Vue.directive('color', {
            bind: function(e, b) {
                e.style.backgroundColor = b.value
            }
        })
        new Vue({
            el: '#app',
            data: {
                color: '#674522'
            },
            methods: {

            }
        })
    </script>
</body>

</html>

2.自定义局部指令

在directives属性中添加局部指令

 new Vue({
            el: '#app',
            data: {
                color: '#674522'
            },
            methods: {},
            directives: {
                focus: {
                    inserted: function(element) {
                        element.focus()
                    }
                },
                color: {
                    bind: function(e, b) {
                        e.style.backgroundColor = b.value
                    }
                }
            }
        })

 使用方法同全局指令一样，在相应元素中添加自定义的指令即可

 <div id="app">
        <div><input type="text" name="" id=""></div>
        <div><input type="text" name="" id="" v-focus></div>
        <div><input type="text" name="" id="" v-color="color"></div>
    </div>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div><input type="text" name="" id=""></div>
        <div><input type="text" name="" id="" v-focus></div>
        <div><input type="text" name="" id="" v-color="color"></div>
    </div>

    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                color: '#674522'
            },
            methods: {},
            directives: {
                focus: {
                    inserted: function(element) {
                        element.focus()
                    }
                },
                color: {
                    bind: function(e, b) {
                        e.style.backgroundColor = b.value
                    }
                }
            }
        })
    </script>
</body>

</html>

效果如图：

第二个input文本框会自动获取焦点，第三个input文本框的背景会变色

3.自定义指令的不同函数

（1）只写function()时，会在绑定数据及更新时调用

（2）可写三个函数，bind绑定时调用,inserted插入时调用,update更新时调用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div><input type="text" v-big="num"></div>
        <div><input type="text" v-small="num"></div>
        <div><button @click="add">点击</button></div>
    </div>
    <script>
        //绑定和更新时调用
        Vue.directive('small', function(e, b) {
            e.value = b.value - 100
        })


        new Vue({
            el: '#app',
            data() {
                return {
                    color: 'skyblue',
                    size: '100px',
                    num: 100
                }
            },
            methods: {
                add() {
                    this.num++
                }
            },
            directives: {
                big: {
                    // 绑定数据时
                    bind(e, b) {
                        e.value = b.value
                    },
                    // 插入元素时
                    inserted(e, b) {
                        e.focus()
                    },
                    // 更新时
                    update(e, b) {
                        e.value = b.value * 100
                    }
                }
            }
        })
    </script>
</body>

</html>

cloudOnSkyline
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
标准盒模型与怪异盒模型的区别
blog
12-24 1万+
一. 清除浮动的方式。 使用overflow属性来清除浮动 (overflow: hidden) 二. visibility: hidden 与 display: none 的区别。 三. 谷歌浏览器的盒子与IE浏览器的盒子区别。 四. 让盒子垂直水平居中的方式。
标准盒模型和怪异盒模型的区别？
ProgrammingWhite的博客
02-23 5402
什么是怪异盒模型？今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里。 首先要知道，什么是盒模型？ 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区content、补白（填充）padding、边框border、边界(外边距)margin,这就是盒模型。 我的理解是将网页分为不同的区域，每...
Vue.js（自定义指令）
最新发布
Luo3255069063的博客
04-18 505
【代码】Vue.js（自定义指令）
CSS标准盒子模型和怪异盒子模型
m0_61672533的博客
12-27 914
CSS标准盒子模型和怪异盒子模型
标准盒模型与怪异盒模型的区别 及 box-sizing的应用
weixin_44806034的博客
01-21 261
1、盒子模型（box model） 在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin） 2、标准盒模型与怪异盒模型 对比两种模型的区别 1.标准盒模型 标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+bo
标准盒模型和怪异盒模型的区别
weixin_46386906的博客
02-23 206
标准盒模型和怪异盒模型的区别 标准盒模型 1、 标准盒模型的作用：规定了网页元素如何显示以及元素间相互关系 2、 盒模型的组成： Content(内容区) Padding(填充区) Border(边框区) Margin(外边界区) Content:元素的宽和高 Border：盒子的边缘 Padding:盒子边缘于内容之间的空白 padding： 作用...
vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）
10-19
主要给大家介绍了关于vue.js内部自定义指令与全局自定义指令的实现方法，vue.js中实现自定义指令的主要是利用directive，directive这个单词是我们写自定义指令的关键字，需要的朋友们下面跟着小编来一起学习学习吧。
Vue.js自定义指令学习使用详解
10-16
主要为大家详细介绍了Vue.js自定义指令的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js通过自定义指令实现数据拉取更新的实现方法
01-19
前言 这篇文章的代码片段位于 vue 的单文件组件中，即以 .... // 定义自定义指令的绑定值 ifUpdate:true } } 第二步 然后要使用 ajax 的话，要在 index.html 里引入 jquery，这样就可以全局使用了： // index.html
Vue.JS入门教程之自定义指令
11-28
Vue.js 允许你注册自定义指令，实质上是让你教 Vue 一些新技巧：怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要...
html css开关按钮样式,纯CSS实现开关按钮
weixin_42522953的博客
06-07 4549
上面这种开关按钮在现代网页UI设计中经常出现，代替了以前丑陋的checkbox。在很多UI框架中如elementUI都有组件可以直接使用。但是画出这样一个开关是十分简单的，不需要借助JS代码就可以实现。核心思路就是将原有input框进行隐藏，通过label标签(自带选中功能)和伪元素就可画出开关。画出开关后实现点击效果就很简单了，利用CSS3提供的伪类:checked，即选中checkbox的时候...
标准盒模型与怪异盒模的区别.html
02-23
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别，他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
HTML5/CSS3开关按钮 立体3D按钮
08-23
之前我介绍过几款漂亮的CSS3开关切换按钮，比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换按钮。今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。
js制作的开关灯小游戏
01-24
一个利用JavaScript制作的简单的开关灯小游戏，暂时没有得分
JS/jQuery实现简单的开关灯效果【案例】
01-19
本文实例讲述了JS/jQuery实现简单的开关灯效果。分享给大家供大家参考，具体如下： 实现效果: html结构只有两个button标签 <button id=left>开灯</button> <button id=right>关灯</button> 方法一:用原生js来做 [removed] //1.获取页面元素 var left=document.getElementById('left'); var right=document.getElementById('right'); //注意获取body的方式有两种 //第一种:直接使用document的点语
js实现简单鼠标跟随效果的方法
10-24
主要介绍了js实现简单鼠标跟随效果的方法,涉及javascript鼠标事件与坐标获取等相关技巧,非常具有实用价值,需要的朋友可以参考下
分时显示不同图片，显示不同的问候语
weixin_43188011的博客
09-16 950
【案例】 分时显示不同图片，显示不同的问候语 要求： 根据不同的时间，页面显示不同的图片，同时显示不同的问候语。 1：如果是早上时间打开页面，显示上午好，显示上午图片； 2：如果是下午时间打开页面，显示下午好，显示 下午图片； 3：如果是晚上时间打开页面，显示晚上好，显示晚上图片； 分析 1：根据系统不同时间来判断，所以需要用到日期对象 2：利用多分支语句来设置不同的图片。 3：需要一个图片标签，并根据时间修改图片，就需要用到操作元素src属性 4：需要一个div元素，显示不同的问候语，修改元素内容即可。
js特效——根据鼠标位置移动的图片
qq_52430605的博客
09-08 1961
看到别人的网站上有这种特效，便打算学习后自己做出来
Vue 学习笔记
予歌的博客
07-27 1074
一、创建一个界面 第一个标题没啥用处 故我删掉了 二、vue 关键字 2.1 v-if条件判断 <div id="app"> <label> <h2 v-if="isShow">test</h2> <h2 v-else>1010101 else</h2> </label> <button type="button" @click="btnClick">btn</button&gt
Vue.js的自定义指令v-scroll
04-26
Vue.js 的自定义指令 v-scroll，可以绑定到 DOM 元素上，以实现滚动时触发相应的函数或操作。例如，当用户滑动页面时，可以触发加载更多的数据或执行一些特定的动画效果等。 以下是一个使用 v-scroll 指令的示例： ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值