Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   4 i6 u! [" I! w4 I% l
2.   // 选项
   
3. })

复制代码

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

1. <div id="vue_det">
   ! X2 |$ l1 q0 U4 `
2.     <h1>site : {{site}}</h1>
   ) K2 R+ s+ b: U% Q: P
3.     <h1>url : {{url}}</h1>
   , @' x6 y# P" H% r* \# _/ c
4.     <h1>{{details()}}</h1>
   ! _: V! o, ]7 `% z$ P) n
5. </div>
   1 r% z% X( n: `% }, g6 }
6. <script type="text/javascript">
   / Y$ C2 X0 ?$ e& S
7.     var vm = new Vue({
   ) M1 l+ F& \: k5 o2 d( N9 B& Y2 Q
8.         el: '#vue_det',
   
9.         data: {
   : J! o; K) c( r  T" [
10.             site: "菜鸟教程",
    3 \% l% h! z  |( m
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    
13.         },
    / _' p4 P% @  W& o
14.         methods: {
    
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    
18.         }
    
19.     })
    
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">
   ( c! y2 D9 I$ k9 k5 H# S5 M! S! H
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   1 G5 k- ~' g* }9 A) _
5. </div>

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   7 i# d+ j2 C: b; X. |
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   4 E! w' R3 p" ]% S! x
5. </div>
   
6. <script type="text/javascript">
   0 g7 w3 n% O4 ?4 }
7. // 我们的数据对象
   " M/ ^! B: n( d- F% I( `
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   7 F4 ?8 b( L* x9 `# Q, g4 a6 D2 m
10.     el: '#vue_det',
    5 R- f' W7 E9 f' I1 A! t' i" y' V
11.     data: data
    
12. })
    
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    0 t" t0 e! p. v" H
18. document.write(data.site + "<br>") // Runoob
    
19. 
    / |( T. d' u- A# h2 [$ W
20. // ……反之亦然
    
21. data.alexa = 1234
    , k4 j% {6 R5 w& U4 I# P: Z
22. document.write(vm.alexa) // 1234
    
23. </script>

复制代码

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

1. <div id="vue_det">
   - v% G* E1 t2 H1 x0 E0 Q! f& n. ]
2.     <h1>site : {{site}}</h1>
   / M$ U# A9 T* v3 y
3.     <h1>url : {{url}}</h1>
   ( U: @& u% Q7 T) e
4.     <h1>Alexa : {{alexa}}</h1>
   ( v9 O% G3 c7 Z5 _7 R' @! B
5. </div>
   4 N2 l+ B) b# f# {+ ^( u
6. <script type="text/javascript">
   " J; B9 R4 y. q7 o% K. e
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   ' G7 B% O  n5 i" [7 b6 D0 S; i
9. var vm = new Vue({
   8 i, L3 s1 |/ F5 J, y
10.     el: '#vue_det',
    
11.     data: data
    * x6 R9 I8 |5 U, s; ^- D+ g
12. })
    
13. 
    9 v; @' }' o- K4 j2 L! ^6 a' {4 |9 ^
14. document.write(vm.$data === data) // true
    $ [( P* x  m/ h2 ]& o
15. document.write("<br>") // true
    7 |7 ^7 L" \! ?) Z  R$ U8 O
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    # }! {" Z2 e  v* B# I( F4 i
17. </script>

复制代码