vue之自定义组件

时间：2022-09-28 21:48:06

除了核心功能默认内置的指令外，vue也允许用户注册自定义指令。虽然在vue2.0中，代码复用和抽象的主要形式是组件，但是有些情况下，我们仍需要对普通DOM元素进行底层操作，这个时候就需要用到自定义指令，例如，我们希望将元素的背景色变为红色，就可以通过指令实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style></style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

        <p v-red>aaaaa</p>

        <p v-red>12345</p>

        <p v-red>自定义</p>

    </div>

    <script>

        Vue.directive('red',function(){

            this.el.style.background='red';

        });

        var vm=new Vue({

            el:'#box',

            data:{

                msg:'welcome'

            }

        });

    </script>

</body>

</html>

vue之自定义组件

上面简单的实例中，主要是展示了自定义组件的用法：

vue之自定义组件

其中"red"为我们自定义的指令，在使用的时候，需要加上"v-"的前缀，后面接的方法是该指令需要实现的功能；"el"是指令所绑定的元素，可以用来直接操作DOM。

自定义指令传参

在上面的自定义指令中，我们实现了将元素背景色变为红色，那么如果我们需要将背景色改为蓝色，只是颜色改变了，其他的都是一样的，若这样再重新定义一个指令，就完全没必要了，因此我们可以考虑传参的方法了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style></style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

        <p v-red='r'>aaaaa</p>

        <p v-red='g'>12345</p>

        <p v-red='p'>自定义</p>

    </div>

    <script>

        Vue.directive('red',function(color){

            this.el.style.background=color;

        });

        var vm=new Vue({

            el:'#box',

            data:{

                r:'red',

                g:'gray',

                p:'pink'

            }

        });

    </script>

</body>

</html>

vue之自定义组件

但是上面的这种的方式的要求是我们必须现在vue实例中声明这些颜色参数，并不能满足我们想要随意更换颜色的要求，因此，需要继续优化。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style></style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

        <p v-red="'red'">aaaaa</p>

        <p v-red="'gray'">12345</p>

        <p v-red="'pink'">自定义</p>

    </div>

    <script>

        Vue.directive('red',function(color){

            this.el.style.background=color;

        });

        var vm=new Vue({

            el:'#box',

        });

    </script>

</body>

</html>

自定义指令获取事件属性

和其他JavaScript事件一样，自定义指令事件也能获取事件属性，例如键盘事件，鼠标事件等，下面通过获取鼠标位置实现自定义拖拽指令。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

    </style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

        <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>

        <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>

    </div>

    <script>

        Vue.directive('drag',function(){

            var oDiv=this.el;

            oDiv.onmousedown=function(ev){

                var disX=ev.clientX-oDiv.offsetLeft;

                var disY=ev.clientY-oDiv.offsetTop;

                document.onmousemove=function(ev){

                    var l=ev.clientX-disX;

                    var t=ev.clientY-disY;

                    oDiv.style.left=l+'px';

                    oDiv.style.top=t+'px';

                };

                document.onmouseup=function(){

                    document.onmousemove=null;

                    document.onmouseup=null;

                };

            };

        });

        var vm=new Vue({

            el:'#box',

            data:{

                msg:'welcome'

            }

        });

    </script>

</body>

</html>

拖拽前：

vue之自定义组件

拖拽后：

vue之自定义组件

自定义元素指令

所谓自定义元素指令，就是指该指令能够像其他的元素如div，span等一样直接使用，既然是元素指令，自然就和其他的自定义指令不一样了，下面通过一个简单的例子来展示自定义元素指令的用法，依旧是改变元素的背景色，具体实现如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

    </style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

       <zns-red>自定义元素指令</zns-red>

    </div>

    <script>

        Vue.elementDirective('zns-red',{

            bind:function(){

                this.el.style.background='red';

            }

        });

        var vm=new Vue({

            el:'#box',

            data:{

                a:'blue'

            }

        });

    </script>

</body>

</html>

vue之自定义组件

