zoukankan      html  css  js  c++  java
  • Vue--自定义指令

    自定义指令
    使用Vue的静态方法directive,我们可以定义属于自己的指令。
    格式:Vue.directive(指令的名字, 回调函数)
    例子:
    <div id='app'>
        <span v-red>vue</span>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        Vue.directive('red', function(){
            this.el.style.color = 'red';
        });
        new Vue({
            el : '#app'
        });
    </script>
    标签使用了v-red指令后,字体颜色会变红。回调函数里的this.el就是被绑定的v-red的span。 需要注意的是,directive函数里的指令名字不要带v-
     
    指令传参
    指令后面加上 = “”可以以字符串的形式传参。(而且也只能以字符串的形式传递参数) 
    如 :
    v-set="{size:'40px', color:'blue'}"
    例子 :
    <div id='app'>
        <span v-set='{size : "40px", color : "blue"}'>hello</span>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        Vue.directive('set', function(json){
            this.el.style.fontSize = json.size;
            this.el.style.color = json.color;
        });
        new Vue({
            el : '#app'
        });
    </script>
     
    自定义拖拽指令
    <div id='app'>
        <div class='box' v-drag></div>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        Vue.directive('drag', function(){
            var div = this.el;
            div.onmousedown = function(e){
                disX = e.clientX - div.offsetLeft;
                disY = e.clientY - div.offsetTop;
                document.onmousemove = function(e){
                    var l = e.clientX - disX;
                    var t = e.clientY - disY;
                    div.style.left = l + 'px';
                    div.style.top = t + 'px';
                }
                document.onmouseup = function(){
                    document.onmousedown = document.onmousemove = null;
                }
            }    
        });
        new Vue({
            el : '#app'
        });
    </script>
     

  • 相关阅读:
    php文件加密
    Laravel框架学院
    php生成rss订阅
    ThinkPHP带表情无限级评论回复
    jQuery + Cookie引导客户操作
    基于jQuery表格增加删除代码示例
    Web前端开发与PHP设计
    世界各大名牌大学课件
    传智播客免费公开课
    Android,ios,手游视频网站
  • 原文地址:https://www.cnblogs.com/absoluteli/p/14051842.html
Copyright © 2011-2022 走看看