vue知识点散记

1、iphone5微信浏览器里的methods里貌似不兼容  test(){} 写法，只支持test:function(){}

2、v-cloak 防止双括号的闪烁

    <div id="app" v-cloak>{{test}} </div>

   在style里

  []v-cloak]{display:none;//display:none!important；}  

3、computed和watch都有缓存机制  ，{{}}==>差值表达式

4、计算属性的set和get方法

   computed:{

     fullName:{

        get:function(){return this.a+this.b;},

        set:function(value){var test=value.split('/');this.a=test[0];this.b=test[1]; }

     }

  }

vm.fullName='gello/world'

5、vue中的样式

    （1）class

    <div v-bind:class="{ active: isActive }"></div>

     <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>

     <div v-bind:class="classObject"></div>

      computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }

    <div v-bind:class="[activeClass, errorClass]"></div>

     <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

  (2)style

     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

      <div v-bind:style="styleObject">菜鸟教程</div>

      data: {styleObject: {color: 'green',fontSize: '30px'}}

     <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

     data: {baseStyles: {color: 'green',fontSize: '30px'},overridingStyles: {'font-weight': 'bold'}}

   注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

6、数组的一些方法

     vm.list[2]=3   ==>数据虽然变了，但是页面没有动态显示

    //下面是有效的

   (1)对象操作

   Vue.set(vm.userInfo,"address","beijing")

    vm.$set(vm.userInfo,"address","beijing")

  (2)数组操作 

      1）变异方法 pop shift unshift。

       2）Vue.set(vm.list,1,5)  数组下标为1的把值改成5

       3）vm.$set(vm.userInfo,2,10)

　　4）数组的引用

7、：is的用法

     通常情况下table->tr->td   ,如果把tr用子组件代替的话，有的浏览器就可能不是这个顺序