作为一个前端的小菜鸟,在平时的开发与学习中,除了要深入了解javascript 及 css 的各种特性,熟悉一门框架也是必不可少的。vue以其小巧,轻便,学习平滑等各种特性深受欢迎。

这里总结一下小菜鸟碰到的坑和小技巧

1.避免页面加载时出现双花括号  
 官方推荐v-cloak

<style>
 
[v-cloak] {
display: none;
}
</style>
<div id='app' v-cloak>
{{message}}
</div>

2.watch的用法

今天看了园子里有关watch的用法,受益匪浅,在此记录一下

watch的是作为一个对象存在的

var vm = new Vue({

data: { a: 1, b: 2 },

watch: {

a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名

b: 'someMethod', // 选项的对象

c: { handler: function (val, oldVal) { /* ... */ },

   deep: true,

  immediate: true }

}

})

这里watch中监听的键值对有三种类型 ,其对应的值分别为 fun string和obj
这里着重记录一下c:

每一个watch监听的对象的值都包含三个属性:

handler:相当于a后面的fun()
immediate:设定页面初始化时是否执行handler方法

deep:设定是否进行更深的监听 例如obj对象。在修改obj对象的值时,handler方法并不能监听到obj的改变。

值得一提的是,在handler 方法中如果用箭头函数 ()=>{},其中的this指向为window。而用传统的fun(){}其中的this才指向vue对象。