vue教程2-07 自定义指令
vue教程2-07 自定义指令
自定义指令:
一、属性: Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
}); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头 拖拽:
-------------------------------
二、自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
自定义指令写法一：
<div id="box">
<span v-red>
asdfasd
</span>
</div> Vue.directive('red',function(){
this.el.style.background='red';
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
};
自定义指令写法二：推荐写法
<div id="box">
<span v-red="a">
asdfasd
</span>
</div>
//这里的color可以传参
Vue.directive('red',function(color){
this.el.style.background=color;
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
};
自定义指令写法三：
<div id="box">
<span v-red>
asdfasd
</span>
</div> Vue.directive('red',{
bind:function(){
this.el.style.background='red';
}
}); window.onload=function(){
var vm=new Vue({
el:'#box'
});
};
自定义指令：拖拽drag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<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;
};
};
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
}; </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> </body>
</html>
自定义元素指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
zns-red{
width:100px;
background: gray;
height:100px;
display: block;
}
</style>
<script src="vue.js"></script>
<script>
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
}; </script>
</head>
<body>
<div id="box">
<zns-red></zns-red>
</div> </body>
</html>
vue教程2-07 自定义指令的更多相关文章
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- Vue（十三）自定义指令
自定义指令 分类:全局指令.局部指令 1. 自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 2. 自定义局部指令 <!DOCTYPE html> < ...
- Vue滚动加载自定义指令
用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...
- vue 混入 mixin，自定义指令，过滤器
vue 混入 mixin ,分发 vue 组件中重复的功能 局部的书写格式 // mixin.js var mymixin = { // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该 ...
- vue学习-day02（自定义指令，生命周期）
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- vue.js_06_vue.js的自定义指令和自定义键盘修饰符
1.全局的自定义指令 实现:当页面刷新时,光标聚焦到搜索框中 <label> 搜索: <input type="text" class="form-co ...
- vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点
需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...
- 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue.js：自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
随机推荐
- Codeforces Round #541 (Div. 2) G dp + 思维 + 单调栈 or 链表 (连锁反应)
https://codeforces.com/contest/1131/problem/G 题意 给你一排m个的骨牌(m<=1e7),每块之间相距1,每块高h[i],推倒代价c[i],假如\(a ...
- .Net实现Windows服务安装完成后自动启动的两种方法
考虑到部署方便,我们一般都会将C#写的Windows服务制作成安装包.在服务安装完成以后,第一次还需要手动启动服务,这样非常不方便. 方法一:在安装完成事件里面调用命令行的方式启动服务 此操作之前要先 ...
- RNN与应用案例：注意力模型与机器翻译
1. 注意力模型 1.2 注意力模型概述 注意力模型(attention model)是一种用于做图像描述的模型.在笔记6中讲过RNN去做图像描述,但是精准度可能差强人意.所以在工业界,人们更喜欢用a ...
- AngularJs ng-repeat用法二$parent.$index
我们在开发时时常会出现repeat嵌套使用的情况,此时会想获取父级repeat数组的下标可使用$parent.$index
- winSocket编程（一）WSAStartup
/******************************************************************** 更新日期:2017-11-07 10:33:08* 进度:完 ...
- 2.1.6synchronized锁重入
关键字在使用synchronized时,当线程得到一个对象锁时,这时这个线程再次请求此对象锁是可以拿到的,也就说明同步方法之间是可以进行互相调用的, package com.cky.bean; /** ...
- Ng第三课：线性代数回顾(Linear Algebra Review)
3.1 矩阵和向量 3.2 加法和标量乘法 3.3 矩阵向量乘法 3.4 矩阵乘法 3.5 矩阵乘法的性质 3.6 逆.转置 3.1 矩阵和向量 如图:这个是 4×2 矩阵,即 4 行 ...
- Android多点触控手势基础
处理多点触控手势 多点触控就是同时把一根以上的手指放在屏幕上. 再继续往下以前需要补充一些名词: 触控手势:就是把一根或者几根手指放在屏幕上做各种动作,其中包括保留一根手指的前提下,拿起或者放下其余的 ...
- （求凹包） Bicycle Race （CF 659D） 简单题
http://codeforces.com/contest/659/problem/D Maria participates in a bicycle race. The speedway t ...
- hdu 1541
因为y的输入是从小到大,所以不用考虑y坐标的问题 只考虑x坐标就行 还有个小细节就是0<=x,y,<=32000 x和y取0的时候树状数组处理不到 x++就行了 #include < ...