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. 关于Cocos2d-x中精灵节点的透明度的设置

    1.当我们需要某个精灵作为一个大一点的容器来存放其他的小精灵的时候,我们先设置这个精灵的大小 setTextureRect(Rect(0, 0, babySize.width, babySize.he ...

  2. caffe源代码分析--Blob类代码研究

    作者:linger 转自须注明转自:http://blog.csdn.net/lingerlanlan/article/details/24379689 数据成员 shared_ptr<Sync ...

  3. Spring Cloud在国内中小型公司用的起来吗？

    转自:http://www.cnblogs.com/ityouknow/p/7508306.html 今天吃完饭休息的时候瞎逛知乎,突然看到这个一个问题Spring Cloud在国内中小型公司能用起来 ...

  4. Integer.valueOf

    一. 深入代码   在创建数字 1 的对象时, 大多数人会使用 new Integer(1), 而使用 Integer.valueOf(1) 可以使用系统缓存,既减少可能的内存占用,也省去了频繁创建对 ...

  5. vc 获取 硬盘序列号 和 cpu

    vc 获取 硬盘序列号 和 cpu 唯一iD的方法?如题---------网上找来很多资料 也没找到, 要支持xp win7 32/64 系统下都能获取 硬盘序列号 和cpu ID 哪位朋友帮帮忙: ...

  6. hbase学习 rowKey的设计-4

    访问hbase table中的行,只有三种方式: 1 通过单个row key访问 2 通过row key的range 3 全表扫描 Hadoop Sequence File 文中可能涉及到的API: ...

  7. MathType公式波浪线怎么编辑

    数学公式中有很多符号与数学样式,在用手写时是没有问题的,但是很多论文或者期刊中也是需要用到这些符号或者样式的,比如公式波浪线,那么MathType公式波浪线怎么编辑出来呢? 具体操作步骤如下: 1.打 ...

  8. ALM在win7/IE8下无法浏览

    操作系统WIN7 64位. 安装完ALM后,用IE8打开查看,没有登录界面,提示需要安装东西. 按照提示安装,没有响应,然后到网上查了一下资料: ALM/QC11.0在win8/IE11下无法浏览 页 ...

  9. python2.0_s12_day10_rabbitMQ使用介绍

    RabbitMQ RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(M ...

  10. vue 组件库

    iView https://www.iviewui.com/ Radon UI https://luojilab.github.io/radon-ui/#!/ Element http://eleme ...