自定义指令和自定义元素指令相比，主要存在三个不同之处：

  • 自定义指令使用elementDirective
  • 自定义指令的功能函数直接写在后面的方法中，自定义元素指令的功能函数必须写在钩子函数中（bind、inserted等）
  • 自定义指令在使用时，需要用v-开头，添加到需要的元素中；自定义元素指令则是直接像其他元素一样使用即可。

vue之自定义组件的更多相关文章

  1. vue中自定义组件（插件）

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  2. 【VUE】自定义组件

    [VUE]自定义组件 转载: ============================================ ======================================== ...

  3. vue的自定义组件和组件传值

    <div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...

  4. vue 相邻自定义组件渲染错误正确的打开方式

    话不多说看问题: 当封装自定义组件时例如(自定义下拉列表)两个相同的组件在多次v-if变化时偶尔会发生渲染错误,明明赋值正确但是组建中的ajax方法可能返回的数据乱掉,或者其他神逻辑错误. 经过查询发 ...

  5. 编程小白入门分享五：Vue的自定义组件

    前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...

  6. 四、vue基础--自定义组件

    1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...

  7. Vue之自定义组件的v-model

    最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是 ...

  8. Vue的自定义组件之间的数据传递

    一,父级传向子级 1,在子级的属性中添加props:['myname',......],参数可以传多个,看具体而定: 2,在父级data中定义好需要传递的变量数据,例如name:"rose& ...

  9. vue&period;js自定义组件directives

    自定义指令:以v开头,如:v-mybind. <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value ...

随机推荐

  1. &lbrack;ASP&period;NET MVC 小牛之路&rsqb;05 - 使用 Ninject

    在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事情,续这篇文章之后,本文将用一个实际的示例来 ...

  2. Struts2 Convention插件的使用（4）使用&commat;Action注解返回json数据

    package com.hyy.action; import java.util.HashMap; import java.util.Map; import org.apache.struts2.co ...

  3. 快速切换目录软件推荐——autojump

    受到<autojump: 在命令行下快速更改目录>的鼓动,决定试用下这个软件. 但ubuntu下的源貌似有些问题, sudo apt get install autojump 后,死活提示 ...

  4. Qt4&period;7文档翻译：Qt样式单参考&comma;Qt Style Sheets Reference（超长，超全）

    内容目录 Qt样式单参考 可进行样式设置的部件列表 属性列表 图标列表 属性类型列表 伪状态列表 子控件列表 Qt样式单参考 Qt样式单支持各种属性.伪状态和子控件,这样使得妳能够自行设计部件的外观. ...

  5. VMWare 学习目录

    Linux介绍 Linux入门--个人感想 Google怎么用linux 初入Linux Windows XP硬盘安装Ubuntu 12.04双系统图文详解 实例讲解虚拟机3种网络模式(桥接.nat. ...

  6. ADO&period;NET五大对象详解

    Connection 连接对象 用于对数据库的连接操作.传入的参数为连接字符串. Commamd 命令对象 用于执行对数据库的操作 ,传入的参数可以为连接字符串或存储过程,也必须传入连接对象的实例. ...

  7. 序列化、time、random、hashlib、sys模块

    •很多常用和内置模块,我们只需要掌握他们的用法而暂时不用考虑内部是如何实现的,这些模块大大提升了开发效率 ! 1.json模块与pickle模块 •json 如果你有这样的困扰,当希望把一种数据存到硬 ...

  8. Java IO--NIO（二）

    在我的上一篇文章JavaNIO详解(一)中介绍了关于标准输入输出NIO相关知识, 本篇将重点介绍基于网络编程NIO(异步IO). 异步IO 异步 I/O 是一种没有阻塞地读写数据的方法.通常,在代码进 ...

  9. Java语法 &lbrack;开发环境搭建&rsqb;

    自行百度. https://www.baidu.com 自行必应 https://cn.bing.com

  10. ANSYS - 修改节点荷载的规则

    问题: 分别在不同的荷载步对同一节点施加集中荷载,则节点最终所受荷载为各步荷载值叠加还是最后一步荷载值? 如,在第一个荷载步对节点n施加集中荷载F1,在第二个荷载步对该节点施加集中荷载F2,则第二个荷 ...

相关文章