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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15025|回复: 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">' q: A. j* Q. ?5 B9 A! N: T8 p
  2.   <p>{{ message }}</p>. j* Y# ]* C- H5 O2 X; f. d2 u, [
  3. </div>
复制代码
Html
使用 v-html 指令用于输出 html 代码:
  1. <div id="app">
    # M( A% X5 C, j* j$ E
  2.     <div v-html="message"></div>6 `& ^, ^$ s- T+ s* [
  3. </div>
    1 o) E7 K6 m- t) F# r* r: L! F
  4.    
    " z/ _, O! @' a0 N1 r) X
  5. <script>
    ) N2 T/ |) ^! ^7 ~) \
  6. new Vue({
    , e+ t; J' u% ^
  7.   el: '#app',
    5 r/ U; j7 H7 o2 K; _7 I
  8.   data: {% k1 F) f1 @# M8 R+ q' j0 z
  9.     message: '<h1>菜鸟教程</h1>'- y% X/ K, ]9 |7 x
  10.   }
    0 W, M, S. I" A
  11. })
    % d% X5 C/ c. j+ u( v
  12. </script>
复制代码
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
  1. <div id="app">
    * ^! d' T$ ~$ r' _. R" D
  2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">" A6 B; d+ ]% I* O4 |6 F
  3.   <br><br>
    6 d/ }4 h) ?- }' v5 o
  4.   <div v-bind:class="{'class1': class1}">" q( l' Y; j! {$ B, Q1 E
  5.     directiva v-bind:class
    1 p" u, q) A( o* {' E5 X
  6.   </div>0 [! y( W9 N: l* p7 [) R! E* f' s* `
  7. </div>9 p- L3 d1 \* c0 X
  8.     2 u0 d' b( E5 n4 d: z
  9. <script>
    ; p2 W8 r  q; _0 Q  Z
  10. new Vue({
    . S- r% \8 T5 z0 e
  11.     el: '#app',
    / X# M% j' f, K% Q0 H" o6 F, `8 B& B
  12.   data:{9 V# i5 _& E+ h" N: |* J
  13.       class1: false
    - ?! R# y& U/ K8 y' W
  14.   }2 P2 [: L" B. ]* p- M7 X
  15. });$ ^0 u1 _, {9 K( j  U9 j
  16. </script>
复制代码
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
  1. <div id="app">
    2 R% m! O7 I9 f; ^' h
  2.     {{5+5}}<br>$ R2 c" U7 j& K; d
  3.     {{ ok ? 'YES' : 'NO' }}<br>
    ' C' q: o4 T9 m
  4.     {{ message.split('').reverse().join('') }}9 a' ?: y% G, A% y8 X+ M- f
  5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
    : M' s2 _  @! E8 z; B( W8 v; ~
  6. </div>) I8 T$ j( y: T) Z
  7.    
    9 y; S8 P2 @0 h  g& e% R
  8. <script>
    . Z( E) g& u" M; T0 S" W
  9. new Vue({
    1 M% \- m; m* B6 V3 n4 o
  10.   el: '#app',
    ! Q4 N. l1 w5 s' P1 M/ D& e# c
  11.   data: {
    ( v8 o5 H: d9 P: w  P* M
  12.     ok: true,
    & V3 S& m' Y( h* K# {" ~; F
  13.     message: 'RUNOOB',& K0 d" K) d+ x; C! U" a, b
  14.     id : 1  j! A. Q" O( x) R6 z" P6 X3 P
  15.   }
    ; T. |8 B3 X2 I
  16. })1 R- K* k3 p% ~, M5 P" `: x, M
  17. </script>
复制代码
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
  1. <div id="app">
    : S: m, Q) n+ p( s& {9 v) p% ~
  2.     <p v-if="seen">现在你看到我了</p>! C6 N0 Z- ]8 A) h& q
  3. </div>* y  Q( j- s+ v! H
  4.    
    ) n! T3 J& i4 m+ }& }6 d. z  S* c
  5. <script>0 S$ n- o: C9 J
  6. new Vue({
    6 X, v! f% m" ^1 \9 q* v- n
  7.   el: '#app',
    ) A" P  r8 ]* C' K; W* U: y# f
  8.   data: {
    0 v* [$ G- S3 \/ r( t6 s0 }9 x) a! w% N
  9.     seen: true$ g# \* Z3 O9 |9 s! u
  10.   }
    . j+ ?% _; X$ A* q/ M& z0 D) l
  11. })
    ! r/ [- B4 X" B9 k
  12. </script>
复制代码

6 _) \- v/ I& e+ E/ ]; w) D
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
  1. <div id="app">' C2 }, _9 K5 s) C! i. a5 m
  2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>" Y, q2 n9 \% g6 T. R# y. l2 J
  3. </div># S! j5 }, W6 r9 X8 w. q
  4.     - \+ r0 D, J! u, R6 i! ]$ `$ [
  5. <script>
    6 ?# X4 M: r' Q5 f8 y+ a
  6. new Vue({
    5 w. j  U# c+ h8 h
  7.   el: '#app',
    9 Z% {) P, ?: N/ i# r+ w
  8.   data: {( O/ \7 E3 S3 U& a7 [6 [  [
  9.     url: 'http://www.runoob.com'3 r6 J/ F1 I( {6 A; F, |7 E
  10.   }% U" s% m5 E' g" J" B9 }6 j
  11. })
    ) T" s9 D8 r/ U9 f
  12. </script>
复制代码
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
  1. <a v-on:click="doSomething">
复制代码
/ k& `0 \9 F( y
  1. <div id="app">
    % @5 ?# S) L7 v" _% {' K
  2.     <pre><a v-bind:href="url">Vue参数</a></pre>6 |# F6 r, w$ m9 ~2 ^, V2 H

  3. $ R, T, k6 C( ^( R' X& t
  4. </div>$ I2 A$ }+ w. m1 _

  5. - [5 `3 `, o6 V; @, w8 D
  6. <div id="app2">8 _1 t5 \1 V( `/ l, {% U" `
  7.    <p v-for="val in arr">9 X. Y8 O. f9 ^! A
  8.     {{val.a}}* Y4 D, P& \3 P0 F
  9.    </p>
    9 t: J" `) p6 K1 Z9 g$ i4 I7 T6 g
  10.    <a  v-on:click="tap">点我</a>- L' P2 p& c1 d9 L; |' l- i1 B. q
  11. </div>: H" n5 G  _/ B
  12. + q) B& Q8 ?/ p- L1 i+ r* }
  13. 2 [: P" r$ m, X& p2 B! w# [! c
  14. <script>- D9 ?$ W* e9 W- T4 `" W: u
  15. new Vue({
    / Z  @" }8 P( Q4 l$ S' \, n
  16.   el: '#app',! K0 _- Y4 i8 j6 g
  17.   data: {# Z- G! Z% w1 I4 O! X0 ~# W
  18.     url: 'http://www.cncml.com'5 K( B9 s6 L7 X6 ?3 L$ z
  19.   }9 T! w6 M/ H2 H4 O2 g  h
  20. })4 d9 d2 Q4 H* p( u, V( \
  21. new Vue({- H' }- H) K5 S  n9 u. l9 h
  22.   el: '#app2',
    1 F, L$ m9 _( J
  23.   data: {
    0 O  z9 _: l6 O& ^
  24.     arr:[
    1 D3 J( v; {4 F  D6 `3 o  F" d" h
  25.      {a:'bb'},
    ) a( K, a6 Q6 w! `6 x3 G- h
  26.      {a:'cc'}% T) G, y, o6 e2 r1 z2 ^
  27.     ]
    1 U& s' W8 C/ M* p. q2 u4 ?
  28.   },  b; h* N  V! D  C6 k! l/ J& c
  29.    methods:{
    4 i3 c, \, K% I7 b( {
  30.     tap : function(){% ]6 m2 P* S8 `& o# I- k& |. `
  31.      this.arr.unshift({a:'new'})
    9 s& C9 O3 j2 G- X" w. V, X
  32.     }' E7 x3 M" i. K+ L
  33.    }
    ) I5 Y6 \9 A! k" ?
  34. })$ {1 A  I/ C' S  i* z; b
  35. </script>
复制代码
( h9 a7 m- Q" H1 z; e

* S2 m7 K5 l0 L' v* T, n
在这里参数是监听的事件名。
! ?* ]6 ~( m. g9 G
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 21:47 , Processed in 0.061872 second(s), 24 queries .

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