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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 起步

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:08:58 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
  1. var vm = new Vue({+ Q% r: X# I9 {. q5 D$ G! m  `
  2.   // 选项* N/ L5 f2 Y4 k0 \3 R0 }) Q8 O9 _4 @
  3. })
复制代码
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
  1. <div id="vue_det">' U& K4 ?' R& o, Q7 d
  2.     <h1>site : {{site}}</h1>
    ( O+ n% F, k$ a
  3.     <h1>url : {{url}}</h1>
    ! i' h8 m. Z1 h5 e) q6 s* K5 l
  4.     <h1>{{details()}}</h1>: W7 l6 ]! j$ L/ L) d# z7 ^
  5. </div>
    9 x% z* ^# ]" T
  6. <script type="text/javascript">' I5 {* ~6 q* F+ J4 n/ X1 D& t5 h
  7.     var vm = new Vue({
    ; ^2 W% ]! f) c, s( }  h
  8.         el: '#vue_det',7 W  h# o% ~9 E6 y$ `& t
  9.         data: {
    & z2 e( L9 ]- i2 G9 c$ E
  10.             site: "菜鸟教程",/ {9 `. i4 _' B8 K3 y
  11.             url: "www.runoob.com",% m% e9 L4 K. e1 U. R5 l- d4 g
  12.             alexa: "10000". t* n% R. x8 [
  13.         },- k0 y3 x' G2 ~
  14.         methods: {
    * q$ S) L& c% m1 M  h
  15.             details: function() {& \  n+ X  Z5 i3 W+ E& a
  16.                 return  this.site + " - 学的不仅是技术,更是梦想!";
    1 e/ G. ?' }- m, h2 z
  17.             }1 d( |$ O$ E$ b$ V
  18.         }& M* Q( E8 x; v
  19.     }); x' ~% L$ v% |$ A+ V
  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">
    * l; x( v9 l- L7 w7 r
  2.     <h1>site : {{site}}</h1>$ P0 {- y4 |& S, G* M" }! y
  3.     <h1>url : {{url}}</h1>
    * T) Z' B' Y: x9 ?
  4.     <h1>{{details()}}</h1>( W: o& U, Q0 @( X+ f3 e" o1 F/ |
  5. </div>
复制代码
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
  1. <div id="vue_det"># J1 J7 C+ C" E& Y
  2.     <h1>site : {{site}}</h1>
    / H1 S  q  R9 E1 z- B% k2 Q
  3.     <h1>url : {{url}}</h1>- R! C% r  ?/ a6 H$ ?- U# d
  4.     <h1>Alexa : {{alexa}}</h1>0 u* @( X: c+ @9 y" o
  5. </div>6 P7 n4 O/ t( ]6 Z: B7 Z
  6. <script type="text/javascript">7 u+ Z' N% v9 a6 `$ _8 ]* l
  7. // 我们的数据对象+ O, c9 T/ s' A/ N+ [" t
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    2 T6 K  K5 V" G3 Z
  9. var vm = new Vue({
    9 Q$ B" ^, K8 q. q4 P
  10.     el: '#vue_det',  q, K* b2 s$ d9 q+ {; O. d
  11.     data: data
    9 H: w) A: I0 P( U3 o
  12. })
    ; u# t; q7 j$ R% C* b; p! t
  13. // 它们引用相同的对象!
    ( B* U* s! _5 l3 R* x  H
  14. document.write(vm.a === data.a) // true1 O, ^/ T* U# w9 `" X* w" ?( E7 f) ]
  15. document.write("<br>")
    6 @* h& y3 g, C2 j9 @6 q
  16. // 设置属性也会影响到原始数据
    0 S  z- f" U1 c, p& h9 _$ A
  17. vm.site = "Runoob"
    . V2 H7 Y# S1 [# W3 ^
  18. document.write(data.site + "<br>") // Runoob
    1 J8 v' @8 b; x5 j, {# G
  19. & x3 w4 }" d$ e* j' a$ K
  20. // ……反之亦然
    6 {" x8 i5 E9 q% F* a  j  N4 Q  T5 J; {
  21. data.alexa = 1234, F1 J+ d: S" c& w8 ^, R9 Q% L
  22. document.write(vm.alexa) // 1234# m6 d/ L8 V9 {6 [: I4 z; n
  23. </script>
复制代码
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
  1. <div id="vue_det">
    3 v' U7 C  m5 A8 w! W! ^) [
  2.     <h1>site : {{site}}</h1>
      v/ y' s  I! \# n+ |5 i: E+ e
  3.     <h1>url : {{url}}</h1>) w  w6 k1 a& D) q
  4.     <h1>Alexa : {{alexa}}</h1>
    . {. ?# T+ ^$ ~3 \4 D" ^4 M
  5. </div>$ |& a$ F. N( R( j! _1 c; H
  6. <script type="text/javascript">
    & D: a" q5 S! |! J3 V5 B
  7. // 我们的数据对象) V6 E# ~* q3 Y, c" Q
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    4 l) O8 G9 `* i- ~
  9. var vm = new Vue({
    + R# ~& U* N, ~$ Y* H! P5 v5 x
  10.     el: '#vue_det',- }4 z+ X- o0 f( K4 Z3 p7 N
  11.     data: data& m% |' u5 }. i. a  A
  12. })$ h% z% l: V9 d  c5 M3 D: q9 n

  13. , ?2 D3 t6 P# d3 M
  14. document.write(vm.$data === data) // true, _6 ~. U+ h) c7 {
  15. document.write("<br>") // true
    - |; {2 ?" d; O, N; g
  16. document.write(vm.$el === document.getElementById('vue_det')) // true2 ~; m0 n, M+ |. ^& D6 E2 y* A
  17. </script>
复制代码

) R$ f7 y% y/ j6 R% o! S) i0 `2 c, C
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-5-2 15:26 , Processed in 0.055441 second(s), 19 queries .

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