|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
. O/ i' Q1 Q* A - // 选项
! U$ E6 Z3 U' I6 @% o - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">3 n4 {3 `6 U! ?! o
- <h1>site : {{site}}</h1>
9 ~, j2 M3 W! @9 s) u - <h1>url : {{url}}</h1>
0 j9 T5 x$ v8 e' c2 K# q$ c - <h1>{{details()}}</h1>
& Q" O* s- d8 [% W( Q$ P - </div>' c, u ?' V5 e
- <script type="text/javascript">
- Z8 D' ?4 ]! w/ ?4 U3 N - var vm = new Vue({
$ R+ ~/ n! F6 \( c - el: '#vue_det',
9 c. |/ t. K3 a: g - data: {, n: H' q8 H# ?/ }3 `, W( }
- site: "菜鸟教程",& }, A! I; s0 [. Y
- url: "www.runoob.com",3 h3 B+ j2 a- u& D
- alexa: "10000"4 p8 X3 _6 a4 N; g; p+ |
- },0 w3 N9 C0 {, ^# V A$ n( y
- methods: {# }. f3 y' m" @- {" k
- details: function() {
. x9 @9 _, G' h8 C& {4 m% ^, N+ s' N - return this.site + " - 学的不仅是技术,更是梦想!";2 x5 @7 R7 `$ _4 p- F# `# P9 g
- }" T8 z6 s4 T( ^1 w5 p/ w
- }
+ X2 ]) r( K5 q% r4 m8 g' V - })
3 o# |# N- U" T4 \* p0 ?& V - </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">
: M( U! G0 e& i - <h1>site : {{site}}</h1>
$ M( l4 }0 _9 ~3 `, X - <h1>url : {{url}}</h1>
$ |- w/ {4 V: W. M( w9 O - <h1>{{details()}}</h1>
8 O9 O$ a6 C$ D h, W" C - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
" N0 M4 h0 l* o) S% I! a+ V. o - <h1>site : {{site}}</h1>
5 v# @9 |0 K! e2 w. f; Y3 S - <h1>url : {{url}}</h1>/ p* I+ ?7 U% V0 d" ^
- <h1>Alexa : {{alexa}}</h1>
3 I4 T) q! X2 W a6 f; A8 T. s - </div>" {" V% Y8 u* j7 T9 k% h7 i9 K
- <script type="text/javascript">
& v2 j3 J- c2 A3 e - // 我们的数据对象
; Y, `2 d4 O, v. F7 V - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}5 w7 n7 \' a, u9 B, K
- var vm = new Vue({
( w. @% r7 x0 B3 j0 h - el: '#vue_det',
& T+ v7 e, r8 T - data: data
* h7 T. ?- j( A4 @( U. N. K+ v - })
6 G3 @' e$ _4 E; Q - // 它们引用相同的对象!
; F& Y" v3 A) ~0 y - document.write(vm.a === data.a) // true
0 {' J' m+ y& L- Y. ^ - document.write("<br>")
2 m, f; Z% {! K3 q - // 设置属性也会影响到原始数据
: G% ]0 F `3 f0 m4 A - vm.site = "Runoob"
" q ]! A/ F0 i/ n1 B3 U - document.write(data.site + "<br>") // Runoob" Q) j) y% \: p& `3 i" ?
-
4 W1 V( R5 D( y - // ……反之亦然2 E0 K% I# D5 U y
- data.alexa = 1234
3 W* s) v% C6 u" @- g - document.write(vm.alexa) // 1234
( u, ~; e* g. Y( t1 o3 n# ~ - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">+ D8 T* `; D+ X" p( x+ e
- <h1>site : {{site}}</h1> ` C2 x4 ]. m$ p: m7 U" @* v3 @
- <h1>url : {{url}}</h1>: j7 j( `3 t, V1 m. ?4 T: @
- <h1>Alexa : {{alexa}}</h1>/ L0 d7 e3 y1 s0 Z" d; b
- </div>
3 o+ U& Q' J6 u - <script type="text/javascript">" X7 W. R5 B, l [" R- m8 e
- // 我们的数据对象
5 { }6 n5 c: V# r2 u - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
t3 P% V" \) A- ?8 R- ^& l6 ^ - var vm = new Vue({ b2 P7 s" F- C. ]0 b" E
- el: '#vue_det',- H, s% a/ B' v; M
- data: data
7 n' |1 n$ s Q4 L1 W - })9 h$ O+ p2 t9 ~' ^8 O
-
' r" q1 i% {+ a5 h - document.write(vm.$data === data) // true
8 u4 ^# {8 C* H - document.write("<br>") // true6 z/ i6 s9 c z. X0 @5 F, J9 k" [ ?
- document.write(vm.$el === document.getElementById('vue_det')) // true- D! T! R. H# b1 ]# F0 `
- </script>
复制代码
7 O7 n% ?8 {. i, B- a1 E# p$ F! r" ^) S+ h2 t
|