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. 【转】Mac下升级python2.7到python3.6

    1. 前言 Mac系统自带python2.7,本文目的是将自带的python升级到3.6版本. 网上有本多的做法是让python2.7和python3.X两个版本共存,博主并不知道,是两版本共存好,还 ...

  2. MySQL 日期与时间的处理

    1.查询当前日期时间:函数有now(),localtime(),current_timestamp(),sysdate(). mysql> select now(),localtime(),cu ...

  3. Xcode/iOS: 如何判断代码运行在DEBUG还是RELEASE模式下？

    原帖链接:http://stackoverflow.com/a/9063469 首先确定下项目的 Build Settings 是否已经设置过宏定义 DEBUG,如何看呢? 点击 Build Sett ...

  4. 在hadoop集群添加了slave节点的方法

    分为以下几个步骤: 1  ,修改master和slave 的参数,和配置时相同,只是修改和节点数相关,如slaves(我的只改了slaves), 将任意一个该好的文件发送到新增加的机器(或者虚拟机) ...

  5. Upgrade site collection from SP2010 to SP2013(Part 2)

    内容中包含 base64string 图片造成字符过多,拒绝显示

  6. window用Xmanager4.0的Xstart连接linux远程桌面

    安装包: xorg-x11-xauth xterm.x86_64 0:253-1.el6 Execute command path:/usr/bin/xterm Xstart连接Linux远程桌面有一 ...

  7. svn merge和branch分析

    [转载] 使用svn几年了,一直对分支和合并敬而远之,一来是因为分支的管理不该我操心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响,最主要的原因是,自己对分支的 ...

  8. 调用外部 DLL 中的函数(1. 早绑定)

    ,b,t,);end; end.

  9. IDE、SATA、SCSI、SAS、FC、SSD 硬盘类型

    http://www.cnblogs.com/awpatp/archive/2013/01/29/2881431.html

  10. webBrowser 模拟登录

    webBrowser1.Document.GetElementById("txtUsername").InnerText = "sdsy";//fill nam ...