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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 模板语法

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:16:47 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值文本
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
  1. <div id="app">1 Q8 X+ K6 L7 V3 A
  2.   <p>{{ message }}</p>
    8 x: [; C1 A- Z
  3. </div>
复制代码
Html
使用 v-html 指令用于输出 html 代码:
  1. <div id="app">
    2 M: S# K% B# Z
  2.     <div v-html="message"></div>+ H) }3 q+ I" Z/ b
  3. </div>
    * V/ x3 Z( N; H7 e% F0 ?/ R( ^6 I
  4.     * t+ N7 h9 D# c5 `5 E
  5. <script>
    0 I& R/ }: z8 z" {, W9 l
  6. new Vue({
    2 q; U- D- `7 N' [4 h: U
  7.   el: '#app',
    1 [6 j6 R3 g. ?- @4 g
  8.   data: {
    ; W% Y8 e4 I; E- t
  9.     message: '<h1>菜鸟教程</h1>'; F  w8 o. `6 _% h, R9 }
  10.   }+ f" t! z$ I5 J& @! P- i
  11. })5 ]- L3 z! t, R& v* B0 s
  12. </script>
复制代码
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
  1. <div id="app">
    ) d  I; S; b1 h7 x4 i, j" ]8 K
  2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">* t3 z" M* W" f
  3.   <br><br>, {2 O" \, A& P" b/ W, K3 G" n
  4.   <div v-bind:class="{'class1': class1}">
    - {! l, U  S7 U6 p
  5.     directiva v-bind:class
    4 |7 w& J8 n/ H% l4 h# N$ [3 I3 J( B
  6.   </div>
    , I- t3 ~6 D& c; ^9 A
  7. </div>
    4 g5 |$ L. j8 t' r
  8.     0 Y4 _/ c( `& \2 l* B- b
  9. <script>
      N: O* K: e3 r6 |- r! _
  10. new Vue({
    6 }+ |/ }4 ?& t- J  x5 ~* d
  11.     el: '#app',& d# C: t$ L4 [: d- C
  12.   data:{3 ]9 u9 Q: R+ P+ i* }
  13.       class1: false/ ~3 m; o* s2 {& E# }4 a2 J
  14.   }
    5 V3 M" g  J' g) H. h
  15. });
    # \: Q+ k; d8 M3 [: Q
  16. </script>
复制代码
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
  1. <div id="app">7 w* Q; f: T1 }2 o% w
  2.     {{5+5}}<br>0 ?1 a. [" G7 l
  3.     {{ ok ? 'YES' : 'NO' }}<br>6 p% w4 @! i; c
  4.     {{ message.split('').reverse().join('') }}" h: G6 r4 L2 C( r) \+ @
  5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
    7 l, t, P: x% n8 i/ o) z
  6. </div>
    ( N" v+ {! {: v; \1 u  G
  7.    
    8 e# ~  F; Q4 P8 _
  8. <script>- |2 l2 _5 B) C; h& l& Y
  9. new Vue({. f4 g: |1 L% T" h. I
  10.   el: '#app',' L: t) z+ d+ B1 g, a1 E5 |
  11.   data: {
    ' N9 @6 m  R5 x2 x6 D
  12.     ok: true,. E6 n/ I' J: ?1 `# L0 Q0 W
  13.     message: 'RUNOOB',! N* ~* T7 k" \7 o$ I' C1 m0 \/ k% g
  14.     id : 1! S' @6 o2 e1 f# Y0 q' N( f% }
  15.   }$ [$ s& U2 K& {0 f  m+ ~# V* T. o
  16. })' n' H0 D7 E+ B9 j! W. R! Q5 D
  17. </script>
复制代码
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
  1. <div id="app">
    2 C; B# {8 F- Q  ?6 u9 M/ w, l
  2.     <p v-if="seen">现在你看到我了</p>6 x5 e" U, G! P7 p+ V0 C$ r% b
  3. </div>; L& j6 n& o! X
  4.    
    , c  v$ R) w& K  q  T# N5 c
  5. <script>
    ! v# A/ h& q' l- K: a' U- B' B6 Q+ g
  6. new Vue({
    / u8 S2 C' P4 D1 y1 m+ g
  7.   el: '#app',
    , U# @0 M8 @* b: U
  8.   data: {
    3 c, o  C* f( i
  9.     seen: true8 G: W9 i# O: ~* @. R+ F
  10.   }  n, Q/ i) h/ K/ W5 ^
  11. })
    " F3 e0 j6 C1 o9 i
  12. </script>
复制代码
4 t+ A0 j8 H, C- q0 \3 l
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
  1. <div id="app">" z% a7 p: e2 ~% P' h
  2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
    " E$ C' l9 v& _$ D3 P4 E2 w/ V- V
  3. </div>
    4 V. `" C9 G+ M7 g5 G8 Y# z/ g
  4.    
    3 o# G. h$ ?, D& v7 q
  5. <script>
    3 ~& E  r- Z) b: {
  6. new Vue({& h2 p, L/ S" f3 B  o8 Z
  7.   el: '#app',
    5 W" T9 S& ]( B1 z
  8.   data: {) F7 U' t$ g$ X
  9.     url: 'http://www.runoob.com'
    / r- N1 M, T5 S3 K$ _3 [
  10.   }6 n3 B8 `7 R$ {2 S
  11. })
    % J4 Q, P9 \/ A; K) L1 T& i
  12. </script>
