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