1 /*属性*/ 2 标签内的属性都用 :attr="xxx" 的形式 3 4 /*模板*/ 5 {{ msg }} -> 绑定数据 6 {{ *msg }} -> 数据只绑定一次 7 {{{ msg }}} -> 若数据中带有html标签，则转义输出(在vue2.x已经被废除) 8 9 /*过滤器*/ 10 {{ 12 | currency 'Y'}} // ￥12 11 12 /*交互*/ 13 vue-resource 14 get: 15 post: 16 this.$http.post(url, {param: xxx}, {emulateJSON: true}).then(...) 17 jsonp: 18 this.$http.jsonp(url, {word: xxx}, {jsonp: 'cb'}).then(...) 19 20 /*vue生命周期*/ 21 new Vue 创建实例 22 23 生命周期钩子函数： 24 created: 实例创建后执行 25 beforeCompile: 编译之前 26 afterCompil: 编译之后 27 ready: 文本节点插入到文档中 28 beforeDestory: 销毁之前 29 destoryed: 销毁之后 30 31 vue2.0 => 32 beforeCompile -> created 33 compiled -> mounted 34 35 /*解决{{msg}}绑定闪烁问题*/ 36 v-cloak 37 <div id="box" v-cloak>{{ msg }}</div> 38 [v-cloak] { 39 display: none; 40 } 41 42 {{msg}} -> v-text 43 {{{msg}}} -> v-html ( {{{}}} 在2.0已经被废弃) 44 45 /*computed*/ 46 data: { 47 a: 1; 48 }, 49 computed: { 50 /*可以放业务逻辑代码，最后要return xx; */ 51 b: function () { 52 return this.a; 53 } 54 } 55 56 /* vue实例方法 */ 57 var vm = new Vue({...}) 58 59 vm.$el -> <div id="box"></div> 60 vm.$el.style.background = 'red'; 61 vm.$data -> data object 62 63 vm.$mount('#box') /* 手动挂载 */ 64 65 new Vue({ 66 data: {...} 67 }).$mount('#box') 68 69 vm.$options.xx -> 访问自定义属性(方法) 70 71 vm.$log() -> 查看当前数据的状态 72 73 /*解决重复数据*/ 74 <li v-for="value in data" track-by="$index"></li>