vuejs小知识

一、指令 (v-开头)

v-model             数据绑定

v-on                添加事件

v-bind              绑定属性

v-for               循环、迭代

v-text              纯文本

v-html              html

v-show              是否显示

v-pre               跳过编译

v-cloak                 防止闪屏

 建议使用v-for的时候设置v-bind:key。

二、指令简写

v-on
          v-on:click            @click

          v-on:keydown      @keydown

v-bind
            v-bind:href             :href

            v-bind:src          :src

            v-bind:key          :key

三、自定义指令

1.全局自定义指令
      Vue.directive('指令名',function(el){

              el指当前对象

              coding....

       });
2.局部自定义指令
      directives: {
        focus: {
          // 指令的定义
          inserted: function (el) {
            el.focus()
          }
        }
      }

四、生命周期钩子

beforeCreate            创建前

created                 创建后

beforeMount             挂载前

mouted                  挂载后

beforeUpdate            数据更新前

updated                 数据更新后

beforeDestroy           销毁前

destoryed               销毁后

五、过滤器 filter

a.文本过滤器
   filters:{
                curr:function(value){
                    if(value){
                        return '￥'+value;
                    }
                }
   }

  {{item.price*item.count|curr}}


b.数据过滤器
    orderByP(){
                    return this.aProduct.reverse();
     }


相比较methods，更加节省性能。适合用于重复渲染，逻辑复杂的计算。