Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   # |8 v) p' s7 y0 i4 [6 ?6 B
2.   // 选项
   
3. })

复制代码

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

1. <div id="vue_det">
   9 h) r. `8 K8 u" c
2.     <h1>site : {{site}}</h1>
   , h/ E/ [' M/ @
3.     <h1>url : {{url}}</h1>
     S5 C6 j6 A- y( V
4.     <h1>{{details()}}</h1>
   
5. </div>
   5 J4 n& z2 J$ q
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   % ?; F! h: j; ~  y2 b/ X
8.         el: '#vue_det',
   
9.         data: {
   - [) m: w- E$ `
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    5 `0 L: h. L% x) |5 F
12.             alexa: "10000"
    8 Y0 b( ~3 c1 h9 t; U
13.         },
    
14.         methods: {
    
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    # g8 ~% Q8 H1 i+ t6 u  H
17.             }
    
18.         }
    
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">
   4 }: r/ @4 ~" a6 b0 |, n1 c6 U
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   3 k. a' f; g$ e- p) J
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   # o" `9 L/ x* x5 g! T( {/ H
3.     <h1>url : {{url}}</h1>
     R' }3 ~  [" C; l- C0 J/ b
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   
6. <script type="text/javascript">
   ( Q/ E! y8 W3 B) f
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   5 h1 h! X& W% P' F0 h
10.     el: '#vue_det',
    & d9 Z8 d) \; V4 z5 L2 t, X' N
11.     data: data
    
12. })
    
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    * B% [; c$ @& T# M
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    
19. 
    + [4 m! V! ~% E7 ?( B0 ~/ K
20. // ……反之亦然
    
21. data.alexa = 1234
    
22. document.write(vm.alexa) // 1234
    ) N) ]# i  ]! {9 G3 o4 \
23. </script>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   . u* \. A& k  v1 u3 [5 {% I
3.     <h1>url : {{url}}</h1>
   0 g9 x5 c0 {, P3 ]* _+ V; ~
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   $ y' P# J! c7 Z0 N
6. <script type="text/javascript">
   " b' U' Z/ g5 t  T
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   
10.     el: '#vue_det',
    0 z7 I$ M0 |5 ]) C2 u7 k, N/ H
11.     data: data
    9 q. z* C4 a' X( x* [
12. })
    % ~7 G5 `7 w, j) F8 K  b0 {4 e7 s
13. 
    
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    $ M# s1 e/ @( }5 s0 D8 ^$ U" D
17. </script>

复制代码