Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   
2.   // 选项
   & Z6 F$ j! A' |( `: X
3. })

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   * g" Q0 P' A, f
3.     <h1>url : {{url}}</h1>
   $ ]- \& X) D3 \6 |% @
4.     <h1>{{details()}}</h1>
   + e  f$ ^- p0 _9 E# P& M
5. </div>
   8 S7 s1 O: `) S1 {
6. <script type="text/javascript">
   ; W+ o9 q- k6 F
7.     var vm = new Vue({
   7 |. `# `! _$ }; `6 s6 _
8.         el: '#vue_det',
   % O0 R9 n8 @  e* U7 w% U
9.         data: {
   
10.             site: "菜鸟教程",
    * q6 H, Z( s3 j6 X) E
11.             url: "www.runoob.com",
    $ a1 o, \0 r% O1 G
12.             alexa: "10000"
    
13.         },
    
14.         methods: {
    6 y; V$ O5 q0 x/ C& A* u8 F- r
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    8 h/ ~$ i  r, E7 P8 t
17.             }
    
18.         }
    
19.     })
    ' X. [* w& v6 J' ]) a9 |% N9 H9 f
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">
   3 l5 R" \( `5 M
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   1 V/ H, c3 ?( W! t. C; y& o) i
4.     <h1>{{details()}}</h1>
   1 n9 U2 W6 v1 a  i4 k8 U
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   , }# f6 H( w+ \1 l0 E# p
4.     <h1>Alexa : {{alexa}}</h1>
   
5. </div>
   6 P9 b; }5 R. Y9 r  ^2 j/ d% z
6. <script type="text/javascript">
   
7. // 我们的数据对象
   9 d" b  ^  A# @" [- B
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   # O# j; t* F; P
9. var vm = new Vue({
   
10.     el: '#vue_det',
    $ q. c7 _+ `: e2 O. K
11.     data: data
    , E: ~! n+ W0 R+ D; S$ R7 \" u8 N' Y2 ~
12. })
    * o0 o( Z  L( [& F$ _6 V
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    6 U+ P4 w; \7 J2 v* d' ~& w
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    
19. 
    0 ^6 O6 q7 F3 S, }# v" l! [
20. // ……反之亦然
    
21. data.alexa = 1234
    
22. document.write(vm.alexa) // 1234
    5 X5 {) Z' \3 X/ A) w. q
23. </script>

复制代码

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

1. <div id="vue_det">
   ! A+ R( T/ S2 n/ A2 b; }' \
2.     <h1>site : {{site}}</h1>
   / {2 r* R) T3 p9 ^) o+ F4 q, k
3.     <h1>url : {{url}}</h1>
   8 Y5 f2 @+ N2 c) C% i( e: b6 e
4.     <h1>Alexa : {{alexa}}</h1>
   0 G) z! K, j- ^9 _# A1 {
5. </div>
   9 M1 Y, m5 q# N
6. <script type="text/javascript">
   
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   # N# y7 i) `+ K
10.     el: '#vue_det',
    
11.     data: data
    3 \* }6 m  P- Y- ]
12. })
    # Z( _! @1 K) C4 B. |
13. 
    + i, m; N7 L2 Q" o
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    . C+ b2 M+ h3 A) |
17. </script>

复制代码