vue02

vue02

vue生命周期

• 1.0钩子函数:

    created ->   实例已经创建 √
    beforeCompile   ->   编译之前
    compiled    ->   编译之后
    ready       ->   插入到文档中 √
  
    beforeDestroy   ->   销毁之前
    destroyed   ->   销毁之后
  

用户看到{{}}处理

v-cloak     防止闪烁, 比较大段落
{{msg}}    ->   v-text
{{{msg}}}           ->   v-html

监听计算

• ng: $scope.$watch
• 计算属性computed

•   computed:{
        b:function(){   //默认调用get
            return 值
        }
    }
    --------------------------
    computed:{
        b:{
                get:function(){
                    return this.a+2;
                },
                set:function(val){
                    this.a=val;
                }
        }
    }
  

  computed里面可以放置一些业务逻辑代码，一定记得return

vue实例简单方法:

vm.$el  ->  就是元素
vm.$data  ->  就是data
vm.$mount ->  手动挂在vue程序

vm.$options.属性名 ->   获取自定义在实例化vue上的属性
vm.$destroy ->   销毁对象

vm.$log();  ->  查看现在数据data的状态

循环重复：

• vue1.0
  v-for="value in data"

  会有重复数据？
  track-by='索引' 提高循环性能

  track-by='$index/uid'

• vue2.0
  可以直接循环重复数组

过滤器

• vue1.0提供过滤器:
  capitalize uppercase currency....

  @click="show | debounce 2000"   //debounce配合事件，延迟执行
  

  数据配合使用过滤器:
  limitBy 2 限制2个
  limitBy 2 0 参数(取2个从第0个开始)
  limitBy 取几个 从哪开始

  filterBy    过滤数据
  filterBy ‘谁’过滤显示出有谁的数据
  
  orderBy 排序
  orderBy (谁) 1/-1
      1  -> 正序
      2  -> 倒序
  JSON 解析为json字符串
  

• vue1.0自定义过滤器{{abc | name 5}}

• vue2.0自定义过滤器{{abc | name(5)}}

  Vue.filter(name,function(input,num){
      
  });
  

  时间转化器
  过滤html标记

• 双向过滤器:

全局过滤器

    Vue.filter('filterHtml',{
                read:function(input){ //model-view
                    return input.replace(/<[^<+]>/g,'');
                },
                write:function(val){ //view -> model
                    return val;
                }
    });

局部过滤器

        filters:{
        function(){
            return xxx
        }
    }

自定义指令:

• 属性:

  Vue.directive(指令名称,function(参数){
  this.el -> 原生DOM元素
  });

  指令名称: v-red -> red

  • 注意: 指令名称必须以 v-开头

• 元素(用处不大)

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

• 键盘事件

    @keydown.up
    @keydown.enter="show | debounce 2000"(延迟2秒)
    
    @keydown.a/b/c....
    
    自定义键盘信息:
        Vue.directive('on').keyCodes.ctrl=17;
        Vue.directive('on').keyCodes.myenter=13;
    DOM中绑定 @keydown.myenter="show" //相当于按了13号键
  

监听数据变化:

vm.$el/$mount/$options/....

vm.$watch(name,fnCb);  //浅度
//name为data里的一个属性
vm.$watch(name,fnCb,{deep:true});  //深度监视 
//name为data里的一个属性对象的某个属性