Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({5 T0 \2 q+ j% f; b$ F1 j1 } R
- // 选项, g9 a$ _$ Y% y0 e8 n! H( g9 s( l) W
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
( m$ X. q0 a+ h7 Y0 r$ I - <h1>site : {{site}}</h1>) b* d3 B' c" ]
- <h1>url : {{url}}</h1>
6 J) D# ]$ e( X: \ - <h1>{{details()}}</h1>2 E8 | n% ?4 I \( A
- </div>
o: M. q% R) J# g- X) Z - <script type="text/javascript">, X$ t5 ]: \0 @6 ~
- var vm = new Vue({) l% J" q, @( }8 H3 E
- el: '#vue_det',% S7 L) \) `; M& \' ] D
- data: {* F& v( ?* }) m% e
- site: "菜鸟教程",+ z' `' k$ T8 z/ x1 B$ l
- url: "www.runoob.com",% t o: x8 a4 q9 ]6 o
- alexa: "10000"' q, B7 a/ M' B' w
- },
3 U! l! i6 N$ k' t1 U! A# j+ K4 a: Y, F - methods: {3 B9 }% R8 }! X8 t+ w
- details: function() {
! M3 g6 @ p+ E& ]0 @- k" M$ v - return this.site + " - 学的不仅是技术,更是梦想!";
! b% W" Q/ U/ h# ~' u: r - }2 i+ i. K j7 M" v0 P
- }
$ V* }% b. T9 v: \! @ - })+ f' S# [8 Y! ~! S( H5 h/ \
- </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">6 h% ~9 Y4 Z4 ^
- <h1>site : {{site}}</h1>
3 f9 X9 V& v5 r) w0 M - <h1>url : {{url}}</h1>
" k4 I( ?: f. S: w+ F8 i. K - <h1>{{details()}}</h1>
. e7 o) m. j3 f* u/ O# @ - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
9 T* y1 `9 B; K e: j! a - <h1>site : {{site}}</h1>
+ W7 {; |( @1 `% D( [ - <h1>url : {{url}}</h1>) A( V) W# V3 v) d- }. P
- <h1>Alexa : {{alexa}}</h1># o3 e! W: p5 O0 k" t0 P
- </div>( E& _+ T s/ J0 B4 j3 p
- <script type="text/javascript">
7 H+ E: J7 C5 f - // 我们的数据对象
V# p: |1 O( G! O5 d - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}5 p% H% @" U S: D, H2 R3 I3 x' R1 Y
- var vm = new Vue({7 m$ `4 C9 x1 T( g8 z7 P: H* b
- el: '#vue_det',
' P6 n( L1 d' V7 \ - data: data" L# g% n- ?6 D9 J
- })
4 V3 C( Q; s( i% u/ n - // 它们引用相同的对象!
! v- o3 T. d* L - document.write(vm.a === data.a) // true$ Y. p% F8 C2 G( M
- document.write("<br>")- X; o4 E6 e# O& _* {4 u& V
- // 设置属性也会影响到原始数据* q( |- o! d0 `" r3 q( I6 \; n9 m
- vm.site = "Runoob"
( c' g3 w0 w) w - document.write(data.site + "<br>") // Runoob* k1 D+ L' i3 m0 O$ @) |7 X
-
. B# m5 W8 N8 D6 z - // ……反之亦然
& H, F `- D. ~+ X% Q - data.alexa = 1234# L! G* e6 _3 L! e( C/ N
- document.write(vm.alexa) // 1234
: ]: Z. E7 X1 i" t( I - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det"># R- n# A- X h( Q3 N( i
- <h1>site : {{site}}</h1>9 M9 l" h& s/ o
- <h1>url : {{url}}</h1>8 l. F; y) X; A4 }/ e/ i7 n% P2 s
- <h1>Alexa : {{alexa}}</h1>" l- _2 ?5 n* S' W- W3 b
- </div>- |2 r3 d' ]. V/ A) b/ x
- <script type="text/javascript">
/ K, K7 ]6 r& ^) I- ` - // 我们的数据对象1 F5 x8 Y) V8 ~9 Q5 _* I+ x) N
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}+ V3 |5 b+ `0 |: V
- var vm = new Vue({# \3 q V5 ~0 S
- el: '#vue_det',' U* U' t- X' U) A2 t: L! ^; |
- data: data8 Q0 p0 Y2 j7 k+ X# b
- })5 h1 Z) P1 w7 C
- 3 r* D" P# X. m; A. C
- document.write(vm.$data === data) // true Y4 j3 u* D4 J; Z5 T) S
- document.write("<br>") // true R; u! I! \ N3 ~
- document.write(vm.$el === document.getElementById('vue_det')) // true3 I% {& F* Q# r- Z( p: K, T- [, {0 f, `
- </script>
复制代码
5 d0 j1 s# |' e3 m5 S3 ]6 E3 h+ H% B( C) g: ~) _+ Q/ e% P
|