Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   $ p: L& p5 J/ K9 @
2.   // 选项
   : V' S* b3 `, ^* h  m9 p7 k
3. })

复制代码

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

1. <div id="vue_det">
   : H6 s8 ^6 `! G- a- [" Y: j
2.     <h1>site : {{site}}</h1>
   ) j  J4 K  r' |9 k9 u8 `
3.     <h1>url : {{url}}</h1>
   0 Z2 F8 B* y, _# I8 N6 z
4.     <h1>{{details()}}</h1>
   
5. </div>
   ; ?( C; }% e5 n1 r
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   $ i; [& ]: q8 P
8.         el: '#vue_det',
   % S3 M  ^/ ^9 t/ e$ M1 \3 C- f
9.         data: {
   1 J) m' Q# S+ l( \. T8 g- t  B
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    , D" B/ T, g: O2 w# b2 |
12.             alexa: "10000"
    1 f1 S( Q7 H; g  J9 n! Z
13.         },
    ; F4 `( X+ y* u% Y+ y1 t
14.         methods: {
    + Q! P- A2 Y, F6 \
15.             details: function() {
    - D6 h4 h& W3 p& M% G5 C
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    0 q. B7 ]& ?  e7 q  W
17.             }
    5 n+ b6 m1 D2 O5 H9 j
18.         }
    * h- I8 f4 V* W
19.     })
    $ s  t4 l2 o# M* b7 c
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">
   / z% G8 Z# P1 v7 d' B! C
2.     <h1>site : {{site}}</h1>
   0 d* E1 k# M! ]' H8 y8 l
3.     <h1>url : {{url}}</h1>
   % J( y  s3 i/ n- l" R- u# [# Q
4.     <h1>{{details()}}</h1>
   
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   $ O* X/ E9 h, C' H  S* u7 W
5. </div>
   4 s. |: m0 D4 n3 K  D
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   ( L! `9 n% Q# z
10.     el: '#vue_det',
    - e2 Y( T8 S7 t' }' e" }# V+ a2 U
11.     data: data
    & V; i, q9 p" |4 D1 _% j
12. })
    + w6 r( Q+ e5 `
13. // 它们引用相同的对象！
    $ w% ^2 U, X$ E
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    5 g* R' z* U% T2 z5 \( c9 p6 Q# @) {2 |
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    ) ]$ s/ ]" k1 z
19. 
    
20. // ……反之亦然
    
21. data.alexa = 1234
    % o( v5 e$ r" q- v8 Q5 ]8 J
22. document.write(vm.alexa) // 1234
    , D) `; y$ Y! A- s4 J( x
23. </script>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   # Y/ X7 S% e( I+ b2 d
4.     <h1>Alexa : {{alexa}}</h1>
   ( P5 w9 K; h& v; X- D
5. </div>
   
6. <script type="text/javascript">
   + F( h  Q* {* k% _& e
7. // 我们的数据对象
   , O2 A! d2 g7 t; \4 [, b
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   ' x6 R" z2 d, w4 _0 a
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    8 e' f/ @: N- i& @
13. 
    
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    - ^! h6 I* R$ M6 e8 {
17. </script>

复制代码

; l9 t/ m$ C) v) Z& i9 _) J  b