Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   
2.   // 选项
   2 s+ o7 y& c9 P6 U7 R$ m& v, u5 T4 w
3. })

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   - V3 _9 E, O8 G- N1 R! D  C4 k
4.     <h1>{{details()}}</h1>
   
5. </div>
   + p( ^2 E+ J+ V8 q
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   . o7 n( p/ p7 Y; d% o; q. ^2 j, N
8.         el: '#vue_det',
   
9.         data: {
   ! U1 s( ^, m2 h
10.             site: "菜鸟教程",
    8 e/ k8 V) w) l. t" A' m6 `
11.             url: "www.runoob.com",
    8 e7 n; C4 `. M% Z
12.             alexa: "10000"
    $ N. L4 a1 }2 k! ]0 n# x$ g- m
13.         },
    8 w" _% h/ t1 g7 b+ _' K' W# ]
14.         methods: {
    
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    $ J( s9 ]) H# l( }( y& V
17.             }
    
18.         }
    
19.     })
    3 J  Z7 s% j  g; Z8 B3 u
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>
   
4.     <h1>{{details()}}</h1>
     ]" e4 L# N% d. w  G$ {* r* G
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   % g! ^1 r# \4 U1 d+ I' Z0 N
4.     <h1>Alexa : {{alexa}}</h1>
   . e( N0 C/ z* S( a& l, k8 x
5. </div>
   
6. <script type="text/javascript">
   * C8 V$ b- M- X& n7 P* C: |
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   " Y4 G4 z# Q! R8 g* [
9. var vm = new Vue({
   # }% v! R- X0 z7 |8 Z6 h* J& c
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    8 i3 r1 v0 Y9 E
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    % _( |! o/ v9 Y; ^* f2 V( y5 s/ e
17. vm.site = "Runoob"
    $ @$ r3 r6 G6 i1 B0 K, o4 k
18. document.write(data.site + "<br>") // Runoob
    4 h3 f9 j! m0 e8 N6 G
19. 
    
20. // ……反之亦然
    . Y% v) G  G' e0 g- c
21. data.alexa = 1234
    $ a2 V, h5 H" W+ z) H
22. document.write(vm.alexa) // 1234
    
23. </script>

复制代码

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

1. <div id="vue_det">
   , V  A) |) `" J, t. m, s
2.     <h1>site : {{site}}</h1>
   8 y+ R, t* ^! l, }! ?
3.     <h1>url : {{url}}</h1>
   2 r% v9 q* Z6 w8 u- E" ], s
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   $ \8 m( g. @( o$ {, S
6. <script type="text/javascript">
   
7. // 我们的数据对象
   , f" u: J' u6 v* w/ V* e
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   , A2 @" g9 d7 y3 A2 V# v2 v
10.     el: '#vue_det',
    : ^. L% T5 u3 I& D7 Y% U  V
11.     data: data
    ' e7 M% I1 j. m8 M2 Z1 v
12. })
    
13. 
    8 I6 ?& c" o: V4 m. q7 z
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    + f! r0 L+ ]6 \+ E
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    
17. </script>

复制代码