|
Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({$ ?% L }8 D; z
- // 选项
3 a! l+ x1 M1 Y$ T) G/ l* f - })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
* @$ [' F! p9 u% T n. ]7 N - <h1>site : {{site}}</h1># p3 U4 R; y5 o( S8 S
- <h1>url : {{url}}</h1>( m* l$ F' V0 H5 {# l
- <h1>{{details()}}</h1>* T) V7 \, k" Z; D
- </div>
$ _% R, `( q# M6 _" f5 L2 _; [: R3 O - <script type="text/javascript">
* D9 Y6 }' W/ L% v' [8 Y - var vm = new Vue({
" C, S5 G7 |% V, z3 ~9 L- r8 g8 u$ s - el: '#vue_det'," T& N: X! z" i; j
- data: {2 Z% ~* E! E6 k! Y
- site: "菜鸟教程",( N7 I' H8 B# O/ }+ z
- url: "www.runoob.com",
. ~( y2 a, w( U - alexa: "10000"
, w0 h$ N8 n: t) U6 ]7 m7 W - },
9 i" Q$ T: g* i( `+ @5 f* i - methods: {* I) R3 t; g9 K% }. g: k, v4 |
- details: function() {
0 \: Z9 T0 E7 w+ i - return this.site + " - 学的不仅是技术,更是梦想!";2 V5 w1 y: X. [' [+ [/ W* J! T
- }
) W4 ^3 P: h, P - }
/ Q8 p9 F0 P: w, J6 B. C x - }) {& t7 Q4 H6 _! D; p5 Q* F' q
- </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">8 ~+ A1 \9 N% s
- <h1>site : {{site}}</h1>+ Y; F: N; I6 N5 {* y" T
- <h1>url : {{url}}</h1>
$ |; F7 _9 P+ ^/ v7 R0 U - <h1>{{details()}}</h1>. |+ y$ Y% @6 q
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">; y+ {" K- u8 @ a- ~' g
- <h1>site : {{site}}</h1>6 M) c$ R/ r9 ?: \, M
- <h1>url : {{url}}</h1>
. Q% j7 n( t6 ?. }8 h - <h1>Alexa : {{alexa}}</h1>' Y' `& I# v+ T Z+ ~
- </div>
$ \9 X4 }, p$ K/ [ - <script type="text/javascript">
9 ^$ m% S1 J& C7 E3 V: j3 e# v - // 我们的数据对象
7 Y y9 Y S* r/ b" { - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}* t% \6 Q0 K0 w, `- U0 }1 T# s* i' n
- var vm = new Vue({
+ k) B2 c- U4 L4 P$ l, N9 M. t2 J - el: '#vue_det',
w/ g- w. e/ {0 e7 M% o7 l+ ] - data: data
) y. w( y, r" T, E7 ~% f% @" Z# V - })
. p, Q4 j$ {, O# l& y2 Z0 ~ - // 它们引用相同的对象!! }: u8 x0 t* ~4 T
- document.write(vm.a === data.a) // true: o/ ?% N T/ S1 P% F/ n. a! Z4 L
- document.write("<br>")
+ r8 S/ s+ F$ X( \9 t$ N2 F - // 设置属性也会影响到原始数据
! a7 a; f! r/ z - vm.site = "Runoob"# ~/ k! h. L; b# G
- document.write(data.site + "<br>") // Runoob9 m7 M( M* L, R, k
- 3 M; R" O, R& A* d: [9 [
- // ……反之亦然" d; g3 n: W- a# B& T# _
- data.alexa = 1234
+ m! ~! l1 }# O; K& p4 O) P) T4 R5 ^ - document.write(vm.alexa) // 1234
% D; S2 [; g4 N W - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">8 r5 V8 i: ^9 S2 V# M
- <h1>site : {{site}}</h1>9 e& y0 a# D% O& U) Z4 Z
- <h1>url : {{url}}</h1> l8 \2 X% Y+ t1 N
- <h1>Alexa : {{alexa}}</h1>6 [4 q4 k; m& V; o/ u5 Q) {
- </div>1 P) d2 e) p( d# d S. _
- <script type="text/javascript">& u$ r3 e' B* k$ l. d0 ?8 Y
- // 我们的数据对象
, N' k5 b: Q) _( o - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}7 {" z. Y. f7 v# `) b8 w) d
- var vm = new Vue({
! h0 l7 q% y- Q* y. M" p - el: '#vue_det',# z1 G) o3 M( A ?5 h
- data: data% D9 g8 o/ U. E+ C
- })
@ z# u4 m' I9 l; [2 F -
1 i6 V& d4 l. x3 U - document.write(vm.$data === data) // true
0 e0 z2 M; U6 J8 \/ P - document.write("<br>") // true
9 P3 H6 ?7 m6 U; T) O - document.write(vm.$el === document.getElementById('vue_det')) // true2 d! \$ |9 E, `: s6 J. T* E
- </script>
复制代码 ' y4 d k$ K1 O1 G% }- ?5 R
4 X/ x' B& j5 i& B2 z3 _0 m
|