vue初体验

作为一个前端的小菜鸟，在平时的开发与学习中，除了要深入了解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对象。