Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   ! A+ L& w, h, G+ i+ |
2.   // 选项
   
3. })

复制代码

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

1. <div id="vue_det">
   4 _9 G: |; I% Q! ~1 \
2.     <h1>site : {{site}}</h1>
   $ @& p& v4 v1 _* ~
3.     <h1>url : {{url}}</h1>
   ' i; |0 N# C# f9 T: ]! \
4.     <h1>{{details()}}</h1>
   
5. </div>
   % A0 j1 E/ i- j3 {9 z. U
6. <script type="text/javascript">
   $ c7 w  {/ e+ s9 L  Z0 N& D: |
7.     var vm = new Vue({
   # K0 ^8 n% J" F# ]9 G
8.         el: '#vue_det',
   3 G/ N5 i4 H) b
9.         data: {
   9 f$ y( s( P: x% g. O" w
10.             site: "菜鸟教程",
    1 Z8 [( E( ?. C$ [" j4 x- S6 p
11.             url: "www.runoob.com",
    : o) s+ I+ S& z% G/ x+ C. M
12.             alexa: "10000"
    . D* a$ p& u6 @6 |+ z
13.         },
    1 C6 w( h' K  `2 }5 j; P* V: G: ?
14.         methods: {
    
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    
18.         }
    
19.     })
    7 S, ?) A$ h( }2 X  G- O* q
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">
   
2.     <h1>site : {{site}}</h1>
   ) D9 X7 W7 k' Q" u: R& ~) ^
3.     <h1>url : {{url}}</h1>
   + w& v2 x5 ?8 s# ~$ ^; W2 w% a
4.     <h1>{{details()}}</h1>
   
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   5 f$ b( ]* R" R* K$ k! |
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   : k9 _7 R  P, X7 R# _3 ]
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   4 a( N7 d; R" Q/ w7 ~4 s" ]
9. var vm = new Vue({
   
10.     el: '#vue_det',
    
11.     data: data
    * m& `7 k: z' n: N- R1 M
12. })
    
13. // 它们引用相同的对象！
    ; X9 z, w  E+ F/ I2 Z. O
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    0 B: ^0 x) ]1 R/ Y
18. document.write(data.site + "<br>") // Runoob
    
19. 
    
20. // ……反之亦然
    - o4 E" r% B" V: S
21. data.alexa = 1234
      `6 X! h& }$ B( k% [: q% I
22. document.write(vm.alexa) // 1234
    ) h9 I6 ?! r, {1 d- t/ A
23. </script>

复制代码

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

1. <div id="vue_det">
   : S8 ]' M' h3 \) ~
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   
6. <script type="text/javascript">
   3 ^% S$ D2 C2 W, o; b
7. // 我们的数据对象
   8 G. H; `8 n: V6 z
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   ; q  H& d3 e( j( t2 Y* W3 X( ~# ^: x3 m
10.     el: '#vue_det',
    
11.     data: data
    # H" h8 v! V1 [. X! s3 B% `
12. })
    
13. 
    
14. document.write(vm.$data === data) // true
      h6 N' V3 X! Q& c1 Y+ [
15. document.write("<br>") // true
    7 G% M9 U5 h) [" j. @0 s8 S1 d7 Y3 u
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    
17. </script>

复制代码

% }8 `, F* z8 C9 ]: y* Q, G