Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({9 }4 a6 i) y1 \' h6 z! t1 j
- // 选项6 b6 J: F; ]3 a; s* c
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
7 h( y+ F. g' m- {0 _2 ~$ S* ^ - <h1>site : {{site}}</h1>
5 \2 k, A8 I. Y* C* R - <h1>url : {{url}}</h1>
2 M" R* R, p% B7 P& ^! ? - <h1>{{details()}}</h1>
( V8 B7 Q4 g0 h% w( g, K% h+ k - </div>
5 u5 m7 ~ q, k2 i* k& Q! H6 H - <script type="text/javascript">
2 L% {( d$ V! o) I! E2 E3 }" F [ - var vm = new Vue({9 X0 L6 S" `5 c4 ]
- el: '#vue_det',2 k9 i* q8 I: A( O
- data: {3 c! u$ }. y7 r" w. \
- site: "菜鸟教程",% G3 F( w' Z( {. y* \/ s* k" l
- url: "www.runoob.com",
" Z' n- N1 o4 z% w& j - alexa: "10000"
& C4 N+ [, R5 Q - },/ S4 ^: j6 \9 o1 e
- methods: {
W. A# J* \, s. i" R! }, U - details: function() {# B8 W) @! N, O$ f
- return this.site + " - 学的不仅是技术,更是梦想!";
7 d. d1 |) I8 x% U, x" R9 {: ~$ d - }( O1 W9 o" s% `9 v" r7 v/ ~# `
- }3 h& F, e) W2 t/ e
- })
* b8 }3 \$ f" R5 | - </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">5 e+ g5 d# M( A3 O4 k
- <h1>site : {{site}}</h1>; T, H8 n1 k7 z8 D- f- q% X# j% Z
- <h1>url : {{url}}</h1>. r z# ?5 _- \2 V9 I: {
- <h1>{{details()}}</h1>
% \$ E- Z! I8 e# B# _/ K - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
4 Y7 Q' e& Y9 ?: w" L2 i - <h1>site : {{site}}</h1>
# `* B/ G, w( i/ K Y - <h1>url : {{url}}</h1>
) u1 k# Q, v, O8 W. s( M: r - <h1>Alexa : {{alexa}}</h1>
' ]! @/ }7 O2 r& ?7 ` - </div>
4 h+ u5 E* e2 T( g2 o$ u8 U0 r7 n4 I9 I - <script type="text/javascript">
% {6 e) i$ l5 L. F/ U - // 我们的数据对象
5 j1 U0 j# X9 C+ G- W% h; z - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}9 ~1 Y% _: X. ?2 u8 @
- var vm = new Vue({
% C; U9 }/ v6 y; m! m5 H - el: '#vue_det',+ P* v- ~% [& ]1 x
- data: data# g; U1 L, c3 `& y$ w; {+ u; z
- })
) { S/ k( m- k5 G$ O& B" n - // 它们引用相同的对象!
/ s( H# J6 l" R( B- _# g A1 A - document.write(vm.a === data.a) // true& p. ^; A/ q- u9 y7 X) T
- document.write("<br>")1 y3 T) {( X ^$ ]
- // 设置属性也会影响到原始数据
9 P; g) P7 Y8 ^ - vm.site = "Runoob"+ P6 J t: c- S2 ~$ [2 R
- document.write(data.site + "<br>") // Runoob2 y2 S0 ~* d9 U( Q H$ L# }
-
& G, W7 |* l$ z. p$ U - // ……反之亦然" ?/ G7 H s) Z9 s- q! K
- data.alexa = 1234% [1 \+ v' S0 l* F0 ?: f
- document.write(vm.alexa) // 12348 ^2 ~# A S3 X
- </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">. Y. c) d( @) h8 Q8 I$ c# u9 A
- <h1>site : {{site}}</h1>
, j% J) T; H- o( | @0 A) u* } - <h1>url : {{url}}</h1>
0 m) e1 v- ~! O1 r- W8 A. O3 y2 d - <h1>Alexa : {{alexa}}</h1>( ^( X( ~. s+ ^, x$ f! d0 T0 y
- </div>! ]- Y o* {& E+ y8 R3 }: y/ {
- <script type="text/javascript">/ F* V. \1 s5 U5 B9 i3 ^
- // 我们的数据对象
1 x5 |1 k6 _& i - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
" P- e; ]/ x$ b# u* `2 n' f" v - var vm = new Vue({
N" ] J3 D h/ i; C( d6 P+ N - el: '#vue_det',) t! X e) L1 i! H- j8 R
- data: data) ]6 G1 r s+ |) _6 `/ J, _
- })+ x ~& V% `0 w* N- Z! \* A
-
( E8 W y) \, d) U. v6 s - document.write(vm.$data === data) // true
* m3 G+ [$ Y% \/ L* b$ V - document.write("<br>") // true
( V& T& `2 ]1 M6 _( e - document.write(vm.$el === document.getElementById('vue_det')) // true. V% Y# G4 K1 v/ [
- </script>
复制代码 , k6 H8 q) H; x, s' v
) ~" e, H* [# p, {+ E; n7 _0 `( N
|