Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({5 M" }1 o4 B0 N
- // 选项
: I$ Z/ i. F* I- C L" F( O. y - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
2 ]- J* _- L$ x0 t. \- y+ f; o - <h1>site : {{site}}</h1>6 C7 |! a2 E0 c5 ?/ u7 h$ F
- <h1>url : {{url}}</h1>
5 }( n6 v. q: I6 S - <h1>{{details()}}</h1>
: _7 J4 l0 K' m: c" Y - </div>* r$ `9 n0 N( m: p
- <script type="text/javascript">% Y, C7 M; w4 f# s6 n% P. N( M+ L! y
- var vm = new Vue({
" `8 n" t1 ?/ r U4 [ - el: '#vue_det',
3 ~" B1 s8 C5 r S - data: {+ {9 x- y- R1 f/ r; i4 z L9 e. k
- site: "菜鸟教程",0 Y$ U4 G# N# J
- url: "www.runoob.com",
( m8 h, t7 {2 `) f. a - alexa: "10000"
4 O+ `3 h6 X1 l% l; t - },
6 ^' a) m/ k, b% H/ ^3 p/ U c - methods: {
}! \1 w1 y0 E% m0 P - details: function() {; \: U( N" |5 a* X
- return this.site + " - 学的不仅是技术,更是梦想!";# n6 x) E% H- u6 I# h
- }% M* D% o% b- p' c0 B3 p7 ]( T+ ? z
- }" S* \- D0 t* x+ ~2 G' ~% Q
- })
. r0 h9 U6 [8 e& K* S - </script>
复制代码可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中: - <div id = "vue_det"></div>
复制代码这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。 接下来我们看看如何定义数据对象。 data 用于定义属性,实例中有三个属性分别为:site、url、alexa。 methods 用于定义的函数,可以通过 return 来返回函数值。 {{ }} 用于输出对象属性和函数返回值。 - <div id="vue_det">
# {% }9 t4 C) O/ ], @& o5 a) W - <h1>site : {{site}}</h1>
+ [2 A+ `3 l6 d% x, W0 t6 O& d- [2 N - <h1>url : {{url}}</h1>
1 B. M w, W! E - <h1>{{details()}}</h1>
( Y6 N& G2 r& |$ b. `2 w% w) c! C - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">, e# {; _0 t8 }% e5 |
- <h1>site : {{site}}</h1>
9 X/ o6 F0 R% \& Q - <h1>url : {{url}}</h1>
2 y$ ^& {! ~0 K' N - <h1>Alexa : {{alexa}}</h1>
, Z- z( X- E1 @- V3 `4 i/ t - </div>, ?) M0 i: w$ }+ ?* k' q5 v
- <script type="text/javascript">( f5 p3 { V2 L& Y" [
- // 我们的数据对象
+ I0 R9 X) O L9 S/ F* q - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}0 |" \2 ^( ^# `
- var vm = new Vue({9 @. x5 }8 L/ M+ |$ Z) Z
- el: '#vue_det',3 m( C: Y* t+ u) R$ I
- data: data) J! d: U" K9 Q
- })
4 I9 O& y% v L: }5 ]2 S1 I - // 它们引用相同的对象!
' i5 ~1 e3 Q" ?* N# u; l# j+ O1 Q2 P4 w - document.write(vm.a === data.a) // true) g7 d' e+ z: j- w, a% k- y- c7 S; ~
- document.write("<br>")3 N5 d a. [* x' K: I
- // 设置属性也会影响到原始数据5 k- T5 d4 a5 W2 q+ y. x! u1 A" |! q
- vm.site = "Runoob"' q) }9 k' e2 z2 n
- document.write(data.site + "<br>") // Runoob: x% [9 Q3 o0 K$ ]& n9 O
-
; i7 L2 `% K' O& {, Q - // ……反之亦然
) q0 L* F) v2 p6 M. C - data.alexa = 1234* d$ D& s* B6 ?0 I1 [+ G/ M9 N' }# r4 g6 b* P
- document.write(vm.alexa) // 1234
' F5 k& k5 W, u' Y- q2 u( c ~' A - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
) t5 G" c8 u6 g& }5 V; ^, Y) } - <h1>site : {{site}}</h1>* J, s4 e9 \! O0 {+ W5 Q4 G( J) A
- <h1>url : {{url}}</h1>: E) V) e. S- d2 s* W4 T! ^
- <h1>Alexa : {{alexa}}</h1>
8 U. P! R3 I F6 F& n) V" D. C+ \ - </div>
; O. N' \& u" Y8 z - <script type="text/javascript">
0 [+ L" V; G" g: P - // 我们的数据对象
; K1 d* I0 g9 y( m# a3 F: R - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
, Q* _ x, t) E- f& p4 r' J; s - var vm = new Vue({
$ x: l- u3 x8 I" m% i9 U - el: '#vue_det',2 z7 D5 i8 J$ }& O
- data: data1 K1 c5 X+ r* j
- })
7 a' T# f9 e8 g" f0 U ~! I -
7 _$ u+ F. x: z; Y' O/ @; ~ - document.write(vm.$data === data) // true/ T& S# u. P) p( j
- document.write("<br>") // true4 Z) ^ i% r/ _2 D$ k) ~ B3 i* m
- document.write(vm.$el === document.getElementById('vue_det')) // true
4 S) ?9 B$ x9 U9 B - </script>
复制代码 , |, C" H1 l7 D4 n8 v& H
+ s; G d. h3 k |