Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   
2.   // 选项
   , J5 K, ~+ m" o0 N* [$ I" r# w; E
3. })

复制代码

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

1. <div id="vue_det">
   1 }, ?6 J$ N/ i, W
2.     <h1>site : {{site}}</h1>
   ; ^/ l! h/ P0 P; {
3.     <h1>url : {{url}}</h1>
   & d1 G; V' P: q( z% @0 [5 S
4.     <h1>{{details()}}</h1>
   ; J$ N% Q; p" }$ A3 K
5. </div>
   # N% k/ X% S$ Z4 x
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   ; l4 V# `& Z5 W. [3 `7 U  a% \
8.         el: '#vue_det',
   
9.         data: {
   * J1 h4 d$ e& x! _8 @
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    
13.         },
    ; _. b* S) K  r
14.         methods: {
    
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    0 C! F) ~. C& U. [* A
17.             }
    % y; J; Q, @. j4 g7 V
18.         }
    
19.     })
    % P6 ?/ _2 X: A! U0 h  V8 ^
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>
   ; d! l2 j) U, f9 |& g# I) K% _+ U
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   ( q7 a1 |; U. d' c. B3 P0 o
5. </div>

复制代码

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

1. <div id="vue_det">
   ' _. @- @7 X3 h& r
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   4 c* P9 s% G1 u3 T5 S; L
5. </div>
   
6. <script type="text/javascript">
   ( ^' @2 T; D$ W3 t$ T6 f2 M
7. // 我们的数据对象
   9 t4 n/ B% z2 O0 G8 K
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
     [! Y9 B8 a* B8 c0 I1 o
9. var vm = new Vue({
   - U8 f( {  p3 ^3 f7 I. T- P
10.     el: '#vue_det',
    9 z3 p6 k3 n) N/ i& R
11.     data: data
    
12. })
    
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    $ r4 e  o2 g$ J- E# h0 |; v5 R, Y
16. // 设置属性也会影响到原始数据
    - B" M% j$ o9 u( I5 W+ S- C
17. vm.site = "Runoob"
    1 a+ V1 H5 \9 o! l9 W
18. document.write(data.site + "<br>") // Runoob
    / O8 `* A, u7 K' p7 e* \! R. S
19. 
    3 X! w: w, T( H) Y6 C) _& s
20. // ……反之亦然
    1 ~; y" k7 H% F0 V
21. data.alexa = 1234
    
22. document.write(vm.alexa) // 1234
    
23. </script>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
     M" k+ M! Y& H8 P
4.     <h1>Alexa : {{alexa}}</h1>
   & _0 c9 j# y/ P; t" {0 s( `# l4 u
5. </div>
     l1 D5 H8 X( t' B! F7 W) W- A. Z
6. <script type="text/javascript">
   7 ~/ p6 h& y6 J" ?2 x
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   5 A. U& p% P4 q, C
10.     el: '#vue_det',
    ! S2 p! r# r7 @! J
11.     data: data
    
12. })
    / O& U- h( I+ S2 F# A, c9 O
13. 
    ! L" e3 d$ o2 C# Z3 y* W* ?2 n
14. document.write(vm.$data === data) // true
    $ q& u7 e- H7 C2 D
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    % ^) i2 i- l3 Q! e  i& b( b. |
17. </script>

复制代码

" l) X" w' ]9 |5 a" L5 n& i