Vue.js 起步

admin

Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   
2.   // 选项
   4 r" M/ {/ f7 G5 O0 r0 ?, r# G
3. })

复制代码

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

1. <div id="vue_det">
   
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   , A1 F! \3 J' R, W& Y; ]
4.     <h1>{{details()}}</h1>
   ( r; f4 a9 Z* F" I
5. </div>
   " @! i6 `& [! ?: r" l* W  g, j" R5 o
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   ; U# I( M8 g8 m/ m8 I+ C4 Y7 A2 h
8.         el: '#vue_det',
   
9.         data: {
   1 ^- v, W% h" h  {+ g
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    
13.         },
    
14.         methods: {
    5 X  v% l- `0 s+ l, i
15.             details: function() {
    / x/ v; Q( _- S, o' h
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    
18.         }
    0 j8 \- T- S* |5 o
19.     })
    7 x, I7 ?& \+ C' N7 ~4 \) _! J" |
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">
   / @; u: z- L3 E5 F; C) G3 \, _
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   
5. </div>

复制代码

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

1. <div id="vue_det">
   / S% f" z/ M7 u# b) r# n: c
2.     <h1>site : {{site}}</h1>
   5 }8 R8 H  y0 |" W& x
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   6 t3 x4 P6 u) U5 W2 l
5. </div>
   6 W1 F. o" J! e& F
6. <script type="text/javascript">
   
7. // 我们的数据对象
   ) x' i1 m7 o4 G6 g+ y/ z3 G
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   " @: ?' U/ H, L4 ]  p: e
9. var vm = new Vue({
   9 g1 r6 c6 V) ^
10.     el: '#vue_det',
    
11.     data: data
    
12. })
    ' g( k* [. D1 h9 U  r7 @
13. // 它们引用相同的对象！
    
14. document.write(vm.a === data.a) // true
    7 V$ G+ B7 y- M+ M
15. document.write("<br>")
    7 N" O$ v; n* d$ {# Q
16. // 设置属性也会影响到原始数据
    $ n! f( S6 s$ {6 j! l8 a+ J
17. vm.site = "Runoob"
    
18. document.write(data.site + "<br>") // Runoob
    " y6 |+ I3 w+ E$ S
19. 
    
20. // ……反之亦然
    9 r2 g  s/ l2 u6 d# F; v" w+ S# E
21. data.alexa = 1234
    9 g9 q) |4 X% r) q- i
22. document.write(vm.alexa) // 1234
    0 H0 y. W- J; X3 T
23. </script>

复制代码

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

1. <div id="vue_det">
   $ x6 N5 ]1 c9 ^) g+ F' O) f: ?
2.     <h1>site : {{site}}</h1>
   4 p4 m4 s6 B5 J# I" o
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   ' e' w3 v& t  i& s/ j/ F' W
5. </div>
   
6. <script type="text/javascript">
   ! z' C0 l7 i6 l. G& b4 P+ \
7. // 我们的数据对象
   4 Q1 J% z$ c3 O( a/ E
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   4 W. H7 J' ~& |7 [! ]) ~
10.     el: '#vue_det',
    
11.     data: data
    + x. O, u1 f8 _7 E- G
12. })
    2 m7 g9 n) h+ }3 E& S6 s
13. 
    ( W3 ^# H2 e! V/ z) t& S
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    2 [+ r6 \% v  T; f. K
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    
17. </script>

复制代码

( Q& o( [5 J% l7 o/ ?
% \  k1 U+ h7 O8 _1 J2 ~: ]$ y3 j