Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({* Y% d0 b9 t# J$ p+ c
- // 选项; D8 L1 K2 d2 s1 [; ]2 B/ g
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
7 o! @* f# t4 W, J, \2 |$ e o3 } - <h1>site : {{site}}</h1>
8 x; L: }. K2 i) ^+ I% o - <h1>url : {{url}}</h1>
+ Q. ]- w3 H* J! }! J/ S - <h1>{{details()}}</h1>
$ M, B/ e# p- d' W- }& @/ ~ - </div>
" g* N m$ K# z8 ?/ E, F - <script type="text/javascript">4 x) ?) I; A/ `) Y2 _$ Z# X8 N
- var vm = new Vue({5 O( }" l& D' V0 C( Z
- el: '#vue_det', |3 t/ G4 D$ w3 U
- data: {3 y$ \# v; m- X: j- a5 l) ^6 X
- site: "菜鸟教程",
: V/ E' k( Q- `" n/ \/ ^ - url: "www.runoob.com",
5 l+ y u2 I7 @# e - alexa: "10000"
5 D# A- }- L7 f7 M- ~3 C, w - },' Z% z( H0 F. O( x
- methods: {
8 s$ g/ ]' y( |- l/ v - details: function() {: q, u, N( g% x4 U0 |2 ]
- return this.site + " - 学的不仅是技术,更是梦想!";- b7 x. ` {7 Y& h
- }
: ?- N$ `: a2 ?" H5 o0 _, a - }. Q) `: i2 _0 X; X4 h+ ^
- })6 c7 x( `3 R7 n* x% \
- </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">
3 Q; ] O, n# ?% a* } - <h1>site : {{site}}</h1>9 u$ p6 l& F; ?3 `9 R3 s
- <h1>url : {{url}}</h1>
, A' \4 V# l. A7 V; k7 X% [ - <h1>{{details()}}</h1>! X6 P0 S" {4 x7 N$ U
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det"># `: P" o) \5 i" [$ A
- <h1>site : {{site}}</h1>: V! I9 z. v6 Y8 G, ~! U) ~0 Z y9 p
- <h1>url : {{url}}</h1>
6 H6 h/ g; h4 R - <h1>Alexa : {{alexa}}</h1>
$ U' u. X3 L) l3 v, `. u% ? - </div>
4 Q. n9 t) n( ^8 A5 C - <script type="text/javascript">. @' ~2 Q: x- `5 d+ V8 \
- // 我们的数据对象& P) V# N T! O6 ~
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}3 N7 D; \! K! d% q* V6 v
- var vm = new Vue({* u! f% ?, x. e. _7 d
- el: '#vue_det',
/ L, C; h( i7 Y - data: data( ^6 Z: [! A2 }9 j
- })9 {, I' B8 ~/ c7 N+ d
- // 它们引用相同的对象!
1 u: U/ p! ~ j/ k) a7 a2 Q0 `4 f - document.write(vm.a === data.a) // true' G: S6 i) W3 y* I) A7 R
- document.write("<br>")
w0 g0 n6 {8 m" U - // 设置属性也会影响到原始数据0 ^# c/ E! F# |% `+ b- \
- vm.site = "Runoob"
$ W" x9 q2 l+ X4 t. a. G - document.write(data.site + "<br>") // Runoob
8 g; m& m$ K4 a' d - + l3 L: {* k- [+ w' ~
- // ……反之亦然
4 K* U+ {' ?$ G# x - data.alexa = 1234# d! `* a K O P
- document.write(vm.alexa) // 1234# O( b( R' E( ^5 o$ i
- </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">- o( d+ F/ }. I5 i/ j
- <h1>site : {{site}}</h1>& |4 l7 q6 q+ N. O( G& T- e! J
- <h1>url : {{url}}</h1>
$ L" p: ?) o- j( t" B5 N4 K - <h1>Alexa : {{alexa}}</h1>
' \) m: w7 v3 h7 c - </div>
% G, J: m! V3 v" V8 v& ~ - <script type="text/javascript">: ^7 Y$ q) j# I
- // 我们的数据对象
. u5 x0 G; ]! ?0 e, v0 ]5 ^; z- z - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}. C: R* S0 M* E9 Y H
- var vm = new Vue({6 K Q* d5 @5 k1 k; l
- el: '#vue_det',
7 W: ]3 @+ S- L" {2 G* l$ I- R+ o - data: data
: N) T' B# ~: Q6 ]6 l8 L- A - })9 F# O$ p( m1 g" ~$ z4 v" t
-
7 O U: }* ?7 W2 [+ U( U( D - document.write(vm.$data === data) // true7 | M7 ]# s6 B) U; T
- document.write("<br>") // true- b2 R8 X9 Y$ M: p8 b6 G* z
- document.write(vm.$el === document.getElementById('vue_det')) // true7 L: {2 v! G* P: v7 A e R3 V; z
- </script>
复制代码 P% ]8 W$ Q, P% Y
& q+ R4 @- g+ J4 A& R9 z |