Vuejs1.0自定义指令

来源：互联网发布：淘宝狗粮店铺简介文案编辑：程序博客网时间：2024/06/05 03:25

Vuejs 1.0中的自定义指令主要有两种：
1.属性自定义指令 2.元素自定义指令
1.属性自定义指令
Vue.directive(name(仅仅是自定义名没有v-),function(参数){
this.el // 获取原生DOM元素
})

这里是 属性自定义指令 的举例

<!DOCTYPE html>    <html>        <head>            <title></title>            <meta charset="utf-8">            <script type="text/javascript" src="vue1.js"></script>            <script type="text/javascript" src="vue-resource.js"></script>        </head>        <body>            <div id="box">                //自定义指令绑定必须以 v- 开头 ，再加上自定义的指令名                <span v-red>第一个自定义指令</span>                <span v-can="obj">战俘</span>            </div>        </body>    </html>    <script type="text/javascript">    //  调用自定义指令名为red的指令，并执行这个函数方法        Vue.directive('red',function(){        //通过el.style.给这个元素添加属性，就像CSS一样        this.el.style.background = 'red';    })        //想通过一个指令传递多个属性  可以用对象的方法        //这里 现在 data中定义了一个obj对象，把想要的属性都放到这个对象里，再通过自定义指令函数传递obj参数  通过.语法获得obj的各种属性        Vue.directive('can', function(obj){            // 传参            this.el.innerHTML = obj.msg;            this.el.style.background = obj.color;        });        new Vue({            data:{                obj:{                    msg:'kiki',                    color:'red'                }            }        }).$mount("#box");    </script>

第二种自定义属性指令写法：

<div id='box'>          <span v-red=' "pink" '>简化形式，不用在data中写数据，可以直接通过单双引号的套用直接传递进去想要的属性值，前提是要和自定义指令的函数方法的参数一致</span>      </div>      <script>      //自定义指令      Vue.directive('red' , function(color){          this.el.style.background=color;      }        var vm = new Vue({            el:'#box',            data:{            }    })    </script>

2.元素自定义指令———————

Vue.elementDirective(name,{
bind:function(){}
})元素自定义指令（不常用）自定义标签 <标签名>

<body>    <div id="box">    <-- 自定义标签 -->       <rose>战俘</rose>    </div></body></html><script type="text/javascript">    // 自定义元素指令  自定义标签名，需要执行的函数方法    Vue.elementDirective('rose',{        //需要写bind  去绑定        bind:function(){            this.el.style.background = "pink";        }    });    new Vue({    }).$mount("#box");</script>键盘码指令：    @keydown.enter/a/c/v等        <input type="text" name="" @keydown.enter='show()'/>    自定义键盘信息：<body>    <div>        <input type='text' @keydown.enter='show()'>    </div></body><script>    // 获取键盘码 eg:只要键盘任意键摁下，就会console.log出它的键盘码    // document.onkeydown = function(ev){    //  console.log(ev.keyCode);    // }    // 自定义键盘信息    Vue.directive('on').keyCodes.enter= 13;    new Vue({        methods:{            show:function(){                alert(1);            }        }    }).$mount("#box");</script>

“`

阅读全文

0 0