vue.js 学习笔记

/*属性*/
标签内的属性都用 :attr="xxx" 的形式

/*模板*/
{{ msg }}     ->     绑定数据
{{ *msg }}     ->    数据只绑定一次
{{{ msg }}} ->  若数据中带有html标签，则转义输出(在vue2.x已经被废除)

/*过滤器*/
{{ 12 | currency 'Y'}}   // ￥12

/*交互*/
vue-resource
get:
post:
this.$http.post(url, {param: xxx}, {emulateJSON: true}).then(...)
jsonp:
this.$http.jsonp(url, {word: xxx}, {jsonp: 'cb'}).then(...)

/*vue生命周期*/
new Vue 创建实例

生命周期钩子函数：
created:         实例创建后执行
beforeCompile:  编译之前
afterCompil:    编译之后
ready:             文本节点插入到文档中
beforeDestory:  销毁之前
destoryed:        销毁之后

vue2.0 =>
beforeCompile -> created
compiled       -> mounted

/*解决{{msg}}绑定闪烁问题*/
v-cloak
<div id="box" v-cloak>{{ msg }}</div>
[v-cloak] {
display: none;
}

{{msg}}      -> v-text
{{{msg}}}     -> v-html  ( {{{}}} 在2.0已经被废弃)

/*computed*/
data: {
a: 1;
},
computed: {
/*可以放业务逻辑代码，最后要return xx; */
b: function () {
return this.a;
}
}

/* vue实例方法 */
var vm = new Vue({...})

vm.$el   -> <div id="box"></div>
vm.$el.style.background = 'red';
vm.$data -> data object

vm.$mount('#box')   /* 手动挂载 */

new Vue({
data: {...}
}).$mount('#box')

vm.$options.xx    -> 访问自定义属性(方法)

vm.$log()           -> 查看当前数据的状态

/*解决重复数据*/
<li v-for="value in data" track-by="$index"></li>