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:;
 },
 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>