Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   
2.   // 选项
   $ h1 M( w/ O3 _, T! e  V( {2 `% T
3. })

复制代码

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

1. <div id="vue_det">
   ; z- F$ |2 I& S
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   7 }( O6 x6 Q% O5 X
5. </div>
   
6. <script type="text/javascript">
   2 t, }3 @+ q8 S8 ^
7.     var vm = new Vue({
   
8.         el: '#vue_det',
   
9.         data: {
   
10.             site: "菜鸟教程",
    + Y! @- r) w  o, d9 K" V
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    
13.         },
    * I# `$ a1 I. {* W0 U: N: D
14.         methods: {
    ( h% P( Q, V* f( V* J8 m. [
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    3 }/ B: ^, I3 C2 T: e% M* f% j
18.         }
    6 j+ A$ [9 i2 D0 s
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>
   6 P1 q# ^1 R4 \9 Y; T
3.     <h1>url : {{url}}</h1>
   ( q. ^+ A+ o$ N0 b+ Y; o
4.     <h1>{{details()}}</h1>
   
5. </div>

复制代码

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

1. <div id="vue_det">
   & c& b; p( O! v- U' w3 F$ R
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   ( A2 d& E( x4 y5 L
4.     <h1>Alexa : {{alexa}}</h1>
   / H. ?% L) H3 X/ `
5. </div>
   * B7 W# N1 p. X& {
6. <script type="text/javascript">
   
7. // 我们的数据对象
   ) P0 K8 z/ r) k
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   " y7 D3 b% n* |0 H
9. var vm = new Vue({
   
10.     el: '#vue_det',
    / K, |6 @: w& u/ \
11.     data: data
    7 e" N0 X! [0 N# ]5 k  w
12. })
    - A: Z4 }# n& {! b, Y
13. // 它们引用相同的对象！
    " \: w5 u9 {; K6 O0 Y
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    % @6 B& F' A* ^
16. // 设置属性也会影响到原始数据
    / a9 L; o7 P0 j9 s4 ]5 `
17. vm.site = "Runoob"
    8 `# K+ @4 I8 h1 Y' G+ o4 J0 g
18. document.write(data.site + "<br>") // Runoob
    6 Q. c" h+ y' S( y6 z, x) I  x
19. 
    
20. // ……反之亦然
    : s0 b, j4 m: p+ n' a5 {
21. data.alexa = 1234
    + @$ k# f4 v  x( D% I, f
22. document.write(vm.alexa) // 1234
    
23. </script>

复制代码

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

1. <div id="vue_det">
   $ I  S3 i; P4 @2 q4 T  ^* b$ Q8 S
2.     <h1>site : {{site}}</h1>
   ( {/ G8 @; N  ]  C; ^
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   , F$ g3 n5 O4 w3 x$ ~
5. </div>
   : Z- J; _0 D3 c" T: B
6. <script type="text/javascript">
   
7. // 我们的数据对象
   " p3 p# I9 K$ l) g/ t
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   - @3 R( B: Q& Y; w9 b1 W7 f$ ]' C& ~
9. var vm = new Vue({
   , v  E: W  M+ q5 Q4 R0 g; F, Q
10.     el: '#vue_det',
    2 N% t+ U! C8 {' C' Q! l
11.     data: data
    * _, t2 O2 E8 W, O6 m4 ]% i
12. })
    5 G- e0 {6 U+ U( ^0 d( c
13. 
    
14. document.write(vm.$data === data) // true
    ! w# O* d# K7 X3 `9 G/ [8 P
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    . E8 K6 b) p9 x# e
17. </script>

复制代码