Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
# O6 b; ?3 e& ^# g0 }# p6 I - // 选项$ w5 T0 I4 H- [+ a
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det"># y. C4 L+ s8 e
- <h1>site : {{site}}</h1>
6 K/ b/ p8 R% O* D3 Y! P/ ] - <h1>url : {{url}}</h1>8 S5 q$ c" S, g- l D: L# s
- <h1>{{details()}}</h1>+ F5 m3 [# ?0 S. j9 s7 n( i' F, U
- </div>
- g: s2 z1 j. W7 m4 T3 h+ L - <script type="text/javascript">
3 y1 l8 T; K1 ]8 N: h6 Y! k - var vm = new Vue({
, W: P% Z% P- R2 y/ m5 C" B5 h - el: '#vue_det',$ y1 A% g' L) o% B7 E
- data: {
/ U H% C( m8 v. U1 f+ o. A+ ` - site: "菜鸟教程",
! m& v9 n6 Y l' i u - url: "www.runoob.com",# N) L7 b8 M2 [! e: o. E
- alexa: "10000"
; U0 `8 ^9 G% X - },
, g6 x9 [6 l9 \( \9 A - methods: {3 }# K- Y5 x- A0 ?
- details: function() {
" }& X4 s1 a A b% G3 i8 Q - return this.site + " - 学的不仅是技术,更是梦想!";
- l9 K x( W, F3 t7 D - }7 o6 v4 N) f! v5 N) a1 z
- }
2 o3 x1 `& r& O! } - })* K5 Y3 i0 h+ [7 j' {. 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">
4 q1 n/ ~+ l, e' ` - <h1>site : {{site}}</h1>: X" N- q; h% `. c5 E; U8 e
- <h1>url : {{url}}</h1>" [, H2 D: j) J3 Y* p$ X& i" ]
- <h1>{{details()}}</h1>
8 ~/ D5 V3 A$ H$ i8 D; L' u0 { - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">6 b: P! K8 C: e5 I% p! f
- <h1>site : {{site}}</h1># F4 [8 b- R9 H v/ w, N
- <h1>url : {{url}}</h1>' U9 s0 c6 z6 _
- <h1>Alexa : {{alexa}}</h1>
& C- a4 g; `0 A' J! n - </div>
, H1 X; B* X* m7 B) z - <script type="text/javascript">
7 s5 f! J Q1 |( {4 t - // 我们的数据对象2 f4 m/ B% R5 A; |
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
: h: I. u. o% t. e9 T( j8 A! b - var vm = new Vue({; Y3 h6 r C3 ~8 V8 Z6 D
- el: '#vue_det',
) p3 o3 C) y* {1 n* {! }7 a( t2 G - data: data
1 g# @$ u9 z$ D' p c, j - })
# @9 F9 n! U* _4 o0 v1 t9 `& R; O - // 它们引用相同的对象!
( j3 {" X P: O: V- d1 l - document.write(vm.a === data.a) // true
3 p) K* ^0 F+ H0 X( }2 X - document.write("<br>")
: D( e4 n' {+ S! ~. Z- B: B8 F - // 设置属性也会影响到原始数据/ c1 p2 P, K; r3 E' {' f" }
- vm.site = "Runoob"8 h$ J+ m" P# x
- document.write(data.site + "<br>") // Runoob
' r2 M1 w( V6 g K) s -
- \+ v; e1 W$ @% A& B! f - // ……反之亦然
1 G) i7 `' L, `2 c! A) t6 i+ G1 u - data.alexa = 1234
2 D; ]8 K( U- y# h$ c - document.write(vm.alexa) // 1234
' C9 a4 v% N' F5 [3 | - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">* l. P) g- l- H; f3 m4 r
- <h1>site : {{site}}</h1>
( x3 Q* u' [2 B - <h1>url : {{url}}</h1>& C; n0 s8 c3 n& M
- <h1>Alexa : {{alexa}}</h1>; f7 X( }* c- L; y* |
- </div>
* H7 n0 p3 U; Y+ u. v - <script type="text/javascript">, O" i- ~% ^9 r) L: S
- // 我们的数据对象, N% r& L4 U1 G& ]# E& W# |5 _+ p
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}" C5 z) k: h8 ~) |
- var vm = new Vue({$ `1 q* X0 Z, w% d$ C( ~1 }
- el: '#vue_det',' r/ J( Z: g9 k; n" w1 H3 g p
- data: data) l A( @5 p0 I9 w( c/ ?. M
- })
# O, N6 R' w# c4 a6 J -
6 I% w% V# ~; `, S! D5 \ - document.write(vm.$data === data) // true
6 T5 {' Y; f5 c' u - document.write("<br>") // true
1 X" b" v) g: W3 }. k - document.write(vm.$el === document.getElementById('vue_det')) // true
) G5 }( z( k L - </script>
复制代码
) I# u0 F( m# Z5 P2 O1 A& {. Q* ?
|