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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 起步

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:08:58 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
  1. var vm = new Vue({* A, ~" ]$ G% W% P9 ?4 u+ {
  2.   // 选项6 Q  P5 E3 J' V3 \& |" w
  3. })
复制代码
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
  1. <div id="vue_det">
    ; Z* B( K. l+ e1 l5 o
  2.     <h1>site : {{site}}</h1>7 V. k$ Q3 N) r3 ]; a8 o1 \
  3.     <h1>url : {{url}}</h1>
    & I7 n# o2 y2 B' O
  4.     <h1>{{details()}}</h1>; f6 Y! ~2 E! v4 Y
  5. </div>' o/ t/ {8 S* S! f3 E$ v
  6. <script type="text/javascript"># O' ~: j' T9 E9 |, T% l
  7.     var vm = new Vue({9 e3 K: _; [9 t: B9 s
  8.         el: '#vue_det'," c5 X6 [2 W& A! ]& @
  9.         data: {
    - e7 |3 f, Y# m' T, ~
  10.             site: "菜鸟教程",( v0 y' @  |4 U) |! S' j4 ~
  11.             url: "www.runoob.com",, y+ H/ Q7 c1 E9 e
  12.             alexa: "10000"9 [' M" a: e. h
  13.         },7 l8 ?7 `) R* Y4 j4 T: S* U0 P
  14.         methods: {
    ) R4 q7 i  i( @- l( j  P; ]
  15.             details: function() {. c" X  ~$ `2 G( Z4 O
  16.                 return  this.site + " - 学的不仅是技术,更是梦想!";) f, Y/ W( ^( p7 I2 u% V5 \; P
  17.             }( V+ l- a  I/ o( p' }/ |  j2 O
  18.         }9 f, Y! e& n" ]2 P$ H; i4 z& B1 Q: l8 n
  19.     })
    8 [- S& I# Q( E8 {4 `
  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">
    - A6 L8 J4 q1 B) C  u  q* `. [
  2.     <h1>site : {{site}}</h1>
    , E$ ?. E, F6 r2 t0 D
  3.     <h1>url : {{url}}</h1>/ m( y4 ?$ L% Y+ t% M5 d$ e
  4.     <h1>{{details()}}</h1>
    + ]# N: N2 s( U6 w; D
  5. </div>
复制代码
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
  1. <div id="vue_det">+ P1 V5 P. \: e0 H: w2 ]
  2.     <h1>site : {{site}}</h1>
    ( A' S: x- M# i/ E, [4 X, B
  3.     <h1>url : {{url}}</h1>
    6 [2 X3 z- g3 @+ e
  4.     <h1>Alexa : {{alexa}}</h1>! @& k, G5 ~5 g  E6 b0 |
  5. </div>
    9 q6 U! f4 h2 ]; u. O& P
  6. <script type="text/javascript">6 k/ z9 L/ b" C" U1 l$ _
  7. // 我们的数据对象
    ; }3 e+ J6 k7 e, H, q2 ?% d6 P
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}: ]5 ~3 ]" D2 ]! x
  9. var vm = new Vue({
    5 i" ]0 m3 q$ A1 e9 E* p
  10.     el: '#vue_det',4 f1 H# K* P6 k, K2 {
  11.     data: data
    ; S! O7 Z, u) i2 O: S/ \
  12. })- ?& ~& }5 V: O2 W) ~, `7 I. ?
  13. // 它们引用相同的对象!; e# x4 z3 K* R$ |$ n. T
  14. document.write(vm.a === data.a) // true
    - ^: |$ y4 q) Z( m; E: p
  15. document.write("<br>"). C0 z( l- j  y+ \- G4 \9 S
  16. // 设置属性也会影响到原始数据
    % f% K4 p4 M5 ]4 I: D) R
  17. vm.site = "Runoob"" E/ R. L; Q/ C9 t% v6 h
  18. document.write(data.site + "<br>") // Runoob: u( o" q% O, t: a
  19. 1 l- @9 r4 e- w2 [: [; C
  20. // ……反之亦然
    5 f  Q* F# ~1 c6 ^0 B) b: w
  21. data.alexa = 1234/ B' H+ i" q5 i; b; @% c$ ~8 r- a& I
  22. document.write(vm.alexa) // 12348 ^: _! m" g- Z' `8 b0 F& V
  23. </script>
复制代码
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
  1. <div id="vue_det">
    ' i" Q9 f+ b7 C
  2.     <h1>site : {{site}}</h1>+ \6 ^! Z- S7 M, j
  3.     <h1>url : {{url}}</h1>
    9 t7 H* a) u" ?, f+ Y" R
  4.     <h1>Alexa : {{alexa}}</h1>
    - d. ]2 M2 q; H) J) ]
  5. </div>- ~8 A- ]% e' w0 |- {: |
  6. <script type="text/javascript">4 Q+ m9 T: k$ b, O) b5 u1 D. ?
  7. // 我们的数据对象
    8 i& C0 ~4 _, \. w5 t# I5 Y
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}8 }) W: Q6 b0 J; Y+ M
  9. var vm = new Vue({
    # d+ `* v& f- [/ @6 ?. Y
  10.     el: '#vue_det',
    & t( Z8 b! p3 g& y
  11.     data: data
    6 g& y, `6 l  V7 k+ d8 T! _
  12. })
    # Q. n) K9 Z; z$ i
  13. % n, T1 \: J4 F& L  N
  14. document.write(vm.$data === data) // true1 i4 L1 y4 a! B/ w  i
  15. document.write("<br>") // true
    # h, ^$ X# \. t$ {
  16. document.write(vm.$el === document.getElementById('vue_det')) // true
    + j# W* a- d* b
  17. </script>
复制代码

) F* o6 O; l/ N% q  @5 S" {' N: D7 n+ R8 w
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-5 01:11 , Processed in 0.056324 second(s), 20 queries .

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