Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
5 l c3 u$ |3 F0 s9 ~* d - // 选项1 [( e! E! J% G$ V- P n
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
' E& a6 ~! V9 U2 d1 m - <h1>site : {{site}}</h1>' {3 x1 N" F6 g6 q) b& ?
- <h1>url : {{url}}</h1>
& m& A+ G# W8 [1 O - <h1>{{details()}}</h1>
3 Q" V Z1 R9 B9 L- P# ?0 F4 Z - </div>
% N, t% L9 m& {9 K# G - <script type="text/javascript">5 I+ k4 l/ v, g1 }! B% K
- var vm = new Vue({
4 R6 M' o$ \* p/ `2 J1 d - el: '#vue_det',
* H8 F* T! s7 t) P" M! m - data: {8 i4 z, e M( z* G- {
- site: "菜鸟教程",
! B' D1 ~" P6 i- v' E! U5 ^8 A+ j - url: "www.runoob.com",) G3 m6 ~" |4 m' w. E% \+ t6 y
- alexa: "10000"" d: R' O: `6 X; M8 ]
- },
) L% l" ~9 _8 Q6 ? - methods: {
! f0 T) E9 _6 D0 W1 P e - details: function() {
7 l0 t' U( ~$ }+ Y - return this.site + " - 学的不仅是技术,更是梦想!";
. a6 q: g8 w4 m - }
4 I- | j7 X: ^8 ]5 {, r" V - }
6 h+ C( i1 ]1 h+ y0 W2 r - })% W# ?6 `! I- ^: k9 O1 f) l' S
- </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">: J' M/ W5 M7 v- K
- <h1>site : {{site}}</h1>8 J' n" w8 O. o. b4 [, e
- <h1>url : {{url}}</h1>1 R8 A9 x9 O" A6 L' i* {3 X
- <h1>{{details()}}</h1>
* }1 F* S4 ]0 ^6 \1 X' @! b6 q - </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">3 N+ N+ S) [ S: x
- <h1>site : {{site}}</h1>. A4 s: w) w* m
- <h1>url : {{url}}</h1>
, K' ?9 t7 X/ j - <h1>Alexa : {{alexa}}</h1>$ ~! ?; ?0 ?9 b) R1 D
- </div>: _3 {5 X+ T7 D1 D8 `' g
- <script type="text/javascript">
8 U" g. O. ^$ ~1 ^1 C% h - // 我们的数据对象, Y& L& ?- n2 H1 u) {& [
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
7 U, _& n% z9 R! d1 l - var vm = new Vue({! h/ t) B0 \5 [
- el: '#vue_det',
& ~2 o6 n! f$ Y) ~/ p; u* ]6 x - data: data
% O& M0 W) `& ?5 M' U7 K3 l - })) n9 a/ P# ^1 I! G& b% C
- // 它们引用相同的对象!
$ p# Q; I' n, j$ S: u' | - document.write(vm.a === data.a) // true
5 I3 k5 ]' B, U3 \: ^ - document.write("<br>")
) @/ b" U! p( O2 D' E - // 设置属性也会影响到原始数据* e/ k: r8 `1 j1 C8 R" s) b
- vm.site = "Runoob"1 v4 i0 K$ N. z% ^ K4 Z9 |
- document.write(data.site + "<br>") // Runoob8 @6 m, C1 p7 ~; a: Z% V
- " ` R- w" O2 L2 ?& ~7 |; n
- // ……反之亦然9 ]5 b) u& |$ ^* }* E
- data.alexa = 1234& y: E+ w. N, J& b# l' U- U( ?
- document.write(vm.alexa) // 1234
7 E6 @. |3 }8 s2 X# P! h - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">: q- V! M1 N O a9 X* O' y0 o$ w5 ?
- <h1>site : {{site}}</h1>
( c; @- x9 L9 }! Y6 ] - <h1>url : {{url}}</h1>8 Z8 u" r( e9 o) X; }% X
- <h1>Alexa : {{alexa}}</h1>
. ~2 v J+ G- K) z" |9 j& z - </div># A) v) J0 \: U- z7 Y \6 A
- <script type="text/javascript">- C* [! ?: O% ^! S3 F8 x) {
- // 我们的数据对象
- {0 `7 b0 X% o2 Y: c- x - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
+ @7 o5 r e; _0 i! J+ L& Q! [ - var vm = new Vue({1 f/ i5 h9 G( \, X6 @0 F% Q8 ~
- el: '#vue_det',
) e J/ U8 e( X& b - data: data
( {. d) O& k/ [" ?% D) K. ^1 j, M$ X - })
7 F# x& J3 T* S, X - $ t: q6 R# P2 A2 g) ]( }% Z# k
- document.write(vm.$data === data) // true6 E% k$ \. o$ q1 P; O- c
- document.write("<br>") // true3 \9 ~" T+ W: T* s
- document.write(vm.$el === document.getElementById('vue_det')) // true
! D7 A" c* j4 f3 Q9 d - </script>
复制代码 : |4 ~: k! D4 a% N2 [- v$ U
: \! h. h# W/ t0 Q9 e, W- C4 @; \& \ |