复制代码
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
  1. <a v-on:click="doSomething">
复制代码

: L% |+ `& H5 l2 X2 a/ t5 j
  1. <div id="app">- P5 T+ M+ m8 N
  2.     <pre><a v-bind:href="url">Vue参数</a></pre>9 h3 T, T$ [7 Y" L# H* o+ b
  3. ; G/ I+ t7 m, A
  4. </div>
    0 ?$ ?1 W( @9 |. L, F

  5. # U. Z# m, a9 ^+ `+ k7 @
  6. <div id="app2">: Z0 {$ c0 J1 f. B% ^
  7.    <p v-for="val in arr">- J* ^  Y  t' l. P' n
  8.     {{val.a}}' K6 w+ B! d$ s+ d5 k: r2 `5 S7 E
  9.    </p>
    6 D3 d0 Y$ U. s' I4 Q
  10.    <a  v-on:click="tap">点我</a># t& l$ E+ r: W: K' ?4 _
  11. </div>
    4 l% @% g4 {: `4 A

  12. 3 j% e$ N# J) D6 |2 q
  13.   E2 Q! R* c$ t* W+ U
  14. <script>
    + P0 D2 G# c$ c. K/ z
  15. new Vue({/ b4 I, U  I# ~  k7 A
  16.   el: '#app',
    3 v: @$ s, _* h* T4 F" D
  17.   data: {
    0 f% O6 i5 S- {* U# n
  18.     url: 'http://www.cncml.com'
    4 J" W7 Z: e8 D$ c1 \  f$ ~
  19.   }- q& o' O' e) q, }. \$ k+ b6 l
  20. })7 x* N% L' z" j  `( s+ Z; q8 f' u
  21. new Vue({
    4 }  h- A7 R( p' ]% n! o2 T+ R, e& H
  22.   el: '#app2',
    $ e0 B: G8 @1 U* Y: s+ j9 g. t* `) Z
  23.   data: {
    7 a. u) \0 k: T; s; f: D
  24.     arr:[
    6 D: p, \0 x% S& p7 j
  25.      {a:'bb'},( g% X4 r  K# C& A) M
  26.      {a:'cc'}# Y5 a# n, X( P# ~4 j; B. |% g
  27.     ]
    : j, a, V9 h& G* l
  28.   },3 \1 N$ K3 ?0 @3 G2 W3 [$ I
  29.    methods:{
    ; z3 h6 r$ K7 ^. @! S
  30.     tap : function(){
      h8 H: M* |4 ~1 k1 ]
  31.      this.arr.unshift({a:'new'})/ }7 V5 d) T& c( R* C
  32.     }  X1 V0 Y: Z. \1 C* Y$ f
  33.    }. O& Q' T) I+ ]4 a$ E7 f
  34. })
    - d" E7 i/ ^$ o: t
  35. </script>
复制代码

$ ~& c9 i9 L4 [' p6 _/ Y6 \
/ _7 a8 t  n5 ?+ o" ^6 o
在这里参数是监听的事件名。

& D8 A% t3 ^7 _- \* V
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 22:04 , Processed in 0.072958 second(s), 23 queries .

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