vue学习

vue循环:

var vm = new Vue({
    el:'#box',
    data: {
        a: ''
    }

});
或者用mount挂载=>
var vm = new Vue({
    data: {
        a: ''
    }
}),$mount('#box');
v-for="item in data"

会有重复数据, track-by = “索引”,提高循环的性能

track-by = "$index"

vue过滤器:

debounce  延迟,配合事件
@keyup="show | debounce 2000"

表示键盘弹起事件发生2秒后,执行show函数

limitBy 限制循环的过滤器

limitBy   限制几个   从第几个开始

filterBy 过滤数据

filterBy 'o'

选取带字幕o的数据

orderBy 1/-1 排序,按正序/倒叙排

自定义过滤器

Vue.filter(name,function(){

});

<div id="#box">
    {{a | toDou a b}}
</box>
Vue.fleter('toDou',function(input,a,b){
     return input<10 ? '0'+input : ''+input;
});

自定义指令
扩展了html的语法

Vue.directive(name,function(){

});

Vue.directive('red',function(){
    this.el.style.background = 'yellow';
});

<div v-red>这一行会变成黄色</div>

自定义拖拽标签 drag

Vue.directive('drag',function(){
     var oDiv  = this.el;
     oDiv.onmousedown = function(ev){
         var l = ev.clientX - oDiv.offsetLeft;
         var t = ev.clientY - oDiv.offsetTop;
         document.onmousemove = function(ev){
             var posX = ev.clientX - l;
             var posY = ev.clientY - t;
             oDiv.style.left = posX + 'px';
             oDiv.style.top = posY + 'px';
         } 
         document.onmouseup = function(){
             document.onmousemove = null;
             document.onmouseup = null;
         }
     };
 });

自定义元素指令(用处不大)

Vue.elementDirective('zns-red',{
    bind:function(){
        this.el.style.background = 'red';       
    }
});

自定义键盘信息:

console.log(ev.keyCode);查看所按键盘键码;

Vue.directive('on').keyCodes.ctrl = 17;

监听数据变化:

之前有 vm.$el/$mount/$options

vm.$watch(name,fnCb) fnCb 回调函数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值