|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({& A) D* n! p* V: O
- // 选项
7 G& V' u7 L B6 j - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
h, Y0 M8 X4 ]/ |7 m8 i - <h1>site : {{site}}</h1>7 z8 W8 N9 }0 _+ b1 Y7 `5 A: B6 }
- <h1>url : {{url}}</h1>
! B% R# ]4 z2 N: E: j - <h1>{{details()}}</h1>2 Y" S* C. M1 c8 N
- </div>
4 U: H. k) }. ?. k0 `6 X; m - <script type="text/javascript">
5 q5 f7 B% [/ d( ? - var vm = new Vue({, i+ m3 K7 N) l9 e! e9 x
- el: '#vue_det',
! \1 T0 ]' a) l8 q - data: { P8 j/ Y% w5 e- d$ r
- site: "菜鸟教程",6 K& e% y5 _7 t7 m
- url: "www.runoob.com",
5 I% ~$ M) y6 ^/ Q - alexa: "10000"
3 g0 k" e* `, U5 c6 ^ - },1 D: ^/ L- }% C& `$ ]/ M* E
- methods: {6 I9 W1 t4 U7 X: N+ K
- details: function() {4 w9 P2 S9 u/ F3 Q- K7 s, s7 c
- return this.site + " - 学的不仅是技术,更是梦想!";# J# ?. n8 A. {
- }
- T# k! l1 g R( m# y, ?# } - }% E- ]7 [. h" W+ q
- })$ {- z1 X1 k! J1 b3 j/ f% @
- </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">0 o% _' \% n2 v/ k% ]
- <h1>site : {{site}}</h1>
7 Z/ y5 Q& b9 M2 [' p- T& y - <h1>url : {{url}}</h1> ]9 ]4 t. A1 \3 w' q
- <h1>{{details()}}</h1>5 N4 D: X4 V' l! L
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">! A9 M0 I5 _1 u$ ` j( _
- <h1>site : {{site}}</h1>
* S, I7 j P: {1 [2 @" p: ?3 a8 k - <h1>url : {{url}}</h1>
. `/ t- t' j4 K# P4 ^: x: ~" H - <h1>Alexa : {{alexa}}</h1>% k8 R5 q. o' R' W% G% t
- </div>
0 u, n: d) M/ C7 L - <script type="text/javascript">
& C7 ^8 v: ^! K1 {5 z - // 我们的数据对象
0 h3 B9 d1 _# y3 w) a - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}6 e2 z/ C+ L8 l8 R0 A% \" t
- var vm = new Vue({/ ]% c/ N) m( ~5 j
- el: '#vue_det',
- U# P3 ]# Q9 p% y5 m - data: data
+ s- C6 I5 I9 t4 h - })7 S% D) S8 G) m9 P0 m" D" ~
- // 它们引用相同的对象!
. v" a9 e3 l" X) Z; \ - document.write(vm.a === data.a) // true/ n2 S4 |( x# c
- document.write("<br>")
1 l8 n* Y& j; v4 l6 i* A b0 B - // 设置属性也会影响到原始数据
- h) C& s0 h: K8 C* H - vm.site = "Runoob"( ]( y4 u0 [0 L6 W- B8 J) Y
- document.write(data.site + "<br>") // Runoob) [% i2 X! F2 V, @6 c
- . [9 B0 J4 Q# y9 ?% J3 R4 Y: i
- // ……反之亦然- f$ f: h0 O/ x, h
- data.alexa = 1234
# L: H+ O ?7 k3 l7 N - document.write(vm.alexa) // 1234
$ C, t! e/ s" D. e* G! z$ S4 S - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
! q' G4 [/ X' H, s" E+ M - <h1>site : {{site}}</h1>: s9 R5 b, N+ b" O" ?
- <h1>url : {{url}}</h1>
* X5 e% R, e% H6 Q. u ]+ e* K% p - <h1>Alexa : {{alexa}}</h1>
% `. L3 `) z y/ |) B - </div>
+ M' I0 x$ ?5 m. ^) A( M* ^ A - <script type="text/javascript">
3 h5 F" R7 u3 G) p4 O+ H4 B' u" _ - // 我们的数据对象" d+ p2 x0 s9 T' p0 r, P8 q
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}) @! H1 k' {& D& n! }
- var vm = new Vue({) W" D a3 ]- \6 G3 h
- el: '#vue_det',
( c3 ^! S" A& A' \& I( u - data: data0 x: p% c, {8 |& V0 ~3 o
- })
' }7 J/ S& c; H - & Y+ X2 g/ e" z) B
- document.write(vm.$data === data) // true
! f" J3 { R" {( B - document.write("<br>") // true7 `$ D5 P: r3 Y& a
- document.write(vm.$el === document.getElementById('vue_det')) // true% w. M' H( }% p' `0 m7 {
- </script>
复制代码 5 D5 o v1 w& `. ]
) u4 b# i) j( r# `7 q' g! V |