Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({; G, ~" w/ j) K) a
- // 选项! @" }8 K* B/ E; z9 k$ I
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">2 z6 Y3 ]& {4 I
- <h1>site : {{site}}</h1>! S) S/ p, g, Z- u) O5 C5 f
- <h1>url : {{url}}</h1>
; m* k3 E \5 s1 V0 g& P# d - <h1>{{details()}}</h1>
% t6 p; E6 n: w* h. Z" Q& X - </div>7 l! P/ }8 t+ `. [3 {: Q; H
- <script type="text/javascript">* N) o$ V4 `4 f
- var vm = new Vue({7 w0 h2 r3 S8 P* P
- el: '#vue_det',' r$ p. b" [0 \" m' ^# N9 P
- data: {+ ~, r7 I e3 X
- site: "菜鸟教程",1 k5 ]+ l/ u/ m1 W w
- url: "www.runoob.com",
8 _9 X3 V5 Y9 W5 }( N - alexa: "10000"2 ?2 r& `; N1 E0 j+ k
- },
+ O* g3 R4 S; j8 N0 N" n- n5 r - methods: {% z) o) d# L+ C- m" `9 \- X( k! v
- details: function() {5 b7 J n: r s9 E0 C1 P1 ]
- return this.site + " - 学的不仅是技术,更是梦想!";# y2 l" \) Y8 M$ n1 f$ X' |
- }2 t8 H, |- e$ Q* V; R7 l4 W. |
- }# h( u1 {+ A" W1 ]
- })
; X* I# x A3 R: A: [ - </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"># v- V# s7 Y, G) I! H( J
- <h1>site : {{site}}</h1>: E, N# k- J! L: F5 J4 } D
- <h1>url : {{url}}</h1>
4 `! c9 o1 {0 b, j5 i3 F8 t - <h1>{{details()}}</h1>3 e! F2 d# g0 `) {& L2 n
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">5 K/ n' m: ^) `
- <h1>site : {{site}}</h1>! U2 |2 H+ r% P; W5 M6 Q
- <h1>url : {{url}}</h1>
, t( C3 A* g) e0 }. Z( k5 p* m - <h1>Alexa : {{alexa}}</h1>
' N6 a+ z, A8 q9 s, U - </div>
7 |2 O1 o7 ]2 c - <script type="text/javascript">0 {8 Y+ j+ d$ n& J+ Z) u+ q7 t& J h
- // 我们的数据对象 g0 K- I) L* {0 O0 `
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
7 r7 b7 I2 q1 j& f - var vm = new Vue({$ @7 _( K0 v2 |/ E; x
- el: '#vue_det',
8 X1 |/ s$ ?- \6 J& G1 c" E+ W - data: data9 }" u0 }9 L; t' A
- })
& d2 x; }* N- X) _. a1 B - // 它们引用相同的对象!8 L8 O( W8 k* \/ z& N0 `2 o% e
- document.write(vm.a === data.a) // true
1 a3 w7 y; g: F. ^: X0 G. x6 l - document.write("<br>")) d3 x, r7 _6 U8 V8 ]* m* f
- // 设置属性也会影响到原始数据
% O! n# Q7 A+ g4 b Z - vm.site = "Runoob"0 o/ l3 N: B$ r: K8 Z1 ~2 Y% ~
- document.write(data.site + "<br>") // Runoob
+ T( q/ A2 w4 y -
2 [) o6 i3 q5 y( J- | - // ……反之亦然
* l9 j& C$ [% P. |$ s @% c; k - data.alexa = 1234
& v- A: o1 O3 I) n( g9 V) v$ Y% m - document.write(vm.alexa) // 1234
- W0 i2 v7 E' ?0 U% w# o - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
& ?* W' ]0 N, I& u& n% G, E0 D3 |8 E - <h1>site : {{site}}</h1>5 Y9 t& c3 ~$ i8 M- J& ^- B' C
- <h1>url : {{url}}</h1>/ k ]8 b3 \$ s7 g
- <h1>Alexa : {{alexa}}</h1>
1 Y4 P" I- X' Z* k9 R0 U2 h, J - </div>
( P. W: d. U3 g8 L+ \+ F8 c8 c - <script type="text/javascript">
: }* s8 p5 v4 ?+ \5 A' i: J - // 我们的数据对象
# b9 r% K( M4 w+ L( G) ^$ s5 [ - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}. }" I4 Y8 `- U; k+ D! b
- var vm = new Vue({
% L, R; b) G5 e/ B. u6 E - el: '#vue_det',! X* G# I9 S5 D, a3 L0 g; ?
- data: data
7 b& @+ |% b/ J6 @* k - })5 ], R3 l' {9 X% x
-
8 L* S$ }# J1 G" C5 O8 X - document.write(vm.$data === data) // true: g2 e$ f% v; O! u6 S
- document.write("<br>") // true
! ?1 A, t; f: a; p - document.write(vm.$el === document.getElementById('vue_det')) // true9 F- K. g5 x$ [( S4 E
- </script>
复制代码
+ O; W% d7 j( u4 z3 M
& M; ?; ^* r+ c/ g( N2 k |