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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15972|回复: 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">( A8 P: k$ T+ E4 l% b9 A: P! \2 q2 L
  2.   <p>{{ message }}</p>8 E/ B6 \2 `3 \% U+ b! ]4 w
  3. </div>
复制代码
Html
使用 v-html 指令用于输出 html 代码:
  1. <div id="app">
    ( A9 ^0 T4 B: h: T# N0 q1 q3 \
  2.     <div v-html="message"></div>
    2 x" n9 J0 v6 u( R1 B! P
  3. </div>
    9 b1 K0 W; t; L6 W
  4.     ; W# _$ s6 L' U8 [7 A* Y
  5. <script>
    3 K, i) o5 l, T" T  y/ y' u% S
  6. new Vue({
    / o' X- V0 h: H& {$ X( a
  7.   el: '#app',, H+ g5 V3 O! |3 d5 C
  8.   data: {
    5 v/ ?4 @. h2 h- H; Q
  9.     message: '<h1>菜鸟教程</h1>', v% T0 F' }% f3 q0 a6 D8 u6 w: |
  10.   }; g5 [5 G; M; X4 H! l1 m$ p/ m
  11. })
    * ?. j8 e/ K1 \2 M: v
  12. </script>
复制代码
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
  1. <div id="app">, b! E6 V# p3 H( P  [7 ]
  2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">/ ~) s; r) C; f2 B
  3.   <br><br>
    ; W! A( @: m& Z1 {7 m* @3 ^
  4.   <div v-bind:class="{'class1': class1}">
    1 P7 n+ f$ p* [
  5.     directiva v-bind:class
    # q) v# s4 C5 |* C! O8 M
  6.   </div># q; p8 H3 @7 ?" C2 \8 c) Z
  7. </div>
    9 M( Z. ?. J- q: h- |
  8.     4 N" w3 ~' m: L& o
  9. <script>
    / ~( I* ?' U. U0 S
  10. new Vue({
    0 f/ Z9 S3 e0 n( R! d
  11.     el: '#app',4 r6 g$ @- [- J& O, A; f
  12.   data:{
    1 c$ K, B" l( r: E0 O! y1 ^4 o! u
  13.       class1: false
    6 [( W% T3 d" H1 T( M4 @5 f5 ^8 d
  14.   }
    ; h/ R8 G. E* A$ [5 u# e
  15. });3 @/ ?* E4 C) o; G6 m
  16. </script>
复制代码
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
  1. <div id="app">6 F; E- y9 L, Q: c7 X4 L
  2.     {{5+5}}<br>8 x. F3 z! |  Y# d2 c% Q' m7 E
  3.     {{ ok ? 'YES' : 'NO' }}<br>0 E$ R4 z# Q) _: l6 y
  4.     {{ message.split('').reverse().join('') }}2 H9 l( g3 T. y0 S' `* t
  5.     <div v-bind:id="'list-' + id">菜鸟教程</div>, d) F% P" Q0 d) u% g* i$ j! i( v
  6. </div>
    6 [3 P; p7 N, B( B! v& w$ H
  7.    
    # c( ~1 X8 c( e9 d4 F
  8. <script>& n: L: y8 ?0 L$ }% u1 S
  9. new Vue({
    0 F' _0 T, e1 l6 n8 R0 l4 B
  10.   el: '#app',! {7 j+ g" b* }
  11.   data: {" F' l( G6 V$ j1 E7 f% a4 X- Y0 D
  12.     ok: true,2 L4 M) w) L/ ?  _8 ]7 {7 U! J
  13.     message: 'RUNOOB',$ I8 g6 L4 ~) v% F/ s
  14.     id : 17 v, D* ]- m2 L1 n( x* z
  15.   }5 o1 P( V' L5 q" ~+ a5 ~, ]
  16. })
    % j% g" D, o/ d0 w
  17. </script>
