Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   1 x& ^8 X+ N2 b7 X% S5 ?8 Y  K7 R
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   ! B9 P7 Y- Z& s! w
2.     <div v-html="message"></div>
   
3. </div>
   
4.    
   
5. <script>
   ; ^0 B' `/ ]8 O1 |
6. new Vue({
   + G0 J. I$ S6 _  P
7.   el: '#app',
   
8.   data: {
   8 o. r# m6 Z$ O  D  H* y; s
9.     message: '<h1>菜鸟教程</h1>'
   : _+ F: L  n4 V& Y; W9 n5 F
10.   }
    
11. })
    . L' c* d6 M+ o
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">
   
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   & u$ e9 X: U6 l8 I9 Z
5.     directiva v-bind:class
   
6.   </div>
   7 `: G( q- ?! i$ M
7. </div>
   6 ^; T) _/ p, m4 I2 \' h
8.    
   " K) g9 i0 {6 f* G- b
9. <script>
   * h) c+ s/ y. s# b0 f7 N& P: |
10. new Vue({
    
11.     el: '#app',
    - n. o% O9 q9 Z+ J1 C
12.   data:{
    
13.       class1: false
    9 {/ \" n# T& O4 f8 B* f3 X" i
14.   }
    2 k  m! B) D4 I6 r9 j8 m& Z
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   ' u6 X0 L8 I6 B9 g2 @
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   1 z$ a0 [" o% q6 C' G
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   - Z* r3 M7 b( |. ^5 l! ?7 T
6. </div>
   
7.    
   1 z5 C$ m4 V4 p5 ^* A
8. <script>
   
9. new Vue({
   ' M9 M* h5 l. z% b( W
10.   el: '#app',
    
11.   data: {
    4 v, H% F+ x/ X
12.     ok: true,
    
13.     message: 'RUNOOB',
    9 `- G( E2 ^6 Q% d" W5 `& X2 i
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   ' `$ ]  p' {9 _: a! n3 h# r% T' L
3. </div>
     J: X, b1 j% P
4.    
   + x% D$ }5 y7 k9 y& ^  e
5. <script>
   6 _9 ?) ?) i' b5 Y& z! J) c
6. new Vue({
   9 ^2 [7 B9 D+ R0 k  Z7 ?9 ?' w
7.   el: '#app',
   
8.   data: {
   " I) n2 u: R0 `
9.     seen: true
   
10.   }
    
11. })
    ' e2 P' x& w" P& D
12. </script>

复制代码

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

参数

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

1. <div id="app">
   - M4 n$ q. O( `. D% A
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   9 ]  M$ Z5 `5 l
3. </div>
   
4.    
   % M- y$ d& F# C* G4 ?' `
5. <script>
   
6. new Vue({
   6 u4 p) X4 F& f! W
7.   el: '#app',
   3 p! [  w% R6 _) [. u
8.   data: {
   ! W+ R' c# o3 u8 b% C! Q+ v% P9 d9 N
9.     url: 'http://www.runoob.com'
   0 M# C6 _, [3 [" ~5 V  ^
10.   }
    
11. })
    * z- W6 g( g- h1 U
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   0 N( S! `, X+ z! T9 d8 H( f
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   1 S" G# M' A+ C7 z: z4 w2 A
4. </div>
   
5. 
   5 Z2 `! g' o' I7 E
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   ) p9 t" e' m' [
10.    <a  v-on:click="tap">点我</a>
    ; r  g- H: @  @/ U: u- f
11. </div>
    & n% j( M/ u! x8 I5 L
12. 
    9 `1 L4 M. A% O4 V1 I% }9 S* O4 Z
13. 
    ) W% i! W' J; b
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    ) D9 z* n7 s" ^  x& G
17.   data: {
    ' `; |, D+ [7 g9 p7 e
18.     url: 'http://www.cncml.com'
    
19.   }
    ) @4 W2 ?' ]9 [
20. })
    . c- H2 e3 _4 a* ~, D. U! t+ G
21. new Vue({
    % G$ S- a) _4 _- X/ c  z
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    0 p8 _2 S* U2 C) y1 e4 v7 E- W
25.      {a:'bb'},
    7 X8 M. Q; ?1 i. Q% I* E
26.      {a:'cc'}
    , j* L. e3 t1 Q5 b, ^% [2 L
27.     ]
    $ }9 r$ K4 p2 @: l& h/ [0 z; c
28.   },
    
29.    methods:{
    
30.     tap : function(){
    $ ^3 g* K/ m  ?& a3 f
31.      this.arr.unshift({a:'new'})
    
32.     }
    
33.    }
    6 u( e: b8 d- I; |* t! f8 [* n& `
34. })
    0 _" K  a+ s2 O% o, z! Q4 q
35. </script>

复制代码

9 i1 f/ Q, c9 \) s6 x

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