|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
7 f/ z; |9 N0 `* {3 f# \- ^ - // 选项% |4 u( ~2 k6 Z
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
9 U: [" V, j9 ^# i - <h1>site : {{site}}</h1>
. ^9 e4 w2 C- `7 M; l7 U - <h1>url : {{url}}</h1># C8 ^( v5 ~ @+ e. \+ [ b+ G# p
- <h1>{{details()}}</h1>1 B7 D0 l' C1 l1 B9 q- a# P N1 @
- </div>
, Q! ?/ E4 f0 F5 j - <script type="text/javascript">1 b5 ~: G7 h' m- a2 v3 p9 g
- var vm = new Vue({% z2 u+ y& P6 ^( y2 T+ u! @1 j* X
- el: '#vue_det',* Y4 J F) P) ~+ X0 U0 C
- data: {
% D6 o; z. C9 v( h) X - site: "菜鸟教程",, ^, }& H9 y) O5 O' o6 }; Q0 Z" `
- url: "www.runoob.com",
; X% C$ W8 ~& y - alexa: "10000"* N0 D* `% u/ c7 x
- },& q4 v7 K M5 Z, u( b/ e+ X+ C
- methods: {
# i0 P+ |6 o8 | - details: function() {6 \' k o& b5 L6 k/ P: y" X
- return this.site + " - 学的不仅是技术,更是梦想!";
1 B: {% U" S7 Q2 f" m" u9 ? - }+ V2 p+ E! R; q, x+ i
- }
9 D8 N3 i) u3 n2 y- S' C% m - })
8 M7 k5 v: |6 X- k+ \, \ - </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 r8 o: B2 k @: H! Y - <h1>site : {{site}}</h1>
% b5 Z5 E* e! A* y. f - <h1>url : {{url}}</h1>
5 n8 a5 p0 h7 d' y' Y - <h1>{{details()}}</h1>
8 z2 H. t% s1 ?9 n/ h - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">8 ?) z1 t: B2 ]# j" _! T
- <h1>site : {{site}}</h1>
- Q& Y( Y: s! b - <h1>url : {{url}}</h1>6 P6 F8 l6 N$ D5 T3 o$ \ f
- <h1>Alexa : {{alexa}}</h1>' O& L; w5 G7 ?: ]* A# P4 E0 Y
- </div>* \" r5 I4 S8 ^0 O& [2 M
- <script type="text/javascript">
4 J/ F% |5 d6 P0 }# k$ @# M8 P - // 我们的数据对象
9 N9 G1 y) P. a" @- a: m# }; S! V - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
q; X# K3 U! o- o8 L- l" B2 H$ f - var vm = new Vue({' g% X/ C, i3 U& z2 U! V& D( t
- el: '#vue_det',
* A! N1 C1 @/ y) L# l% v - data: data
1 E {& ?$ K* p" z/ e/ i/ s - })0 i6 a+ Y7 F& ? T9 U& Z7 U
- // 它们引用相同的对象!, N' y+ g4 R" i) N% O
- document.write(vm.a === data.a) // true8 f6 L% K8 D+ a4 l x$ Y t. I
- document.write("<br>"); E6 C/ G+ \+ ^9 n7 s4 c
- // 设置属性也会影响到原始数据
) F0 S8 `* A6 v3 Z - vm.site = "Runoob"
/ S, |5 f. M. i - document.write(data.site + "<br>") // Runoob
$ Z7 |: Y3 Q* z -
5 ~2 y' k2 z, L# n$ z. X - // ……反之亦然$ N% r4 w3 r$ P# z( {( n: W$ N
- data.alexa = 1234/ V; P2 _. S+ i. o/ _( P2 U( [, o
- document.write(vm.alexa) // 1234 Y% u. b& w9 u, j1 }. H8 z
- </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">* h7 v. p% X/ ?
- <h1>site : {{site}}</h1>( C" ^9 q0 t" \3 o* X5 w
- <h1>url : {{url}}</h1>/ q3 S1 T" I6 C3 Y$ G
- <h1>Alexa : {{alexa}}</h1>% E/ a) | N$ t% C6 N5 }5 j$ @/ p1 V
- </div>) Q% |0 w- E1 I T! x2 j4 R
- <script type="text/javascript">1 t! d: p/ m1 I! a9 f9 F, P; V
- // 我们的数据对象
7 b1 { Z# ~( |$ X9 V, p - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}( |5 C6 y$ R) `. d0 v" ?! M
- var vm = new Vue({8 J- c. M/ h4 b7 t( p2 I6 V
- el: '#vue_det',
/ |$ K* E% Y- r+ h ~4 t# K' A - data: data) E4 V0 ^0 K" F2 F! ^
- })% H3 \- J. d) N1 y6 K) d7 w8 e4 x) d2 A1 W5 P
-
8 q7 c" o+ ^5 S9 f - document.write(vm.$data === data) // true' Y1 B+ y' B2 T* [( T, w
- document.write("<br>") // true
3 K1 ], ?, L. l M6 Z, ?- ?, O - document.write(vm.$el === document.getElementById('vue_det')) // true2 \( G6 I' X: c" ~1 ]( D
- </script>
复制代码
+ m1 [2 x5 y" \3 s$ M
! b6 Q3 t2 b9 Z7 W2 b1 R+ I1 j0 e2 l |