vue之自定义组件
除了核心功能默认内置的指令外,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>
上面简单的实例中,主要是展示了自定义组件的用法:
其中"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实例中声明这些颜色参数,并不能满足我们想要随意更换颜色的要求,因此,需要继续优化。
<!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>
拖拽前:
拖拽后:
自定义元素指令
所谓自定义元素指令,就是指该指令能够像其他的元素如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>
自定义指令和自定义元素指令相比,主要存在三个不同之处:
- 自定义指令使用elementDirective
- 自定义指令的功能函数直接写在后面的方法中,自定义元素指令的功能函数必须写在钩子函数中(bind、inserted等)
- 自定义指令在使用时,需要用v-开头,添加到需要的元素中;自定义元素指令则是直接像其他元素一样使用即可。
vue之自定义组件的更多相关文章
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- 【VUE】自定义组件
[VUE]自定义组件 转载: ============================================ ======================================== ...
- vue的自定义组件和组件传值
<div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...
- vue 相邻自定义组件渲染错误正确的打开方式
话不多说看问题: 当封装自定义组件时例如(自定义下拉列表)两个相同的组件在多次v-if变化时偶尔会发生渲染错误,明明赋值正确但是组建中的ajax方法可能返回的数据乱掉,或者其他神逻辑错误. 经过查询发 ...
- 编程小白入门分享五:Vue的自定义组件
前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...
- 四、vue基础--自定义组件
1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...
- vue发布自定义组件到npm
一.使用 vue create currentdatetime创建项目(可查考https://cli.vuejs.org/zh/guide/creating-a-project.html),创建成功后 ...
- Vue之自定义组件的v-model
最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是 ...
- Vue的自定义组件之间的数据传递
一,父级传向子级 1,在子级的属性中添加props:['myname',......],参数可以传多个,看具体而定: 2,在父级data中定义好需要传递的变量数据,例如name:"rose& ...
随机推荐
- js-自加和自减
i++ 返回的是自增之前的值 先利用再加 ++i 返回的是自增之后的值 先加再利用
- django ---Auth模块
Auth模块 本文目录 1 Auth模块是什么 2 auth模块常用方法 3 扩展默认的auth_user表 回到目录 1 Auth模块是什么 Auth模块是Django自带的用户认证模块: 我们在开 ...
- dijksta 模板
#include<bits/stdc++.h> using namespace std; #define INF 0x3f3f3f3f ]; ]; ][]; void dijkstra(i ...
- 《DSP using MATLAB》Problem 5.35
余弦序列的谱,原始频率w0会泄露到其它频率处. 从其它书中找到的证明过程: 代码: %% +++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- whmcs之全民idc
http://manage.cn.resellerclub.com/servlet/LogoutPassServlet 原教程例子:http://sharebar.org/1594.html (该教程 ...
- Python知识点整理,基础2 - 列表操作
- golang-test-tool-gotests
gotests介绍 gotests是一个Golang命令行工具 ,让Go测试变得容易.它根据目标源文件的函数和方法签名生成表驱动的测试(TDD).任何测试文件中新的依赖都会被自动倒入 Demo 下面是 ...
- fcntl获取和修改文件打开状态标志
[root@bogon code]# cat b.c #include<stdio.h> #include<error.h> #include<unistd.h> ...
- MySQL--派生表临时结果集中的AutoKey
在某些场景中,需要对派生表生成临时结果集进行materialized,如果该临时结果集中包含索引键,那么查询有可能通过该索引键来进行优化. 如对下面查询: SELECT T2.purpose_code ...
- dojo:如何用MultiSelect实现类似ListBox风格的FromTo功能
欲实现的功能如下图: 主要要解决的问题包括两个方面: 一个是MultiSelet初始化的工作,一个是FromTo功能按钮的实现.这主要是因为MultiSelect控件是存储无关的,并不像Select或 ...