Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   
2.   // 选项
   3 a! l+ x1 M1 Y$ T) G/ l* f
3. })

复制代码

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

1. <div id="vue_det">
   * @$ [' F! p9 u% T  n. ]7 N
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   
5. </div>
   $ _% R, `( q# M6 _" f5 L2 _; [: R3 O
6. <script type="text/javascript">
   * D9 Y6 }' W/ L% v' [8 Y
7.     var vm = new Vue({
   " C, S5 G7 |% V, z3 ~9 L- r8 g8 u$ s
8.         el: '#vue_det',
   
9.         data: {
   
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    . ~( y2 a, w( U
12.             alexa: "10000"
    , w0 h$ N8 n: t) U6 ]7 m7 W
13.         },
    9 i" Q$ T: g* i( `+ @5 f* i
14.         methods: {
    
15.             details: function() {
    0 \: Z9 T0 E7 w+ i
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    ) W4 ^3 P: h, P
18.         }
    / Q8 p9 F0 P: w, J6 B. C  x
19.     })
    
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>
   
3.     <h1>url : {{url}}</h1>
   $ |; F7 _9 P+ ^/ v7 R0 U
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>
   . Q% j7 n( t6 ?. }8 h
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   $ \9 X4 }, p$ K/ [
6. <script type="text/javascript">
   9 ^$ m% S1 J& C7 E3 V: j3 e# v
7. // 我们的数据对象
   7 Y  y9 Y  S* r/ b" {
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   + k) B2 c- U4 L4 P$ l, N9 M. t2 J
10.     el: '#vue_det',
      w/ g- w. e/ {0 e7 M% o7 l+ ]
11.     data: data
    ) y. w( y, r" T, E7 ~% f% @" Z# V
12. })
    . p, Q4 j$ {, O# l& y2 Z0 ~
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    + r8 S/ s+ F$ X( \9 t$ N2 F
16. // 设置属性也会影响到原始数据
    ! a7 a; f! r/ z
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    
19. 
    
20. // ……反之亦然
    
21. data.alexa = 1234
    + m! ~! l1 }# O; K& p4 O) P) T4 R5 ^
22. document.write(vm.alexa) // 1234
    % D; S2 [; g4 N  W
23. </script>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   
6. <script type="text/javascript">
   
7. // 我们的数据对象
   , N' k5 b: Q) _( o
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   ! h0 l7 q% y- Q* y. M" p
10.     el: '#vue_det',
    
11.     data: data
    
12. })
      @  z# u4 m' I9 l; [2 F
13. 
    1 i6 V& d4 l. x3 U
14. document.write(vm.$data === data) // true
    0 e0 z2 M; U6 J8 \/ P
15. document.write("<br>") // true
    9 P3 H6 ?7 m6 U; T) O
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    
17. </script>

复制代码