|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
( G& l) F F: b" I+ ^# b - // 选项% Q% V+ @5 w0 x% j* s, S6 S
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
a& R" ?- Y7 M/ B( f0 {% t- w - <h1>site : {{site}}</h1>; ]3 t& N9 j* ]1 j4 d" e% L
- <h1>url : {{url}}</h1>3 t* c1 u& t2 D! e0 k3 ?2 _
- <h1>{{details()}}</h1>, K0 o) x5 ?3 |
- </div>+ n" K; I' f* i- F& j* I5 f
- <script type="text/javascript">( d% G' w7 ?( Y6 e
- var vm = new Vue({8 d/ r+ ~+ b: B' B) \0 Y* g) L
- el: '#vue_det',
$ s! C; r% o( a7 K( D u7 Y1 H+ a - data: {5 P4 \# b$ |/ Q( P# X
- site: "菜鸟教程",
; Y" f# R! x% p6 R) t& k2 ] - url: "www.runoob.com",
p! t/ G5 c+ R6 J9 M - alexa: "10000"
5 K4 x- o0 d& ]. T' f( i- Q - },
4 X. Y3 k4 N- n9 h+ m - methods: {9 \$ p, H1 L: ?$ e _ d
- details: function() {
; b0 q7 o' t8 n. ?. d; ~, Q - return this.site + " - 学的不仅是技术,更是梦想!";
. ^6 f8 X" a+ \ - }) v* j4 ?/ I# r
- }( |# p; g" r" L" H2 Y
- }): ?, P h" ?3 ]1 C. V$ t0 D
- </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 ?; X. Z1 J; n. v
- <h1>site : {{site}}</h1>
7 @' q3 M% B! l5 D+ ?1 r$ ~ - <h1>url : {{url}}</h1>8 f( I! h& r$ x& K* {
- <h1>{{details()}}</h1>
' _1 Z0 F9 `* d' x4 P - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
+ m+ b: S! a5 v7 _0 R - <h1>site : {{site}}</h1>
7 R4 u* n7 c. S - <h1>url : {{url}}</h1>
0 J+ O% [" U- R4 z1 G/ e - <h1>Alexa : {{alexa}}</h1>$ [. [3 @ M- j; X) D
- </div>
! H0 [7 D; g/ r. G - <script type="text/javascript">
$ h# c7 J$ }" A! }1 {) c - // 我们的数据对象, O& r& R! v$ [2 O6 n# N
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}; S! p6 U. j% d: }- q8 d. O
- var vm = new Vue({
/ k( H) L( u Y1 ]' d8 G - el: '#vue_det',9 L* W% G; o$ C- {9 {# A8 x V
- data: data8 b# |$ T& i, z0 R( E2 X0 V
- })0 ^) u2 P/ ^. ?# {6 _& Q2 J
- // 它们引用相同的对象!
+ u; w8 a9 ~8 E% ?: L; z - document.write(vm.a === data.a) // true
9 @6 h- y6 S, z X# X" @0 Q' M - document.write("<br>")
/ m! P# _. z( ? - // 设置属性也会影响到原始数据
. Q" T9 ?8 t/ a) W/ V - vm.site = "Runoob"9 R! |# W/ y5 [! e' V8 \$ x
- document.write(data.site + "<br>") // Runoob# h* m; \& z- C% I) m) [( H
- / N% c/ C% E; f
- // ……反之亦然& U0 C* _" x# \3 w: J$ [
- data.alexa = 12345 A2 `; `. c1 J$ a2 G' }
- document.write(vm.alexa) // 1234
! z, [5 } g1 R/ B - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">5 `/ d/ n" e: _/ w
- <h1>site : {{site}}</h1>; a" f: B; B' E
- <h1>url : {{url}}</h1>0 n) ?- Z: M$ m! n
- <h1>Alexa : {{alexa}}</h1>5 T4 i6 J7 q* g! W9 D4 p( n
- </div>0 G7 X0 X8 d5 e S$ ^1 L I3 H- ?6 X
- <script type="text/javascript">
3 ~9 I. L: J- \ [* P - // 我们的数据对象
. X7 B; n# U# x" K+ j. t |( ? - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}" Y; d! z9 X- E! Q
- var vm = new Vue({+ Q5 U/ N: e [; s- F" e8 \* F6 V- ^
- el: '#vue_det',* {: ^: F+ _5 o0 n2 }
- data: data1 e3 c. V: g7 N; }% w. y
- })
$ |3 H: |9 |- T \( N - , q7 `. w6 O4 { H/ F- A; v) p
- document.write(vm.$data === data) // true7 L0 R- V: N4 t! w9 l
- document.write("<br>") // true
1 M/ ~' ]7 |6 V7 b0 | - document.write(vm.$el === document.getElementById('vue_det')) // true
' |/ e+ O" C$ L1 b! P' X - </script>
复制代码 3 z% i& H+ I2 x3 t
% i& L4 h$ V' ?% @7 j
|