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>
浙公网安备 33010602011771号