正文

vue视频： 自定义指令 && 拖拽 && 自定义键盘信息

IP云
IP云V管理员/3 阅读
09/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

v-text
v-for
v-html
指令: 扩展html语法

自定义指令:
1. 自定义属性指令:

Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素 // vm.$el
});<div v-red="参数"></div>

指令名称: v-red -> red

* 注意: 必须以 v-开头（定义时去掉v-）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(color){
this.el.style.background=color;
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
}; </script>
</head>
<body>
<div id="box">
<span v-red="a">
asdfasd
</span>
</div></body>
</html>

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

demo：拖拽

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<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>

ev.clientX-oDiv.offsetLeft

2.自定义元素指令:（用处不大）

Vue.elementDirective('zns-red',{
bind: function(){
this.el.style.background='red';
}
});

-------------

@keydown.up
@keydown.enter

@keydown.a/b/c....

自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
//ctrl->17
/*document.onkeydown=function(ev){
console.log(ev.keyCode);
};*/
Vue.directive('on').keyCodes.ctrl=17; //
Vue.directive('on').keyCodes.myenter=13; window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
},
methods:{
show:function(){
alert(1);
}
}
});
}; </script>
</head>
<body>
<div id="box">
<input type="text" @keydown.myenter="show">
</div></body>
</html>

Vue.directive('on').keyCodes.myenter=13;

监听数据变化:
vm.$el/$mount/$options/.... vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视

vue视频： 自定义指令 && 拖拽 && 自定义键盘信息的更多相关文章

  1. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. QT笔记之自定义窗口拖拽移动

    1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html . ...

  3. Vue&period; 之 Element dialog 拖拽

    Vue. 之 Element dialog 拖拽 默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新 ...

  4. vue自定义事件---拖拽

    margin布局拖拽 Vue.directive('drag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.qu ...

  5. iPhone手机解锁效果&amp&semi;&amp&semi;自定义滚动条&amp&semi;&amp&semi;拖拽--Clone&amp&semi;&amp&semi;窗口拖拽（改变大小&sol;最小化&sol;最大化&sol;还原&sol;关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. vue&period;js实现内部自定义指令和全局自定义指令------directive

    在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...

  7. Android 自定义可拖拽View，界面渲染刷新后不会自动回到起始位置

    以自定义ImageView为例: /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class FloatingImageVi ...

  8. Jquery&period;Sorttable 桌面拖拽自定义

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. View拖拽 自定义绑定view拖拽的工具类

    由于工作需求,需要用到这种处理方法所以我就写了这个 废话不多说先看效果图 接下来就看代码吧 DragDropManager import android.app.Activity; import an ...

随机推荐

  1. Web Service 中返回DataSet结果大小改进

    http://www.cnblogs.com/scottckt/archive/2012/11/10/2764496.html Web Service 中返回DataSet结果方法: 1)直接返回Da ...

  2. ubuntu 安装eclipse&comma;adt&comma;android sdk&comma;离线

    1.安装jdk 环境变量 $ sudo gedit ~/.bashrc export JAVA_HOME=/usr/local/jdk1.8.0_65export JRE_HOME=${JAVA_HO ...

  3. wince和window mobile winphone

    windows mobile是微软在2000年左右推出的针对移动平台的操作系统,这个系统一直使用到三年前,微软开始启用metro界面,将windows mobile改名为windows phone. ...

  4. css中var函数

    引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...

  5. Apple Watch 1&period;0 开发介绍 1&period;1 简介 开发苹果手表

    使用Apple Watch,用户可以使用一种不显眼的方式查看信息.不用把iPhone从口袋里拿出来,就可以通过看一下手表快速获得重要信息. 作为Apple Watch的第三方app开发者,应该通过使用 ...

  6. Myeclipse黑色主题配置

    Myeclipse自己打造黑色主题: 一.UI Theme(设置黑色主题模式): 如果是自己下载在的.jar主题,则首先将该jar包放在Myeclipse安装目录下的\dropins\plugins\ ...

  7. linq总结系列（一）---基础部分

    一.linq的基本概念 LINQ是C#和VB中的统一查询语法,使用对象来保存和检索来自不同来源(如数据库.xml.对象集合)的数据. 主要功能:消除了编程语言和数据库之间的不匹配,以及为不同类型的数据 ...

  8. oracle 游标&sol;函数&sol;存储过程&sol;触发器 表空间

    --存储过程,循环create or replace procedure delTables(ename t_emp.ename%TYPE)AScon number;i NUMBER := 1;tab ...

  9. poj 1170状压dp

    题目链接:https://vjudge.net/problem/POJ-1170 题意:输入n,表示有那种物品,接下来n行,每行a,b,c三个变量,a表示物品种类,b是物品数量,c代表物品的单价.接下 ...

  10. 兼容当前五大浏览器的渐变颜色背景gradient的写法

    <style type="text/css" media="screen"> #gradient { width: 200px; height: 2 ...