Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   & G% }9 A! p$ {2 m3 _
2.   // 选项
   9 F& h3 {7 f" i. |3 W) ^/ _+ A
3. })

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   + F& s& J1 w% J- X
3.     <h1>url : {{url}}</h1>
   9 {* v* l$ G5 Q" d
4.     <h1>{{details()}}</h1>
   
5. </div>
   
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   
8.         el: '#vue_det',
   
9.         data: {
   + r; [: h5 b4 _4 A* o
10.             site: "菜鸟教程",
    7 M! v) e6 A4 R" C5 \
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    ) K0 |; F- i( e. A* a
13.         },
    , @6 R. {6 D! z7 d/ E- K
14.         methods: {
    
15.             details: function() {
    1 T4 T' C: m8 s  _; B& k% i
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    3 Q1 t# v, P6 ]$ o/ q% `) S
17.             }
    
18.         }
    , E- I8 U! A( f* ^7 C+ d) o* w
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>
   * s1 d* T1 U) b* o2 I
4.     <h1>{{details()}}</h1>
   : |) b1 }+ N: h8 ]" |3 r% e1 O
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   6 ^2 P. p6 J+ L! ?) o1 r
4.     <h1>Alexa : {{alexa}}</h1>
   7 Y, l' i9 O" B+ ?7 q( b" m
5. </div>
   3 v; ~; m) o: k4 u; E" h3 a
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   7 H* z& w4 W6 I( j. g$ v8 h
9. var vm = new Vue({
   
10.     el: '#vue_det',
    ; ~* C) H, s9 B; M$ u: G3 u+ x: I
11.     data: data
    
12. })
    " U/ q( n# \: Z/ q( e- r1 c
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    ( I3 b2 s7 ^: E( R  E
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    6 i* t& i# P3 f
18. document.write(data.site + "<br>") // Runoob
    - p7 L; p! E+ v: x
19. 
    
20. // ……反之亦然
    $ b  P* N$ ~" t) j# D0 W1 b
21. data.alexa = 1234
    2 W1 ~" }1 w. k3 D0 |  q2 r. z
22. document.write(vm.alexa) // 1234
    / n1 w4 ^) T% [5 K
23. </script>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   & h) q9 a- T! v% X
5. </div>
   9 W, V, q; X: X" a$ A8 a
6. <script type="text/javascript">
   ; }$ D9 u: [: F) b! j% N7 ~* K
7. // 我们的数据对象
   7 O% G$ l1 G( b/ ^  ?  f
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   # y" x5 X. Q, W) u
9. var vm = new Vue({
   / \% v; n% f- ]& \4 O2 q+ f8 R9 A3 e
10.     el: '#vue_det',
    7 P9 d% B( F5 k& @/ ]
11.     data: data
    - r( M  J% V# r% e5 w# v
12. })
    + t" _* [+ s/ S
13. 
    ' Z  m9 G/ V1 ]
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    , a$ E" s. {: c9 n* J' |
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    8 y5 B6 x; A% R- P2 u
17. </script>

复制代码