|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({5 Q {' \" V& y2 P' L
- // 选项
5 h. Y9 @2 X1 l9 Z! f/ \+ w - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
" }& }; j+ M' } - <h1>site : {{site}}</h1>" h. t7 ^4 P- L0 p# p# k e
- <h1>url : {{url}}</h1> |: F% L% X4 j6 D& {
- <h1>{{details()}}</h1>
' d& B1 l: C7 B$ I - </div>5 r% q* y- Z$ ^
- <script type="text/javascript">; i, v3 C4 C0 Y% `0 r
- var vm = new Vue({, G9 V, s+ a+ L# ~
- el: '#vue_det',
9 [9 u& `% d9 I L) R - data: {2 ? C. D+ U: p) f
- site: "菜鸟教程",
; j, X1 L( @0 P9 E - url: "www.runoob.com",9 s2 M( e' o- ]3 a5 C
- alexa: "10000"& V* a8 K" }- F8 U
- },0 |2 r2 P% b) N/ V; X: ?- [( A
- methods: {
* N8 o/ S6 T! r$ z! f# D$ X - details: function() {
/ c* ]: b8 `1 {: w5 m0 F* ?% R - return this.site + " - 学的不仅是技术,更是梦想!";. w8 \/ T$ y7 r r: N
- }
! X+ ~# i4 V% m- Z- P* L) ? - }- ~( r t5 I) m" t" e3 x/ [1 F
- })
8 } u$ K+ }3 v7 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">
4 B; B5 k1 Y- P" q - <h1>site : {{site}}</h1>3 }! b9 p. [1 i7 b$ s) o) u3 Z2 \, E
- <h1>url : {{url}}</h1>
- u0 Q( H% I' F- h4 a. s: @( W% f - <h1>{{details()}}</h1>
' z6 t- q5 y( d% w - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">" f" o) W+ E4 ]+ {! a; k
- <h1>site : {{site}}</h1>
- w7 `% L* Z* v5 L2 X+ D8 B - <h1>url : {{url}}</h1>
# o, m k) m/ v - <h1>Alexa : {{alexa}}</h1>
% H' r3 R% A8 l5 S: k - </div>
' ?4 V M8 n) i R; \% e - <script type="text/javascript">
/ Z6 g9 b2 c3 Q, ~* Z: f8 G0 y - // 我们的数据对象
6 {, N0 `: V, I - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
+ N! f( ~, ]0 T" B - var vm = new Vue({
5 ~$ O* n$ I& V# X. w+ G$ o - el: '#vue_det',
% V* d. z% O# f7 d6 r - data: data
) G! {: p( J7 M/ _. y - })
; x- n' d9 V4 A2 m, ] - // 它们引用相同的对象!$ \7 J" C2 m0 i6 o
- document.write(vm.a === data.a) // true l6 v9 y5 Z* G' Y2 E2 x
- document.write("<br>"). |3 \1 |# r" }# H9 E# H
- // 设置属性也会影响到原始数据
( c/ @5 B8 X i+ C# M: ~$ P - vm.site = "Runoob"1 o( `' B0 I& X+ A
- document.write(data.site + "<br>") // Runoob
. `6 ?# L) J/ Y7 y -
1 F" r6 q e# W% J4 x1 h) o/ ] l - // ……反之亦然
9 x6 v: H' Q" t - data.alexa = 1234
, b& }- B- U; y+ d9 ]$ Q# m - document.write(vm.alexa) // 1234
9 ?- t' |* p- ~ _; ^+ e, b - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
, Q( _+ t0 V Z, B" b - <h1>site : {{site}}</h1>
5 z( J* T: P* x" w; o b1 q - <h1>url : {{url}}</h1>9 Q4 I- ]# U1 i3 b7 O, r
- <h1>Alexa : {{alexa}}</h1>! S+ e! M4 N7 Z
- </div>
" z# z/ u6 B, [ - <script type="text/javascript">/ U, V+ ^* I4 ~. H- I6 ]8 R
- // 我们的数据对象) s& ?6 a9 j7 N! x
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}2 i8 T/ ?2 ^; R, ?1 b9 w6 i j- r
- var vm = new Vue({
5 z4 j: m" B- ` - el: '#vue_det',+ L; w0 T1 j- F* |. r
- data: data
9 E, X& E( B0 M6 r- U3 K - })( ]+ [9 J# f& {( _$ ?1 _9 u
- " i1 A/ c$ C0 G: b/ {
- document.write(vm.$data === data) // true* o* `. S5 s4 L- C C! u! s: `
- document.write("<br>") // true3 q1 `9 v7 V- l$ D I0 b5 k6 U
- document.write(vm.$el === document.getElementById('vue_det')) // true0 [- B4 U' c4 Q9 m+ f$ P
- </script>
复制代码 ( T1 Q4 r! a; H' j) B4 t& l1 P6 i% G
2 ?3 ~7 O, R, [ |