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 自定义指令的更多相关文章

  1. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

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

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

  3. Vue（十三）自定义指令

    自定义指令 分类:全局指令.局部指令 1. 自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 2. 自定义局部指令   <!DOCTYPE html> < ...

  4. Vue滚动加载自定义指令

    用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...

  5. vue 混入 mixin，自定义指令，过滤器

    vue 混入 mixin ,分发 vue 组件中重复的功能 局部的书写格式 // mixin.js var mymixin = {  // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该 ...

  6. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  7. vue.js_06_vue.js的自定义指令和自定义键盘修饰符

    1.全局的自定义指令 实现:当页面刷新时,光标聚焦到搜索框中 <label> 搜索: <input type="text" class="form-co ...

  8. vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点

    需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...

  9. 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  10. Vue.js：自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

随机推荐

  1. 在平台中使用JNDI 数据源

    有些情况下为了系统的安全性考虑,可以将数据源配置成JNDI,在程序中只需要使用 容器的JNDI路径就可以了. 配置方法 1.在容器中配置数据源 <Context path="/&quo ...

  2. TCP/IP协议（6）：传输层之UDP

    一. UDP用户数据报协议,它是一个无连接的,面向数据报的协议,它不提供可靠性但传输速度比TCP要快. UDP数据报中的“UDP长度”为两个字节,所以我们要发送的UDP数据最多支持65507大约68K ...

  3. PHP时间范围：本周、本月、下月等简写

    在阅读TP5.1源码,发现其在时间范围上的写法很特别,个人第一次见,做一次记录 $timeRule = [ 'today' => ['today', 'tomorrow'], 'yesterda ...

  4. Java编程从头开始---老妪能解

    思想导向: 今天想要分享的是最基础的东西就是如何写一个简单的代码,很多人都是小白,需要的其实并不是很高端的理论,框架和思维模式啊,设计方法啊,这些对于一个新人来说实在是好高骛远,说的那么高端,结果要学 ...

  5. Arria10中PHY的时钟线结构

    发送器时钟网络由发送器PLL到发送器通道,它为发送器提供两种时钟 高速串行时钟——串化器的高速时钟 低速并行时钟——串化器和PCS的低速时钟 在绑定通道模式,串行和并行时钟都是由发送器的PLL提供给发 ...

  6. Django-类视图与中间件

    ------类视图 1.类视图引入 def register(request): """处理注册"""   # 获取请求方法,判断是GET/ ...

  7. Java数组、集合

    Vector类     类似C#的ArrayList.可扩展的数组,带有一些特定方法   Hashtable类     与C#的类似   Enumeration接口     类似C#的枚举器

  8. （树）Subtrees -- hdu -- 5524

    http://acm.hdu.edu.cn/showproblem.php?pid=5524 Subtrees Time Limit: 2000/1000 MS (Java/Others)    Me ...

  9. String、Stringbuffer、Stringbuilder三者之间的区别

    1.首先说运行速度,速度由快到慢排列:StringBuilder > StringBuffer > String String最慢的原因: String为字符串常量,而StringBuil ...

  10. Alpha冲刺 - (10/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 本人负责的模块(共享编辑)的前端代码 ...