cncml手绘网

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

作者: admin    时间: 2018-7-1 23:08
标题: Vue.js 起步
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
  1. var vm = new Vue({
    ; u5 z8 b) [8 F( S, b: ]  E
  2.   // 选项
    5 N0 z- v( H/ x+ u4 F; [: D
  3. })
复制代码
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
  1. <div id="vue_det">
    3 V: }$ A/ K4 k0 \/ F. c
  2.     <h1>site : {{site}}</h1>
    , R* D% p5 I9 Z! j
  3.     <h1>url : {{url}}</h1>3 F/ J0 K/ G& ]8 d( \
  4.     <h1>{{details()}}</h1>
    & ~# X8 H# c+ O$ f6 q$ G$ x
  5. </div>
    4 [6 h2 T  x, J" l
  6. <script type="text/javascript">
    ( v  L: X" j2 J4 \8 v/ r
  7.     var vm = new Vue({( b( J6 Z. Y0 @5 c) H. n
  8.         el: '#vue_det',
    ' v" X7 {- \$ Z  ?
  9.         data: {
    ! x4 O0 J# k: Y. ~$ z
  10.             site: "菜鸟教程",
    5 A! [* p8 }4 q) w' G
  11.             url: "www.runoob.com",
    4 P( a/ h0 b% D7 t
  12.             alexa: "10000"2 @8 g( i! N. I5 _' r& b
  13.         },, S8 ^# i( P3 f2 F
  14.         methods: {
    - ?7 V. l! ?" C7 v& U0 `3 I0 Q
  15.             details: function() {
      k+ S+ h6 P$ i4 E3 N& U( [' v
  16.                 return  this.site + " - 学的不仅是技术,更是梦想!";
    ( d: \$ }" ~# m4 U4 d7 N8 O2 O
  17.             }
    % [$ s& ?" B. R! D. v
  18.         }
    " n2 s$ I7 o2 k$ A% [
  19.     })  T! ]5 ]5 C0 \" @# G' M0 s
  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">
    ) F* p1 R  ?% Q, l7 b1 v- \0 c
  2.     <h1>site : {{site}}</h1>4 k0 U" \/ j) O2 @. m& ^  O
  3.     <h1>url : {{url}}</h1>& u0 g( S2 x9 D! m: ?
  4.     <h1>{{details()}}</h1>5 d5 r! t; c+ {, W* ]/ ]
  5. </div>
复制代码
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
  1. <div id="vue_det">0 b: X+ e) `' k0 y. ~. r+ g
  2.     <h1>site : {{site}}</h1>. ^$ `) s: w, G7 ~7 j8 j0 v8 C! y
  3.     <h1>url : {{url}}</h1>
    # z+ `3 G& B: ?1 d0 U
  4.     <h1>Alexa : {{alexa}}</h1>
    4 Z1 J9 Z9 U9 s, O
  5. </div>
    . C, C7 P9 [8 R4 [
  6. <script type="text/javascript">0 G, O" f4 v2 Z6 L9 N; a
  7. // 我们的数据对象8 L, m3 ]( u* W; o4 X, {: D- Y0 [
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}: U7 V' a0 Q9 I0 L- {
  9. var vm = new Vue({2 v/ w# n0 W" ^9 R
  10.     el: '#vue_det',8 U( J- I$ m* M1 t' o" Y4 X: |3 O$ y, }
  11.     data: data) X' ^: c# G6 A7 ~5 X0 m# O" ~5 w
  12. })5 `. C) X$ I0 b6 {+ N
  13. // 它们引用相同的对象!. F2 f4 L9 I: C6 ^  _! B
  14. document.write(vm.a === data.a) // true
    7 K  ^9 ?' Z+ m
  15. document.write("<br>"): f! O* O5 b; s0 }) X
  16. // 设置属性也会影响到原始数据9 W- p: w& E8 q' J. D
  17. vm.site = "Runoob"
    " y! C# p; t! F
  18. document.write(data.site + "<br>") // Runoob
    - C* e; J' h8 Z
  19. 1 E2 t, X: o) g$ H7 H# ~8 I" K. Q
  20. // ……反之亦然
    ) H, z2 t% D  p0 {; f" n
  21. data.alexa = 12347 N$ \, G. V7 k  r9 u& T
  22. document.write(vm.alexa) // 12349 `, A3 ~3 W! i3 E. t: J
  23. </script>
复制代码
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
  1. <div id="vue_det">
    . {4 l8 T. n5 W* `0 N
  2.     <h1>site : {{site}}</h1>
    6 e3 c+ R6 B% }  v' R
  3.     <h1>url : {{url}}</h1>
    & Z  U) C: t/ ?) t; O' I
  4.     <h1>Alexa : {{alexa}}</h1>
    : c5 G$ I2 d* |6 X$ w0 O, z! m0 q
  5. </div>7 V9 d" m/ l: u! \
  6. <script type="text/javascript">* x1 `7 |+ S2 j+ i2 g) v
  7. // 我们的数据对象# y" Y- p( z" v( }4 M) `: t
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}# j1 ]+ _- ^$ b" N! W' ]0 r
  9. var vm = new Vue({& |0 ?; |& m* R& G, g3 Z" P: }
  10.     el: '#vue_det',. N0 n+ P  K$ Y* M. |
  11.     data: data
    9 B; L( n: }3 n# O
  12. })
    , o' k5 Z% G5 L8 m6 z) K
  13. & w5 [9 g/ j! h' x1 c
  14. document.write(vm.$data === data) // true& U6 ~* h8 U, w
  15. document.write("<br>") // true5 y/ Z% D5 c+ z9 Y$ w: S: B
  16. document.write(vm.$el === document.getElementById('vue_det')) // true& I, y  n; U  V5 B  m
  17. </script>
复制代码
; G9 v- y! j/ p( C/ J

3 H0 I* U5 l, m$ b* c  u




欢迎光临 cncml手绘网 (http://www.cncml.com/) Powered by Discuz! X3.2