复制代码
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
  1. <div id="app">
    2 ?" G+ ]4 Y: F9 H; ?& y
  2.     <p v-if="seen">现在你看到我了</p>" g: e" U. B) b( L! C# p
  3. </div>' l1 b. q( |% G
  4.    
    / c7 a9 k; H4 A, G& p( _, C7 Q9 Z
  5. <script># @/ ~! A  `, q) p1 D! e; t& K' O
  6. new Vue({
    9 j- ~% f  w! m) ^
  7.   el: '#app',+ G0 g* r) z3 ?/ R9 T* s6 r3 [9 c
  8.   data: {
    ! k# u2 Z4 P1 S1 f; D) b/ f3 t& [
  9.     seen: true( J1 q+ r, T( _& `# ~1 n/ U
  10.   }( `* L& o' p" `, ^
  11. })
      E' K5 z5 C/ I
  12. </script>
复制代码

5 o1 t9 y$ k8 b/ ?
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
  1. <div id="app">% d$ w* G/ `5 S" r, X, ], F7 Z
  2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>& }4 J9 G/ T* R& G0 p+ {( G% H* ^6 s
  3. </div>
    ! i) X& |  f3 ?& B
  4.    
    4 K9 q+ e, B* z4 m5 I( @
  5. <script>0 G$ ~; `% G  Q4 O( @
  6. new Vue({& u% u. [% L1 M- I, R
  7.   el: '#app',  r0 d8 }& ]4 j. J" g' j* M
  8.   data: {5 s- }1 T! o/ A4 [' w8 ~: h) i, @
  9.     url: 'http://www.runoob.com'
    " ?1 {: Q7 y8 u
  10.   }" K, ^8 m2 _0 {5 a% b: f
  11. })
    1 a7 Q$ N0 P- M0 t2 Z' M
  12. </script>
复制代码
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
  1. <a v-on:click="doSomething">
复制代码

, N7 v0 N  p& Y" H$ a
  1. <div id="app">" X9 U: k  {- S& U
  2.     <pre><a v-bind:href="url">Vue参数</a></pre>$ k1 }1 K0 {+ j% k

  3.   y9 K* j/ K- i0 @' l
  4. </div>9 l/ T1 K3 j  h! u5 X. |  \4 _
  5. 1 ^. e; _- x" R6 Z
  6. <div id="app2"># S$ {+ \! M/ P# S: }
  7.    <p v-for="val in arr">6 J# E3 E+ L8 w; D. ~! I
  8.     {{val.a}}
    8 D6 K. f% E) W1 ?
  9.    </p>
    + f6 @3 n" y5 E8 Q. ~( C& M4 V/ m
  10.    <a  v-on:click="tap">点我</a>
    ! U1 R5 u, Y  G) E2 B
  11. </div>
    / g6 T  n7 b4 D* _, i4 n

  12. . j* C1 G9 m7 r& a  R

  13. . y8 y" _2 u" ~1 h: q. O
  14. <script>1 I/ D1 y  F9 o, e6 c
  15. new Vue({% _$ p; n/ J/ y  T5 q9 I( p* V
  16.   el: '#app',# E8 k1 D/ q- Z6 i9 n* }. Z; C
  17.   data: {5 l9 [) B' d- |" |
  18.     url: 'http://www.cncml.com'  O, t, m4 w: J$ E
  19.   }5 q1 s* r. B7 U2 @5 p; E3 s# }
  20. })
    3 p% h! j# s# O2 \2 X+ [5 g
  21. new Vue({
    7 R7 Z9 }0 k5 Z
  22.   el: '#app2',
    6 ]! z/ n. F$ E6 N; y
  23.   data: {/ S% Y0 L7 Q6 e
  24.     arr:[
    % k( A9 l+ [4 }6 s5 a, W
  25.      {a:'bb'},& @5 h4 H" C  Y* k' F% D4 W
  26.      {a:'cc'}9 P8 ]- z3 X. i
  27.     ]
    ' t3 {1 C0 q% y- @! ^' Z
  28.   },3 A% S4 m% M9 a3 v
  29.    methods:{" q" P, b5 S8 v! I
  30.     tap : function(){
    : c- _' k' `  c
  31.      this.arr.unshift({a:'new'})
    6 C! T5 U. f  L9 w4 V
  32.     }, |, F0 G  I0 u- G* q
  33.    }
    % q) f5 j) U; n7 Q9 f
  34. })
    & O4 p$ P1 @" R; |% Y0 M# J. Q1 N
  35. </script>
复制代码

& g7 y# [1 c) j3 N2 k  s$ Q: L* K

+ G- w( B* u' S( |
在这里参数是监听的事件名。
7 X$ p' W& H$ l$ @9 C
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 12:44 , Processed in 0.055747 second(s), 22 queries .

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