Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   & z$ G0 {) ]$ l0 }3 w! h4 M
2.   // 选项
   
3. })

复制代码

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

1. <div id="vue_det">
   + W) ^0 v8 r8 g. T( h
2.     <h1>site : {{site}}</h1>
   6 R* U, C) G, q) |; y* w# N, D6 ]
3.     <h1>url : {{url}}</h1>
   ' Q. Q/ B& g% u) N% i
4.     <h1>{{details()}}</h1>
   
5. </div>
   ! _3 n4 K2 u5 F( I! r
6. <script type="text/javascript">
   + m0 [5 W$ H6 h9 [: _' |6 T! g
7.     var vm = new Vue({
   * M7 _: t/ Z, f
8.         el: '#vue_det',
   
9.         data: {
   4 n6 @9 F7 @6 [8 x8 v. I' I
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    . o4 s9 _& }1 F* Y1 L2 g/ a; ~
12.             alexa: "10000"
    % l( @* V& M+ V* s( a* }; H
13.         },
    
14.         methods: {
    ( f3 K) F2 z4 T1 M9 I2 Q) ^' @4 u
15.             details: function() {
    - o0 u5 i+ A- Z
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    / q" j& I% k& J: ?
17.             }
    
18.         }
    
19.     })
    * U& L# ]" C" H: F8 b  z
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 B: _4 m! Y' `; ^' H- U# q3 t
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   8 d' ~1 F# o3 b5 o1 h0 q
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   ! q, S) C2 k' D# {* i+ h
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   6 t+ `" i2 r; z8 Z% B# y8 q
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   + ^* j# T1 i1 v- W% S
9. var vm = new Vue({
   0 j  [5 S2 [3 n8 f! }  k
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    
13. // 它们引用相同的对象！
    * d$ O$ W- p3 M$ W& W
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    0 i1 Q/ L& b6 o6 H+ b, ^
19. 
    , l3 C( [4 z5 o  C% W; r
20. // ……反之亦然
    
21. data.alexa = 1234
      V" ~1 d4 f; b- w* e
22. document.write(vm.alexa) // 1234
    
23. </script>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   7 {+ o" B. s' ~% q/ K  m: V- U3 J, J9 I
4.     <h1>Alexa : {{alexa}}</h1>
   % D) w! `/ e' f+ i
5. </div>
   
6. <script type="text/javascript">
   0 {! i9 i* l* R* p5 O- o" q
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   
10.     el: '#vue_det',
    
11.     data: data
    ' ]& B9 e/ k- O" G3 w% |/ i9 f; U
12. })
    ( a8 R+ E# {6 B4 W+ N
13. 
    
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    : ]6 ]. \& h4 s* s) @/ x' t% r
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    
17. </script>

复制代码

1 b! [* S& a6 d( `: M0 t' Q5 Q1 `( t
: D, i1 b- m" g* y* ~" r1 E