Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
4 }5 v: X% E% v1 f! ~0 G - // 选项
% u% a. W0 n6 y0 P: o - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
& ]/ z. h) f5 J; @4 `# G - <h1>site : {{site}}</h1>
7 o' S- `' P; B; f& j- D - <h1>url : {{url}}</h1># K( |# b% z# J$ i0 r7 N1 g
- <h1>{{details()}}</h1>3 X. e Y1 d& e: M" G5 I5 P
- </div>2 S& r6 [1 V' Q4 I% W
- <script type="text/javascript">- u/ L7 e! o$ N5 K
- var vm = new Vue({
# H% I3 W) b! Z$ L/ h - el: '#vue_det',
( ^2 O0 Q! H n! }- R( ]/ @ - data: {- t* R# l2 y" D; j" e* G. @
- site: "菜鸟教程",; q+ t# ~4 |6 l8 P
- url: "www.runoob.com",
/ D; h+ l" L1 S7 K' } - alexa: "10000"
# L8 u; O# m! S - },
# |: u5 \7 C5 H% P - methods: {
+ e, @# Y1 Y1 J; p - details: function() {
& D* ` `1 |2 C+ U4 |$ H! K - return this.site + " - 学的不仅是技术,更是梦想!";- R$ O ]- H; a! u: T
- }! L9 ?2 y/ f: F! b( v% k; t
- }8 X$ ^2 U( [' c3 c9 o% }. j
- })! I$ ^* Z. z D4 j- d! |6 I
- </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 S; ^ W8 i5 Y: }1 h8 v( V
- <h1>site : {{site}}</h1>
4 X8 s# o9 r$ M, j' z4 N - <h1>url : {{url}}</h1>
9 X5 X$ s- _+ c - <h1>{{details()}}</h1>8 C( Q8 c7 t* X: [
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
2 L5 t- x- m( @ - <h1>site : {{site}}</h1>2 [2 I6 {0 t8 D) P7 h$ j' I' O
- <h1>url : {{url}}</h1>
" m7 r8 @, l! s* j - <h1>Alexa : {{alexa}}</h1>
& ]$ f/ w2 |6 f - </div>
5 {1 M* {8 Z$ f1 w( Q - <script type="text/javascript">
5 ~' c% C6 X$ n K$ G; W6 {1 n - // 我们的数据对象9 U' ]' T, z, H! h
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
$ M! F* T7 ^+ c& r, M! |3 g - var vm = new Vue({
; J5 S" C: p z" {7 x - el: '#vue_det',5 K s# z6 }0 a, T u& v
- data: data$ @; ]. W" t4 L* {+ b
- })
K( a6 v) S& b- ]' c4 N/ B y - // 它们引用相同的对象!6 @" J7 k/ G: k
- document.write(vm.a === data.a) // true8 n, e8 p: q) t. ~
- document.write("<br>"); E0 Q+ ~8 h( J- \" T) q3 Z6 U
- // 设置属性也会影响到原始数据) a2 b# O& ? d# ]; e1 ^
- vm.site = "Runoob"
V8 @ j' s( Q4 U - document.write(data.site + "<br>") // Runoob9 c/ w( H( C e( Y+ x2 Y
- * l0 E' K6 D* h2 i5 j6 N: G
- // ……反之亦然
# a/ P7 t4 O! z3 a" y R3 q - data.alexa = 1234! W# i) \( S- [. I: G
- document.write(vm.alexa) // 1234
6 T' Q5 [9 y" Y5 r8 a2 n2 N2 t - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">: B( d" ^5 I: @
- <h1>site : {{site}}</h1>
+ I# W& f+ h4 _+ S9 T/ W - <h1>url : {{url}}</h1>
% p+ Q E. H0 d+ o, G - <h1>Alexa : {{alexa}}</h1> B! P- g: y6 r' ?) G+ V
- </div>6 \+ S9 c: u# V& ]$ b+ {' O
- <script type="text/javascript"> W) q. L0 o4 ?" l! {5 e
- // 我们的数据对象/ |+ W2 [# }: s0 p( d* E! f
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}7 W8 I) o9 S, o4 m' w/ r4 H( F
- var vm = new Vue({% B K/ Q. {" P5 D
- el: '#vue_det',
1 A0 I0 c/ p+ Y( B- v: u/ ^ - data: data
$ Z; r. x1 o: @8 B - })+ a# D' X& [% G( \ \
- 4 B A9 F6 r6 e I2 `: J1 B' |+ k; a
- document.write(vm.$data === data) // true
6 U2 p# c$ X: g( B5 ^ - document.write("<br>") // true
; p- a0 g- k) i3 d7 ~( M% x - document.write(vm.$el === document.getElementById('vue_det')) // true7 D) k3 f) I: I1 e; R
- </script>
复制代码
) n _+ j& Y' f" p, ^: z. G" y, g; l( s! X- e6 q, ^* B! v. L
|