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>
     

  • 相关阅读:
    redis的两种备份方式
    Vue—事件修饰符
    css3实现颤动的动画
    初学者可能不知道的vue技巧
    使用slot-scope复制vue中slot内容
    pre-commit钩子,代码质量检查
    爬虫可视化点选配置工具之获取鼠标点选元素
    Vue源码探究-事件系统
    使用electron实现百度网盘悬浮窗口功能!
    electron实现qq快捷登录!
  • 原文地址:https://www.cnblogs.com/absoluteli/p/14051842.html
Copyright © 2011-2022 走看看