|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({. A7 }, Y9 y& X3 u' d. o+ E$ o
- // 选项+ m0 L, H& B: j) J3 P
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">6 g: h* u5 [* J& C9 ^2 q
- <h1>site : {{site}}</h1>' M! Q" z3 [) U7 v6 R9 o, V' M- e
- <h1>url : {{url}}</h1>
9 H) F3 P- J( z, ]+ t% \ - <h1>{{details()}}</h1>
4 a6 w( T. L4 [8 H! |: p$ \ - </div>" K2 W. U9 H( F& E6 x1 Z# a0 g
- <script type="text/javascript">
" ?9 C7 M/ D* E5 X - var vm = new Vue({
5 ~2 o- i' L( @- a& e8 r - el: '#vue_det',
0 V& w; y0 U. S - data: {* Q3 L8 V; r& \) M0 b% B% X5 J$ Y1 L
- site: "菜鸟教程",
2 D* a) I3 o; A3 ^0 c - url: "www.runoob.com",9 ~! x) i4 R3 A& H( b% P3 P% K
- alexa: "10000"4 O) C& |' `* i1 A0 b5 ~" j) C) p8 p
- },+ E0 b, G2 m. ]" i- b
- methods: {! Z/ Q+ w. R) y+ k8 w7 @" b }
- details: function() {/ v; Z3 }! T, n- K5 b* b; T
- return this.site + " - 学的不仅是技术,更是梦想!";! A& N: W g* w; k
- }
5 ?$ E) I& \ h2 z4 T3 k - }0 `5 |& l' Z9 O/ q( u8 w
- })4 A% S; N5 q, q( y8 P
- </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 b2 K" l: c9 D- w - <h1>site : {{site}}</h1>9 D9 ]7 o) |! ?7 B1 T
- <h1>url : {{url}}</h1>+ j$ S: ` g/ n/ \3 J
- <h1>{{details()}}</h1>
! O' h% B2 I8 {6 P" f8 j - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
3 q% M2 R: m# _. u0 q) K, h - <h1>site : {{site}}</h1>" [, |: [/ |7 a/ Z; L$ I4 q; p
- <h1>url : {{url}}</h1>7 d& y# H2 ]" o! n- d6 `
- <h1>Alexa : {{alexa}}</h1>
1 H" N$ ^! k4 g/ g% N - </div>! }; S3 _- K$ N+ d6 |: q+ I$ @9 i
- <script type="text/javascript">
: D& G" b6 a! p# ^) x" X, o - // 我们的数据对象3 K# C$ ~" n3 y1 }
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}* E+ |, x3 Q. u; j3 O+ A
- var vm = new Vue({
& p8 A1 R3 p8 }& H - el: '#vue_det',1 `- `' A% P& H: e
- data: data
8 X. i$ g) o- O- ] - })
& S0 S$ x- T0 y/ D9 H( { - // 它们引用相同的对象!1 N, t$ Y$ j$ m& U V) O5 ~
- document.write(vm.a === data.a) // true, P: {+ W) P y& g* I6 c5 ]( `
- document.write("<br>")
4 V% u6 o! |4 } x$ {: p - // 设置属性也会影响到原始数据
7 q+ L; z7 ~, I* `6 p! P6 s - vm.site = "Runoob": V) U/ t" P( {3 N; F0 s7 |2 f) u
- document.write(data.site + "<br>") // Runoob ^2 A7 `, I; O3 }- q T: I& b$ G
-
$ }- m6 u- g5 e - // ……反之亦然" s& H. N; X) N4 l; j
- data.alexa = 1234
! x D- k6 o5 l! H2 f. R - document.write(vm.alexa) // 1234! M; s& k, g+ q7 n
- </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
+ n7 j/ Y, y& k, m' I9 x8 w - <h1>site : {{site}}</h1>7 R. h3 x. w" G
- <h1>url : {{url}}</h1>
4 ~ s9 e& N( R! c/ k' [$ m- J - <h1>Alexa : {{alexa}}</h1>. m2 Q$ J8 d4 a& b' ~: t
- </div>
W, F: y( u) A; J8 a - <script type="text/javascript">
# p# n8 \' V8 L. Q" {6 v - // 我们的数据对象
! |4 c+ P: t- P$ K# a - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}$ }0 @2 P/ n+ m3 s
- var vm = new Vue({5 H3 X) \1 J4 Y* ]& U/ \
- el: '#vue_det',% K' Y+ M8 e$ z( [9 b7 R3 B( K
- data: data3 N# L! s7 J' e( f; k1 b" u
- })
. j9 K1 Y! L# w6 \ -
% C4 }7 q3 z) o# P# @- A - document.write(vm.$data === data) // true0 C+ Z, q$ e1 E/ F
- document.write("<br>") // true5 ^: b$ P1 c# q; w. K
- document.write(vm.$el === document.getElementById('vue_det')) // true1 Q( e/ E5 y8 ?3 Y7 _
- </script>
复制代码 * M; s4 \ s: [" ^# G8 |! |
/ G8 }1 a# N6 Q0 ^. ~& ]; ?
|