您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14736|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 起步

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:08:58 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
  1. var vm = new Vue({
    8 S9 g$ m2 z& P( q+ F
  2.   // 选项
    * a0 j) _. I% E! ?9 \
  3. })
复制代码
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
  1. <div id="vue_det">5 q+ C" J, v3 e
  2.     <h1>site : {{site}}</h1>; R- ?6 h( Z5 ?
  3.     <h1>url : {{url}}</h1>. h  [4 [2 p8 \) z  N4 T3 S* M
  4.     <h1>{{details()}}</h1>( v# k8 b) k/ x# a- s
  5. </div>
    , `0 V# {7 k/ g6 I: J! L# I
  6. <script type="text/javascript">; k* v( j$ F$ k& l* V- z1 K+ u
  7.     var vm = new Vue({# a0 j( M2 n& H
  8.         el: '#vue_det',
    . O/ z# ^- T& S/ j* f
  9.         data: {7 r, x. q: y% a8 o) T; O
  10.             site: "菜鸟教程",
    ; l0 W; J8 T" ~9 G0 B7 V2 d
  11.             url: "www.runoob.com",6 F9 w4 ?+ k9 H: p+ s% c. i
  12.             alexa: "10000"
    $ I1 j) c5 x7 z! m; I% N7 E: h
  13.         },9 T* ?! [" Z: y8 s
  14.         methods: {! f( ~, W% g( j* B, p5 s
  15.             details: function() {
    " p" A; R$ Z$ {3 a. m/ R
  16.                 return  this.site + " - 学的不仅是技术,更是梦想!";3 a7 W" y! ~( f! Q9 p7 F" V
  17.             }: }, v4 {& l+ @7 f; Q/ o8 |; B
  18.         }
    / m+ }3 H- H- q6 D
  19.     })
    % U& R/ P! r" X3 e  C3 [
  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">* j* C9 ~* V) |$ O4 R0 {1 K$ N% ~
  2.     <h1>site : {{site}}</h1>& ?" Q. g( c& C' H$ S! a7 M6 d1 B
  3.     <h1>url : {{url}}</h1>
    2 m3 o  M/ h1 [! K; T- Q
  4.     <h1>{{details()}}</h1>
    $ h4 c# Y3 f" D% c; W: V
  5. </div>
复制代码
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
  1. <div id="vue_det">
    0 e1 Y" F: F, S0 P
  2.     <h1>site : {{site}}</h1>0 b1 M- X9 f+ D$ @) [
  3.     <h1>url : {{url}}</h1># k4 _4 s$ h( J6 G% T( G' [5 u
  4.     <h1>Alexa : {{alexa}}</h1>7 L6 E- q1 W! z8 \7 m
  5. </div>. s+ u. ?5 U/ F7 `% B
  6. <script type="text/javascript">- _" m1 S! o- q2 C. `' P
  7. // 我们的数据对象
    3 z4 y2 ?9 ~6 C! O' k. F
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    # a% D% D. i% v! c8 p
  9. var vm = new Vue({
      x8 {9 ^% \- F, n0 p, f
  10.     el: '#vue_det',
    5 n- X1 B8 N& r1 r* q9 s: V
  11.     data: data# L# y. i! E7 Z) x
  12. })( E3 m) p/ t4 k3 i6 S- k0 ^
  13. // 它们引用相同的对象!
    0 Y3 I6 m5 t: V' @# V
  14. document.write(vm.a === data.a) // true0 p: q% V3 n' b* I, Q. G( K
  15. document.write("<br>")
    ( n: n1 f0 ]  H# r/ R9 f, M! R
  16. // 设置属性也会影响到原始数据+ c* [# l5 x, ^
  17. vm.site = "Runoob", u. K$ H, L! [: D( i3 H
  18. document.write(data.site + "<br>") // Runoob
    : b9 B: f: ], k$ G& Z4 \
  19. 6 \- C% j. T& v9 J2 Z9 ?5 M
  20. // ……反之亦然0 W6 v% G' Z1 c8 i; W: n
  21. data.alexa = 1234
    % J/ ]3 I6 y. d# _( ^
  22. document.write(vm.alexa) // 1234% s1 P# \% m& |( H: K
  23. </script>
复制代码
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
  1. <div id="vue_det">
    : d6 U7 h& \7 n- f3 s! _
  2.     <h1>site : {{site}}</h1>$ e% y% d: ?; q4 ]
  3.     <h1>url : {{url}}</h1>
    9 o$ |9 J1 M1 L& o
  4.     <h1>Alexa : {{alexa}}</h1>
    ! @% b9 I1 y5 H* \9 `
  5. </div>* d; A9 w& W+ A% \* E. J5 Q- D
  6. <script type="text/javascript">
    5 I! T- k! T' l: ]
  7. // 我们的数据对象
    ! u6 \% \- @- P. w0 P
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}& V% d9 [' B0 o3 I
  9. var vm = new Vue({
    ( {  G: e3 l$ b- Q
  10.     el: '#vue_det',1 }$ ]$ b+ B5 Z; K4 a: a
  11.     data: data- A/ N' w3 m5 r7 j* c0 d* D
  12. })
    & M" X9 X' _/ A) h& ]& a- D  a

  13. 4 J4 a+ L. m% S* F/ K) l6 L" K7 v
  14. document.write(vm.$data === data) // true
    / O9 n' d; Q! _3 \$ k' i: S" q
  15. document.write("<br>") // true
    2 A  g; f! h! O( @; o
  16. document.write(vm.$el === document.getElementById('vue_det')) // true9 ?0 Z% \5 e3 Q' c. `* l
  17. </script>
复制代码
4 N  @1 S' {; F' Z

5 o$ T2 o3 k# l
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 04:19 , Processed in 0.085555 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!