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. 之 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手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

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

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

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

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

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

  8. Jquery.Sorttable 桌面拖拽自定义

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

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

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

随机推荐

  1. android 内存管理机制、异常、垃圾回收

    当 Android 应用程序退出时,并不清理其所占用的内存,Linux 内核进程也相应的继续存在,所谓“退出但不关闭”.从而使得用户调用程序时能够在第一时间得到响应. 当系统内存不足时,系统将激活内存 ...

  2. 第三百零七节，Django框架,models.py模块，数据库操作——表类容的增删改查

    Django框架,models.py模块,数据库操作——表类容的增删改查 增加数据 create()方法,增加数据 save()方法,写入数据 第一种方式 表类名称(字段=值) 需要save()方法, ...

  3. error: expected declaration specifiers or '...' before 'xxxx'（xxxx是函数形参）

    今天汗颜了一大阵 早上,在编译我的源代码的时候竟然不通过编译,上个星期六也出现了这种情况,当时不知道怎么弄的后来又通过编译了,可能是原来的.o文件没有make clean 还保存在那里,以至于蒙过去了 ...

  4. Java 的JSON、XML转换方法——目录索引(转)

    JSON及XML的Java序列化.反序列化(转换)在WebService.Ajax数据传递中,用得比较多.如:在用ExtJS.jQuery.mootools以及一些WebService时,你可以需要用 ...

  5. 转载：MochiWeb一些资料的链接

    转自:http://veniceweb.googlecode.com/svn/trunk/public/daily_tech_doc/mochiweb_20091030.txt MochiWeb项目主 ...

  6. 一个不错的在线的js调试器

    一个不错的在线的js调试器,可见即可得: http://jsbin.com/

  7. window设置TortoiseGit连接git不用每次输入用户名和密码

    1. 在Windows中添加一个HOME环境变量,值为%USERPROFILE%,如下图: 2. 在“开始>运行(快捷键:win+r)”中打开%Home%,然后在目录下新建一个名为“_netrc ...

  8. 监听程序未启动或数据库服务未注册到该监听程序。启动该监听程序并注册数据库服务 然后重新运行 em configuration assistant。

    在WIN 7/64Bit上安装ORACLE 11gR2后,管理网页Database Control(如:https://localhost:1158/em)始终登录不进去,总是说密码错误,使用配置工具 ...

  9. 文件名中含有连续字符abc，相应文件中也含有字符串abc

    find ./ -name '*abc*' -exec grep 'abc' {} -H \; find ./ -name '*abc*' | xargs -I '{}' grep abc {} -H ...

  10. 批量快速的导入导出Oracle的数据(spool缓冲池、java实现）

    1. Java代码实现思路 BufferedWriter writefile = new BufferedWriter(new FileWriter(file));  writefile.write( ...