Vue.js 起步

admin

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

1. var vm = new Vue({
   ( u8 W5 L2 \/ N$ W$ j/ ~+ b( T& }
2.   // 选项
   5 m; t  e& V2 u, R% E. J9 _
3. })

复制代码

接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：

1. <div id="vue_det">
   $ ~4 ~& f& K0 j+ e$ U
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   : D" n! Z. j" Z1 Q2 \  f% d1 {! x
5. </div>
   
6. <script type="text/javascript">
   / N, t) c3 b' e+ x. v. W
7.     var vm = new Vue({
   * u3 W& @. Y/ W6 b
8.         el: '#vue_det',
   1 u6 _- _7 G$ S3 q1 V
9.         data: {
   * j, L% M: C# m4 j" M
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    & i& P" C2 g  Y: C: {
12.             alexa: "10000"
    
13.         },
    
14.         methods: {
    . y/ {4 [5 p7 z% `% B( \
15.             details: function() {
    $ Q  G2 r* c: H3 Q: [; ?  f( p$ q; g! H
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    8 |/ f7 l" c$ U  c) h! Z
17.             }
    
18.         }
    
19.     })
    % D: `: K' l1 G
20. </script>

复制代码

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

1. <div id = "vue_det"></div>

复制代码

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

1. <div id="vue_det">
   # `( ^* ]0 |5 n4 o8 Z* h4 S
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   * c* ^) y/ F5 y" E! ^
4.     <h1>{{details()}}</h1>
   - a) m5 P2 O6 q- ~3 v& U$ L  k& Q7 x
5. </div>

复制代码

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

1. <div id="vue_det">
   7 y$ f* u( R9 f% C( ]$ `; k
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   2 U4 q# C1 v! A8 C8 q  l
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   ' |) A% p. ]& s) ^2 l0 S% x' B
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   $ ^% s- C* L) e5 }+ z0 c- m: }
9. var vm = new Vue({
     G# j' y  \& |" Z7 H
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    8 E' N9 B( F7 Q& }  c3 `& ?  W6 T
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    0 D0 d# ?) {! i6 W! b- W
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    2 ^; H: O% c, t4 N& K$ l
18. document.write(data.site + "<br>") // Runoob
    0 [1 j# S+ c/ g* h5 x
19. 
    
20. // ……反之亦然
    
21. data.alexa = 1234
    1 x7 k: ?+ E( X) {8 d" z& u) _2 R: u
22. document.write(vm.alexa) // 1234
    6 I$ g3 c% q, j* Z! U/ W
23. </script>

复制代码

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   ) i7 Q4 W, R7 c3 ^' \# T) U, J
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   3 t$ c% {* g8 ?% g/ x$ X
6. <script type="text/javascript">
   # K0 o/ l7 f6 s
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   ' Z1 x- ^3 j( y0 k2 Q* v" q. {+ Z$ ~
9. var vm = new Vue({
   3 f! s' C8 J* L  V2 ?( u: ]
10.     el: '#vue_det',
    4 _% S$ J( y0 A
11.     data: data
    
12. })
    
13. 
    
14. document.write(vm.$data === data) // true
    9 {$ \. P& }9 i3 q
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    $ x$ {3 ]. c' T4 K1 r
17. </script>

复制代码

* p* O; ?9 \. z' _  u2 }. a! }( X
0 b  \# J% p/ D4 z* ]3 e