Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   
2.   // 选项
   5 h. Y9 @2 X1 l9 Z! f/ \+ w
3. })

复制代码

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

1. <div id="vue_det">
   " }& }; j+ M' }
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   ' d& B1 l: C7 B$ I
5. </div>
   
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   
8.         el: '#vue_det',
   9 [9 u& `% d9 I  L) R
9.         data: {
   
10.             site: "菜鸟教程",
    ; j, X1 L( @0 P9 E
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    
13.         },
    
14.         methods: {
    * N8 o/ S6 T! r$ z! f# D$ X
15.             details: function() {
    / c* ]: b8 `1 {: w5 m0 F* ?% R
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    ! X+ ~# i4 V% m- Z- P* L) ?
18.         }
    
19.     })
    8 }  u$ K+ }3 v7 L
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; B5 k1 Y- P" q
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   - u0 Q( H% I' F- h4 a. s: @( W% f
4.     <h1>{{details()}}</h1>
   ' z6 t- q5 y( d% w
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   - w7 `% L* Z* v5 L2 X+ D8 B
3.     <h1>url : {{url}}</h1>
   # o, m  k) m/ v
4.     <h1>Alexa : {{alexa}}</h1>
   % H' r3 R% A8 l5 S: k
5. </div>
   ' ?4 V  M8 n) i  R; \% e
6. <script type="text/javascript">
   / Z6 g9 b2 c3 Q, ~* Z: f8 G0 y
7. // 我们的数据对象
   6 {, N0 `: V, I
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   + N! f( ~, ]0 T" B
9. var vm = new Vue({
   5 ~$ O* n$ I& V# X. w+ G$ o
10.     el: '#vue_det',
    % V* d. z% O# f7 d6 r
11.     data: data
    ) G! {: p( J7 M/ _. y
12. })
    ; x- n' d9 V4 A2 m, ]
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    ( c/ @5 B8 X  i+ C# M: ~$ P
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    . `6 ?# L) J/ Y7 y
19. 
    1 F" r6 q  e# W% J4 x1 h) o/ ]  l
20. // ……反之亦然
    9 x6 v: H' Q" t
21. data.alexa = 1234
    , b& }- B- U; y+ d9 ]$ Q# m
22. document.write(vm.alexa) // 1234
    9 ?- t' |* p- ~  _; ^+ e, b
23. </script>

复制代码

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

1. <div id="vue_det">
   , Q( _+ t0 V  Z, B" b
2.     <h1>site : {{site}}</h1>
   5 z( J* T: P* x" w; o  b1 q
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   " z# z/ u6 B, [
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   5 z4 j: m" B- `
10.     el: '#vue_det',
    
11.     data: data
    9 E, X& E( B0 M6 r- U3 K
12. })
    
13. 
    
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    
17. </script>

复制代码

2 ?3 ~7 O, R, [