Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   # O7 E: @( k0 A' v" m
2.   // 选项
   
3. })

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   " w1 W+ g! P2 j3 ]8 I( N9 M
4.     <h1>{{details()}}</h1>
   
5. </div>
     Y  l( r& c: E  }" F( V8 H! I
6. <script type="text/javascript">
   6 w) j1 B' K1 c1 q, R
7.     var vm = new Vue({
   2 V+ [) R/ V0 N/ a' e; v
8.         el: '#vue_det',
   
9.         data: {
     p1 V6 r+ N9 }! N" s; K" z$ u; n
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    0 e8 ^0 f0 }# E
12.             alexa: "10000"
    ' n; l8 i# R- V, Q% M
13.         },
    + u$ ~5 ^/ f! b( I  H& v
14.         methods: {
    ( y4 g2 D5 d/ J8 v, L
15.             details: function() {
    7 [8 I8 Z) a' E5 p8 M
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    7 r/ |$ y( n3 A
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">
   
2.     <h1>site : {{site}}</h1>
   : @& _6 \/ f! b
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   1 R4 K2 z" u0 T. \9 s1 {
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   3 V7 K) x( P8 m# c3 t9 ~! M
4.     <h1>Alexa : {{alexa}}</h1>
   5 X% c: w: ^1 N# g! ~* @1 `
5. </div>
   * [+ }! x- y# _  `3 R
6. <script type="text/javascript">
   
7. // 我们的数据对象
   % T$ |2 M. v: l' X) \! |9 R3 f9 X9 H% _+ Q
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   7 f8 r/ o8 P0 ?
9. var vm = new Vue({
   
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    1 G! _  }* S% H' G- z: B
16. // 设置属性也会影响到原始数据
    1 v! |' V- A9 f. V8 @4 c0 ?" k
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    , X5 D2 H2 w. V' A. l, a" I
19. 
    
20. // ……反之亦然
    . J4 T- `: p' f" p8 ]' z; B6 U0 n( s$ e
21. data.alexa = 1234
    
22. document.write(vm.alexa) // 1234
    ' |1 t7 N9 a- @7 {
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>
   ' k& I/ f& O: r. m1 P# l, Y
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   % k4 B3 e, _! Q/ S. C4 \
9. var vm = new Vue({
   
10.     el: '#vue_det',
    3 ~7 e  M# {& o6 O" c
11.     data: data
    % ]3 n, n( K  }' d# l5 V
12. })
    $ s$ x$ o# C. L6 U) I* H# N
13. 
    
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    # g; m, w; a8 D! |- y" d9 O
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    ) T* z/ p2 J/ R/ X0 t  i
17. </script>

复制代码

' w: l8 g3 e* o" Z' z. ?0 J0 z; ?
/ z  o8 D+ L- g( I