Vuejs1.0自定义指令

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

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

    <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>

“`

你可能感兴趣的:(vue自定义指令)