vue2.0学习(一)

1.解决双花括号在初始化时的闪烁,两种方式,一种是<div v-text="name"></div>,将用v-text指令来显示,类似于angular的ng-bind;

另外一种是用v-clock配合css:

<div v-cloak>{{name}}</div>

<style>
  [v-cloak]{
    display:none;
  }

</style>

当然在这里css只需要写一次就好了。

2.双花括号中可以运行js表达式(只能有一个),比如说if语句不可以在双花括号中运行,简单的语句可以用三目运算,复杂建议用computed;模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

3.所有的内置filter都去掉了,所以filter只能自己去定义。

4.var obj =  {};Object.keys(obj);这个可以取到所有的对象的属性。属于es5的方法。

5.vue双向数据绑定的原理

var a= {}
Object.defineProperty(a,"b",{
  set:function(newValue){

    console.log("你要赋值给我,我的新值是"+newValue)

  },
  get:function(){
    console.log("你取我的值")
  }
})

var defineA = function(){
  a.b = 1;
}
defineA();

这里利用的是es5的Object.defineProperty,用这种方法给每个data创建一个set和get,当给data赋值的时候,就会触发set,进而去通知v-text这个指令去改变相应的值。具体如下图

vue2.0学习(一)

上一篇:词云


下一篇:使用IdleTest进行TDD单元测试驱动开发演练(2)