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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 16516|回复: 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">' j& u- o/ ~; y; N! i# N6 z) i- P
  2.   <p>{{ message }}</p>: G! f/ R2 J" ]3 Y
  3. </div>
复制代码
Html
使用 v-html 指令用于输出 html 代码:
  1. <div id="app">6 T" N, [/ u# @  o) K- u; C, v
  2.     <div v-html="message"></div>
    3 Q- w( g6 T# |3 l, |9 q$ c
  3. </div>8 A  i" G6 p7 o. T: r" d  ~) V4 k
  4.    
    4 v# n5 _4 |" H/ ^8 k% ?
  5. <script>2 Y" n/ U0 [% F7 Z# b5 s! O5 ?
  6. new Vue({
    * e1 F+ U) Q# t
  7.   el: '#app',& ?( J7 a& a! z; L
  8.   data: {4 r& s! U3 ]/ K4 E  W, J  C
  9.     message: '<h1>菜鸟教程</h1>'9 J& d4 [7 F, j2 S: {
  10.   }
    ' F& @* {* @' g4 X5 H1 G
  11. })9 _& T1 A# g9 @% F, \4 d
  12. </script>
复制代码
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
  1. <div id="app">
    , a! l; P) ~! H" A4 z5 ]) H
  2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">1 @0 W" E) Y: [0 ~! y, S2 p
  3.   <br><br>
    6 Q1 E- b5 H( E1 V3 }+ n
  4.   <div v-bind:class="{'class1': class1}">
    8 @& C% O4 p3 k4 R
  5.     directiva v-bind:class
    ) i' \  e* T. X6 B0 l$ E( g% n' ?
  6.   </div>3 o$ D. X1 R9 y5 m# b" y  l  q) d
  7. </div>
    : \  U0 M) L/ P! l
  8.    
    7 L8 k, Y# ^0 R( m' y) h% a
  9. <script>5 U/ ~9 f% \' s  u& ^# q
  10. new Vue({  V4 K4 X7 N" T* M
  11.     el: '#app',: S4 P  l6 `" e8 }: Z' d( K( w
  12.   data:{
    . _2 v, r, w3 A) m8 T5 _
  13.       class1: false
    ' s, U; l! x8 P
  14.   }
    0 b2 E* `+ q. e; X: V' [
  15. });
    * J& {9 U+ C, |' l$ W( s
  16. </script>
复制代码
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
  1. <div id="app">
    , v7 C3 ^5 G( `0 e* e2 H" }
  2.     {{5+5}}<br>
    ; {0 E* ~% |4 T* j
  3.     {{ ok ? 'YES' : 'NO' }}<br>4 v7 k* Z( Q* P/ J& U
  4.     {{ message.split('').reverse().join('') }}" ?0 {) ^3 a9 {9 i* G! ]: d) ]
  5.     <div v-bind:id="'list-' + id">菜鸟教程</div>, C& l; s- D7 q( `6 D6 f
  6. </div>
    ! W+ M9 o9 v& `2 V0 R' x7 L) Y$ ~
  7.    
    & M9 j, G  v9 `2 B8 ^3 h; [6 r7 p
  8. <script>- t9 j7 e" I/ W( C+ |( ]
  9. new Vue({
    / J- x: w7 Y8 Q* h4 N
  10.   el: '#app',7 I& k/ u' n5 |2 j4 f
  11.   data: {: `; I- m% C3 m  u, ]
  12.     ok: true,0 l" ^& @! H+ y6 F4 i' Y6 o$ s) P
  13.     message: 'RUNOOB',- e$ k1 E$ t! ^* F
  14.     id : 1
      @" n% B! m; m3 d1 i
  15.   }8 k. K" D( f* Z
  16. })3 K& R8 b, v- q+ b
  17. </script>
复制代码
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
  1. <div id="app">- H& o$ u4 Y. {3 H3 F7 g3 {/ H
  2.     <p v-if="seen">现在你看到我了</p>
    # U$ `4 h! v/ X7 H  A% S+ \! z
  3. </div>, E  T6 ?  c+ _! a0 l1 q4 `
  4.    
    * g4 F# l2 F( V/ J) _3 o
  5. <script>/ c7 R& |1 j% Q8 t+ p+ s+ J
  6. new Vue({7 c5 g% t  t$ ]6 U, j: Z/ m- O
  7.   el: '#app',
    / i$ B- Z7 \  I  \/ k& k5 i' G+ X
  8.   data: {! q. i9 H+ n, O
  9.     seen: true9 D8 ?9 f. G) T; a+ A6 U  k
  10.   }( A6 }- ^8 {+ g1 f7 C( R$ H, v
  11. })
    8 H$ E* e7 j; v$ C/ W5 Y
  12. </script>
复制代码

' g; ^8 {; r* H+ |' X) K- x
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
  1. <div id="app">
    ( e$ J) H; Q. t! ?0 D
  2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>3 r# E, k+ b* X4 n
  3. </div>7 }1 m/ {! `3 t, D  t, L9 [
  4.    
    # q* w# |$ Q( J$ \: J. B9 t" d4 a
  5. <script>
    " E; X" t8 }6 V# p
  6. new Vue({" X: T1 W& [7 R/ j- V& p
  7.   el: '#app',9 E, ^/ L- L. z8 {
  8.   data: {
    8 _* s5 z/ I) \9 F7 E
  9.     url: 'http://www.runoob.com'
    0 |: @* [) g8 V2 m6 m
  10.   }* b+ a9 v, u( a. V8 f
  11. })
    ! x- F* {( U; i2 p1 ~  Q
  12. </script>
复制代码
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
  1. <a v-on:click="doSomething">
复制代码
8 Z! a- s/ S, X7 x' A& ]
  1. <div id="app"># }3 B% o4 D7 D9 I4 z
  2.     <pre><a v-bind:href="url">Vue参数</a></pre>3 P" f5 F) ?' r

  3. * F) D& W/ ^5 k* g- X7 H7 V% y
  4. </div>
    7 l1 p. b1 T# Y" ]  T; y0 Y

  5. 7 V) q; P, G9 h+ \
  6. <div id="app2">! d2 E' m& ?+ k( B- I
  7.    <p v-for="val in arr">0 }% }; K) \5 @2 d! G  E8 Z
  8.     {{val.a}}
    / I3 h3 t( U% ?2 G" \: O- c
  9.    </p>0 t- n* b- c6 o
  10.    <a  v-on:click="tap">点我</a>- u( g" H3 f) i) b  r1 I) m
  11. </div>7 i% U2 j1 R) Z9 ~* D3 u
  12. 8 [- l1 ^5 `) M" ~* K

  13. 5 W+ s# v( X) y0 R* F0 G+ q
  14. <script>! G) }. D/ N1 t/ f, d0 d: y
  15. new Vue({
    % X- c4 Y" \0 e
  16.   el: '#app'," K' W" M( ?# I& \$ A& G
  17.   data: {8 |) f: m6 q3 P5 F6 h9 L8 W! c
  18.     url: 'http://www.cncml.com'( F. `; |( j7 {1 }9 L, [' P
  19.   }6 B/ ]) b$ O! o
  20. })4 D. |" W5 S$ f5 {0 @
  21. new Vue({
    4 |. F" R% y9 V6 N  O. S1 `
  22.   el: '#app2',2 i7 {- L! S3 q4 Y7 H! t
  23.   data: {
    2 s, C/ _) h8 I9 P
  24.     arr:[
      {( T" G3 v* m4 i5 \
  25.      {a:'bb'},, w/ h6 D: o9 D! M; o$ m# t5 W
  26.      {a:'cc'}$ o( W' b! v; f' O4 p7 h
  27.     ]- O, m( J" J/ }( Q5 ]' ~# R& j3 R
  28.   },
    1 \. y. K# s( b
  29.    methods:{' v$ A3 |% v5 j% R6 t
  30.     tap : function(){
    & W2 B/ ~5 N/ H
  31.      this.arr.unshift({a:'new'})  p6 f7 c- Q+ t* b- K
  32.     }$ Q& w, ~% t" b- U% C) z0 o
  33.    }
    , R0 D) ~% ~) v& Q1 K
  34. })2 K; y0 I+ g: g" X, V; X& U
  35. </script>
复制代码

4 J! K% h% {# }. `" V$ Z

7 }# _. s* b4 F
在这里参数是监听的事件名。

% i( T) S* x4 r
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-21 05:21 , Processed in 0.055817 second(s), 23 queries .

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