|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({' w, J% M Y: T( u" x' H
- // 选项
8 q d. u. x2 R- P - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">3 J; u7 l" b4 ]- _, R1 g: J: w
- <h1>site : {{site}}</h1>+ f/ A; Q9 ?7 p& u2 F
- <h1>url : {{url}}</h1>
6 V" a5 A9 l! F k8 x$ q( k5 F - <h1>{{details()}}</h1>
' L: L) Z8 m' m# g" Y H* ~ - </div>7 J& {" c- t* [3 }! w2 ~
- <script type="text/javascript">
- X. Y' f' f1 M5 S6 \ - var vm = new Vue({8 `4 z$ z3 l9 H. }0 j# _% @$ u# @
- el: '#vue_det',
1 z! B) ?2 Q$ S4 b5 W* K - data: {
1 Y2 n, {" [ o - site: "菜鸟教程",
. O- s' l4 k# T( S! a9 W - url: "www.runoob.com",
9 z) [6 k/ U. n# E5 C, O - alexa: "10000"( w% W7 q# C' d( h/ N8 z5 j/ h
- },# e& M; P; j6 z
- methods: {
" ~ x. _1 ^; I4 e6 T3 K9 J S - details: function() {
8 K$ g0 o" A g: T' q3 H1 H( | - return this.site + " - 学的不仅是技术,更是梦想!";3 U. y9 T! `% r7 |6 J8 G' ^: B0 D2 ]
- }
9 \3 Y- @& J5 X+ o - }
0 k- W7 ]' Y$ O: S - })
" Y/ y9 {: w: Z- l - </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">7 b, b# Q' o; W6 f% u+ l+ W$ g
- <h1>site : {{site}}</h1>
* q0 r! q8 D2 c# j- W; { - <h1>url : {{url}}</h1>
1 |* O- K8 l1 j5 T6 E - <h1>{{details()}}</h1>1 P" E& N- R2 S
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
8 a# T4 E6 Y/ S! i6 C5 {% ^ - <h1>site : {{site}}</h1>( u8 p9 ~% x6 a3 a/ D+ X
- <h1>url : {{url}}</h1>
, h1 `$ x0 I0 N - <h1>Alexa : {{alexa}}</h1>
& N" X% F( I" ^. B - </div>
* |+ [$ z5 s% e; Y' c - <script type="text/javascript">
G: F ^ ~9 S! w% R; c3 D6 y - // 我们的数据对象, I- v! X% H e
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
8 M- x$ ?- ?7 k+ A# ] - var vm = new Vue({
0 M& h$ |, r$ e! {/ [+ P9 h - el: '#vue_det',
; ] l. X4 E F( K$ M3 E - data: data+ A9 R7 U8 R/ z' j8 v( R
- })/ J8 e9 K1 Z- n) y7 {
- // 它们引用相同的对象!" J; [7 g h; R' c8 _1 R, |6 I
- document.write(vm.a === data.a) // true
. l; S$ u4 J# F) A/ n8 r - document.write("<br>")
. `+ K( e7 m! D ~; B - // 设置属性也会影响到原始数据
2 P: O" t, Q- X: U% {" k3 \ - vm.site = "Runoob"
, j% {8 w$ H8 ` M2 J9 T5 }: c - document.write(data.site + "<br>") // Runoob* V) a1 p P% A# a. R% m
-
/ {( C) B5 U- z8 L - // ……反之亦然
& U! |+ N9 ]# J/ H. h& g - data.alexa = 1234
% O2 _! k$ [6 f' d; @& \9 K' E. j9 Z - document.write(vm.alexa) // 1234
4 b! u& j) K+ n8 i - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
9 R2 W# i, I) A5 z( r2 a& ] - <h1>site : {{site}}</h1>
5 f: C y2 r2 j P7 m - <h1>url : {{url}}</h1>/ A: x8 ~) C n& a
- <h1>Alexa : {{alexa}}</h1>
" @+ N* B0 V9 F: f8 [ - </div>
7 H+ Q- O! C: f; H - <script type="text/javascript">
% `: g) T t6 a0 P1 u2 w% U* c - // 我们的数据对象5 C5 Q3 P \- h4 F
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}7 y" Z) _9 A5 u$ H8 @0 v' N5 _
- var vm = new Vue({
* P/ Z" \. t' G0 @7 r - el: '#vue_det',
# `4 J: A* P* v, g, P) z - data: data
4 u$ S# D( z$ M& g - })) g* I1 k* h9 b. W" z- B
-
* r/ Y* T" ]2 K" j+ H. M - document.write(vm.$data === data) // true
" H, `% Z. W0 Y' m# J% y/ h, a- Y - document.write("<br>") // true
2 E% X* F. K7 K! T' g - document.write(vm.$el === document.getElementById('vue_det')) // true
8 N1 r ^. `3 J4 |3 y( E" X; P" Y - </script>
复制代码
4 {* M& i3 w# p: u D" L& Y7 |
; P2 Q" l; J, r5 c& D2 e |