cncml手绘网

标题: Vue.js 起步 [打印本页]

---

作者: admin    时间: 2018-7-1 23:08
标题: Vue.js 起步
Vue.js 起步

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

语法格式如下：

1. var vm = new Vue({
   ) k- _6 v+ G  m6 }7 N3 g. a' d
2.   // 选项
   6 S4 k# o8 O# f
3. })

复制代码

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

1. <div id="vue_det">
   , V  v1 _( J( Y
2.     <h1>site : {{site}}</h1>
   ' C. `$ r5 y1 w9 P" k2 v; s
3.     <h1>url : {{url}}</h1>
   
4.     <h1>{{details()}}</h1>
   / r1 T+ Q( o! ]  f& v- i" r
5. </div>
   , f% Z" w0 e0 f" q$ k
6. <script type="text/javascript">
   
7.     var vm = new Vue({
   
8.         el: '#vue_det',
   
9.         data: {
   
10.             site: "菜鸟教程",
    
11.             url: "www.runoob.com",
    
12.             alexa: "10000"
    8 r. v2 j7 X2 W, P: a
13.         },
    # i7 w* k. o+ t/ G- g% T
14.         methods: {
    
15.             details: function() {
    
16.                 return  this.site + " - 学的不仅是技术，更是梦想！";
    
17.             }
    ( C" }/ |6 B" B/ l0 N
18.         }
    ! S# x8 d/ f, g9 \
19.     })
    - c: |# E' u$ D4 W# G( O
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">
   * Z1 B  h# q1 M; j
2.     <h1>site : {{site}}</h1>
   2 A: c! K0 s& ]/ t8 k
3.     <h1>url : {{url}}</h1>
   / M8 [  |( L9 [- p9 R3 n
4.     <h1>{{details()}}</h1>
   
5. </div>

复制代码

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

1. <div id="vue_det">
   : S$ C; \3 N( |
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   
4.     <h1>Alexa : {{alexa}}</h1>
   8 L' r( X2 e8 W! \2 ?: Q! x
5. </div>
   ( ^- d- l- ~" Y$ m% X- w6 D
6. <script type="text/javascript">
   2 R& ]3 G# h9 l5 H6 }6 x
7. // 我们的数据对象
   4 p' _( P$ X- \6 }( d1 i; O+ W
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   ) @  z6 n3 c  e! O# o
9. var vm = new Vue({
   + c: u$ Z) m. y! V' s
10.     el: '#vue_det',
    
11.     data: data
    0 l4 E, M4 H' P. a
12. })
    ' E+ A6 y$ e) @9 M/ H, @( J9 e: R
13. // 它们引用相同的对象！
    3 f' k6 }1 O7 e+ p" O% X
14. document.write(vm.a === data.a) // true
    
15. document.write("<br>")
    3 j/ D0 ]' t8 Y# I, R0 x
16. // 设置属性也会影响到原始数据
    
17. vm.site = "Runoob"
    " ^$ I& ^6 @+ ^9 \. `1 b' k4 X# j
18. document.write(data.site + "<br>") // Runoob
    
19. 
    
20. // ……反之亦然
    
21. data.alexa = 1234
    
22. document.write(vm.alexa) // 1234
    
23. </script>

复制代码

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

1. <div id="vue_det">
   + T' f) \% P  m+ C1 z
2.     <h1>site : {{site}}</h1>
   
3.     <h1>url : {{url}}</h1>
   : A! k) E" b8 k7 P4 R
4.     <h1>Alexa : {{alexa}}</h1>
   + g+ U  j! E" A& o+ a
5. </div>
   ( M  ^) b& s  `" K6 a/ I* O; B  U& g
6. <script type="text/javascript">
   + [- N% f5 ]$ M
7. // 我们的数据对象
   
8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
   
9. var vm = new Vue({
   3 O9 g$ b; Z# @1 F" v( v! o
10.     el: '#vue_det',
    ' @) E, g" R& m# b7 |9 ?
11.     data: data
    
12. })
    9 i* s+ U# c' f" y% g
13. 
    
14. document.write(vm.$data === data) // true
    
15. document.write("<br>") // true
    # P4 ]1 K. t" r, {# R
16. document.write(vm.$el === document.getElementById('vue_det')) // true
    % n2 N7 x2 R# Z  `( x- _
17. </script>

复制代码

; t3 \7 O1 u  i# @( j

---

欢迎光临 cncml手绘网 (http://bbs.cncml.com/)

Powered by Discuz! X3.2