Vuejs1.0自定义指令

最新推荐文章于 2024-07-03 12:06:55 发布

kiki_Aurora

最新推荐文章于 2024-07-03 12:06:55 发布

阅读量578

点赞数

分类专栏： vue自定义指令文章标签：自定义元素指令属性指令 vuejs

本文链接：https://blog.csdn.net/qq_39108050/article/details/73307362

版权

vue自定义指令专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

“`

kiki_Aurora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs1.0自定义指令

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

扫一扫

专栏目录