Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
7 y" ~$ U8 T* U6 Z) c( v' \ - // 选项
7 ^8 d0 [- v# K - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
* T9 G! o5 Z9 y( Z' K* U3 z - <h1>site : {{site}}</h1>9 E% X. Q& y) g/ [: a$ F9 A* X
- <h1>url : {{url}}</h1>
7 l% O0 Y. C+ T$ O1 p. Z - <h1>{{details()}}</h1>, h/ b v# o- q0 t6 C
- </div>
4 l9 D/ J+ h5 ]! y - <script type="text/javascript">
+ j0 @ b6 o. e/ d% F/ c - var vm = new Vue({$ `" I- n, u" O3 Q5 H. g0 Q
- el: '#vue_det',
6 x. ?) B4 z# G: v0 Y - data: { i9 a" D- n1 S% ^; c
- site: "菜鸟教程",
/ ?3 F0 x S7 C: B j: ] - url: "www.runoob.com",9 }: o( O1 y2 ^- }% ]3 T- A& W
- alexa: "10000"
2 V7 s |! R2 H+ h" Y Z - },6 @1 e7 ]% c4 v: r* [, J
- methods: {+ W6 S5 T7 q. d+ o( H
- details: function() {
& N# V. D/ ^6 @1 ^9 S! a - return this.site + " - 学的不仅是技术,更是梦想!";
" Z" }0 l2 I/ c& [, H - }) ~+ S+ D% `! v
- }; B& ^2 R1 P3 v# L: s+ O
- })
, O+ R8 P# A$ Y - </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">
, W! u9 A: M; `' x) H9 W/ v - <h1>site : {{site}}</h1>
- ^% L) g$ ?0 L; P0 s - <h1>url : {{url}}</h1>, S# ^6 F5 [; x. e
- <h1>{{details()}}</h1>% x5 D# I! \9 c
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">0 y4 r5 @3 R3 k; X6 T
- <h1>site : {{site}}</h1>; ~% Z" x+ R$ Z1 _2 Q. C
- <h1>url : {{url}}</h1>& Q& W/ j( V) l& }# }. X/ Y) c
- <h1>Alexa : {{alexa}}</h1>% h! a3 h7 L0 g4 T% H6 @3 J0 E/ h
- </div>
* @ r6 i' Y& ?# |, W - <script type="text/javascript">0 u* N5 }! X: A2 I( [3 U. `6 N
- // 我们的数据对象' x% v$ e, \) n- d6 q# S
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}7 k7 {6 \/ z+ U: x6 ^/ K0 y
- var vm = new Vue({
+ V" T! c6 \( d5 t - el: '#vue_det',
' v1 s' z8 R$ t1 q- S1 q" S - data: data
3 v: m0 b( r- }. m3 ~ - })8 t% Y; A9 M4 U% A5 _$ d
- // 它们引用相同的对象!% h# o" \2 o# G. [8 p7 A
- document.write(vm.a === data.a) // true8 q, H6 _+ a+ z# g3 W5 J
- document.write("<br>")+ Y5 K W( L. J9 ~" f
- // 设置属性也会影响到原始数据
: L% p- w, \! L4 d; ^: l2 S/ Q. e - vm.site = "Runoob"
" \# C* N, n0 w; }6 j" s9 Z - document.write(data.site + "<br>") // Runoob, U7 L# O0 Y+ H
-
5 [6 P# ~& h9 z+ B - // ……反之亦然% c. N% ^# e$ P, F& I& \. l* Y+ f
- data.alexa = 1234
! P7 `/ T" {) u5 A3 ? - document.write(vm.alexa) // 1234
0 |" V* H5 t) F, |" V' `9 o - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
" j0 s) f9 C+ D) C0 g2 | - <h1>site : {{site}}</h1>
: S/ I3 y6 w4 F2 ] - <h1>url : {{url}}</h1>& U, @. Y: A7 ]' O: H; D
- <h1>Alexa : {{alexa}}</h1>+ x* S5 W7 }2 X7 f
- </div>
3 ?) _! y& m& u% ]! u - <script type="text/javascript">
( l8 E0 m, ?8 Y1 {1 R - // 我们的数据对象# l$ R8 C; x& d. H; J3 f
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}2 I. |+ k- c" G1 S/ o$ M
- var vm = new Vue({
# I& k% l+ [/ D6 |* Y8 H) t% e - el: '#vue_det',4 F5 L# G. }0 m) S, a# c2 j- u, y
- data: data
, b2 n$ ^" L: _$ o( A - }); Q7 K. `1 `' q
- # R$ h4 Q6 ]+ e- ^
- document.write(vm.$data === data) // true) a' \0 h8 D) F6 E. A% f
- document.write("<br>") // true) y R" O! y9 h9 S: H: F
- document.write(vm.$el === document.getElementById('vue_det')) // true
, s( f3 S c, e: f/ k8 [3 _: B) ~9 A - </script>
复制代码 7 s, P9 ^" S( ~9 K2 |
3 r: `2 A. k; @
|