Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   " l* {; [0 G1 v; b' s1 }
2.   // 选项
   / _! _5 k/ M' F4 O6 v
3. })

复制代码

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

1. <div id="vue_det">
   , X) m8 ~( x% k5 D( c
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   
5. </div>
   * q" r* a. n1 w3 a' J. q8 g
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   
8.         el: '#vue_det',
   % c1 g2 O. M0 z( r5 {' y  a
9.         data: {
   " @. y1 {' D( L9 P- D1 S! E+ y) C
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    9 s$ W0 J% [! `6 I/ T0 j) Q% M2 P3 T
13.         },
    / W3 @$ X5 p) |% l* q
14.         methods: {
    : y/ K1 }" ?. l2 R9 [
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    
18.         }
    ( F# V; d' Q1 U( c
19.     })
    ' P. u% f* h$ d3 }
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">
   ! r) [% W$ _( T/ X4 G) \
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   / a$ B; s- ^) _
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>
   # D) x( @+ h+ \; F4 c: u9 d' ?
5. </div>
   
6. <script type="text/javascript">
   9 B( y, y) v) k* l
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   , ~7 A' v! ?2 @
9. var vm = new Vue({
   
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    4 b) D$ e# Z" V+ ?/ t, V5 Z
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    ( c" l; j+ W' z
18. document.write(data.site + "<br>") // Runoob
    ! g0 C8 o! e* e% z
19. 
    ! [/ ?/ n4 c& w- x
20. // ……反之亦然
    1 k( W: y: S8 {  K3 _# R
21. data.alexa = 1234
    
22. document.write(vm.alexa) // 1234
    " w% q2 Z; |; K( F8 }7 d
23. </script>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   - K9 m! a, ^7 d% B7 `, a: B2 A
4.     <h1>Alexa : {{alexa}}</h1>
   # ?3 L$ f& x) A9 `7 y$ n  e
5. </div>
   
6. <script type="text/javascript">
   
7. // 我们的数据对象
   % K  z9 }0 Z2 l' U: \4 T( t; A( }+ Q
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   . K" r$ A- y9 i! [$ ~0 `, h
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    ) V2 N3 ~' |0 M. b/ m
13. 
    * _# k; ~7 T1 L- Z' p+ z( Y* s' h
14. document.write(vm.$data === data) // true
    2 t' l4 E* C& q, M/ V% j7 E: ^1 _4 B
15. document.write("<br>") // true
    
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    
17. </script>

复制代码

8 F4 \* ?4 L; \) F0 z4 `