Vue.js 模板语法

admin

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

---

插值文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

1. <div id="app">
   
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

使用 v-html 指令用于输出 html 代码：

1. <div id="app">
   . y( e1 |, G/ G; n5 e
2.     <div v-html="message"></div>
   0 J( R  k0 {4 f' C
3. </div>
   
4.    
   & I2 o, ^$ F0 u- U8 A
5. <script>
   ! j" b4 `% h$ `" e7 E
6. new Vue({
   # t7 h* v, H( S
7.   el: '#app',
   2 I+ j. u4 S& K# o! q
8.   data: {
   3 t6 R. o/ I1 v, }
9.     message: '<h1>菜鸟教程</h1>'
   0 B$ @- o/ ^+ a! B% _7 ^3 _
10.   }
    5 [6 S* F( c  Q# y- Q. w9 F% o
11. })
    . K2 l1 l- K/ Q3 D! x) G7 M
12. </script>

复制代码

属性

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

1. <div id="app">
   
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   ; G( C- w+ `3 J' o! Y! [' q! n
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   6 V0 M& n$ U5 `% e* p
5.     directiva v-bind:class
   $ N- O" ~" g, B' P  c* ~# b
6.   </div>
   " w" g& P  F1 P2 M3 Q6 U4 a
7. </div>
   
8.    
   
9. <script>
   ; }) L( X' I6 k" j& g
10. new Vue({
    
11.     el: '#app',
    ) J# t1 J% F5 r/ s# E
12.   data:{
    0 ~/ {1 X/ X' Y0 L( [
13.       class1: false
    & ]# b7 ]9 d8 R$ d, y% w
14.   }
    , m, R  N- l" ^3 u7 B9 j& @
15. });
    - p3 K6 _' {- v% z) O
16. </script>

复制代码

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

1. <div id="app">
   & v/ ~1 c  g$ R- x
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   3 P/ L) q! V( r' @% O
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   " _5 n% E' J$ E$ E- G# Q, {3 O% o
7.    
   
8. <script>
   7 X% j7 B. y$ {, f
9. new Vue({
   & ?' i% j% }6 o4 ?7 W& u
10.   el: '#app',
    
11.   data: {
    - R3 s0 J6 i* C5 \3 e
12.     ok: true,
    
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    - U: Q* d, y" m# |
16. })
    
17. </script>

复制代码

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   ( W6 o8 a+ \6 I; l/ W4 q  }
3. </div>
   ' [: H# J% ]" b6 @- E  ~7 p
4.    
   
5. <script>
   7 R/ K9 g7 M5 x' y' f* f
6. new Vue({
   , b" }% a# `1 I7 ~+ X. u
7.   el: '#app',
   
8.   data: {
   7 L* v+ F* U7 L3 C/ I
9.     seen: true
   / G1 E. @9 Y. N
10.   }
    + L. G4 k. k5 i5 s7 n# B
11. })
    
12. </script>

复制代码

( J8 a$ p8 h: l) M# r

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

1. <div id="app">
     `! H+ b& }2 R" x
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   - ]2 `* f% r9 J& H2 l9 v
4.    
   
5. <script>
   
6. new Vue({
   0 O8 o! @7 R- m9 Q( C! g( j
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    , Q% C- C1 U- @; B& ]. i' W: I
12. </script>

复制代码

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

1. <a v-on:click="doSomething">

复制代码

8 B' K% ^+ g9 x& ]6 O3 Y0 x6 j

1. <div id="app">
   - [7 W  S2 u; b9 n- u
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   ' A4 }+ @7 B/ R. e
3. 
   7 s& p, a% t' `. t6 l1 N) \
4. </div>
   : D! B1 S8 j; d8 S  `
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   7 [( ~" U" }5 G9 q" x8 q+ s
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    
13. 
    
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    / w/ A" r6 S; a5 Y% R: u
17.   data: {
      L6 e% h% a( H6 E) y
18.     url: 'http://www.cncml.com'
    - K" H! J! L- X+ M8 y9 l
19.   }
    
20. })
    
21. new Vue({
    3 ?0 V1 f: g7 B$ C  X  q7 n2 z
22.   el: '#app2',
    3 h2 U" d6 z) }: }: e& g
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    * l& ?$ Y, V; g9 R3 F
26.      {a:'cc'}
    " m! s0 A9 R# @, j# f0 ]3 h
27.     ]
    
28.   },
    % `, j4 H; w+ S/ ^, V/ J
29.    methods:{
    
30.     tap : function(){
    " v  e/ M" W5 D( J; @
31.      this.arr.unshift({a:'new'})
    # h# d( M5 m4 g
32.     }
    
33.    }
    
34. })
    
35. </script>

复制代码

& C; F, S6 t1 a3 ^2 a1 n

) y' I) g# [# ~5 S. t6 h9 n

在这里参数是监听的事件名。