Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({5 E4 e+ H* D0 c% C2 T
- // 选项
8 R( b. Q% l$ H3 Q/ I - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">6 i! v7 k( O6 J: G; w1 {& n/ ^) }
- <h1>site : {{site}}</h1>3 d3 w* _5 x$ O8 Q% N
- <h1>url : {{url}}</h1>
2 W1 |- p& t: x) A' J - <h1>{{details()}}</h1>
4 g3 B, J* g) J) C* E+ _ - </div>0 |6 `, X1 ~' i U
- <script type="text/javascript">% @, M& e9 G* y/ R
- var vm = new Vue({
0 P. v+ N/ R8 K: p5 N - el: '#vue_det',
* f+ U) Q+ @3 G8 h3 v+ L6 r0 O - data: {
1 B* `5 Y5 T1 M: D - site: "菜鸟教程",
; B3 f, k! _. ~" @ - url: "www.runoob.com",, l; x# X7 _$ T2 Y4 j8 n
- alexa: "10000"9 d; a1 f( |% f2 y j6 _
- },
* i0 z. z& K* x# q8 y+ ~; p - methods: {
6 D/ F& m! f: F* u - details: function() {
# o) ?5 V/ \2 R- ]. N8 h; ?' L3 d - return this.site + " - 学的不仅是技术,更是梦想!";$ f& C) U$ l/ m$ {2 {4 N2 ~
- }' [7 i( s+ |/ }7 q
- }
2 b! U' ~( |- u, x, Q* e0 g6 Q9 Z4 k% f - })0 y6 @! D( `1 q3 r E( R
- </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">" I4 z3 c* b P8 \# s( S" J$ ~. x
- <h1>site : {{site}}</h1>
( |# [: z& ^4 |# } - <h1>url : {{url}}</h1>
. N( B! Q) M9 { - <h1>{{details()}}</h1>
9 `+ r2 c/ I$ r, J3 x" e - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">: H1 Z5 o8 H, H
- <h1>site : {{site}}</h1>6 O: a. }2 L! U+ ~( k
- <h1>url : {{url}}</h1>3 i: F. L: `, B, g6 [6 h
- <h1>Alexa : {{alexa}}</h1>$ u' e$ N0 t" q) a* R: N4 ]
- </div>. V) H! V* I! m+ K' d
- <script type="text/javascript">
7 P2 s1 }! c' n) L; Q( Y2 _ - // 我们的数据对象% }. [: b3 n7 P [) N
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}; G) g/ H# N3 J" j, B3 ~% P/ _6 c
- var vm = new Vue({
m0 ^( ?( A( r. k1 f' L - el: '#vue_det',
2 S. g2 \3 X. e" Z - data: data8 k7 ]' g1 t- Z+ n, A
- })0 W. B: a3 s& u: s
- // 它们引用相同的对象!
8 f9 n6 t- R1 P" ?1 ]* ?- O) k5 ? - document.write(vm.a === data.a) // true
' u. d$ m; Z8 I - document.write("<br>")
) ^, h; I, J" y$ J( M- a! I - // 设置属性也会影响到原始数据
2 k. [; I0 F9 A' J: l, y7 v - vm.site = "Runoob"
1 }$ N( q$ p) r4 d - document.write(data.site + "<br>") // Runoob
. i# w3 ]! C5 { _8 I2 w -
; a; Z3 [3 v: K# r: Z# o - // ……反之亦然, [: a; E" o( X% } R8 |
- data.alexa = 1234/ L4 A! c5 u. L/ i) N
- document.write(vm.alexa) // 1234, h8 k+ @$ t/ J- d5 a% V* y- D
- </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">/ O5 G$ q$ `) ~ n; h9 i
- <h1>site : {{site}}</h1>
* B# u$ q& R, b, H5 w6 | - <h1>url : {{url}}</h1>9 [/ z1 _/ l9 n- C( I& M
- <h1>Alexa : {{alexa}}</h1>) o% ?9 q" }1 i( x, ^$ b+ S
- </div> ^# N# S) A: _2 K& W
- <script type="text/javascript">2 [& W2 r9 D+ v- y0 |! x6 B/ f- v
- // 我们的数据对象
, h: }& w& C5 M$ x, e - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
4 Y# E3 B* [9 { - var vm = new Vue({
8 e* L8 V; t: o! x1 P; x b - el: '#vue_det',
9 K6 ^) _2 v, `$ X9 t7 ^4 [; b - data: data8 E! W' S8 e/ r/ {4 p' ~
- })) a. K: \ V# f* i8 [
-
8 r! |6 R+ X; L+ P/ r5 g: u - document.write(vm.$data === data) // true
3 O, O; O% ]' k' ?3 P - document.write("<br>") // true) q. E; M, S0 y: V. t
- document.write(vm.$el === document.getElementById('vue_det')) // true& L. E% [# ?0 n8 z. a: F
- </script>
复制代码
8 ^; G( |" G% Q0 ]' I) \5 l
! z! T8 M! |7 I/ W4 v) H9 x/ l |