Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   % r5 D7 `  O% _' i$ [  Q# e
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   
3. </div>
   2 J- N0 l; V. k$ p. A/ {9 ]
4.    
   $ w% v6 |/ U) R* \- `: R
5. <script>
   
6. new Vue({
   0 M( q# I7 W, P
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   ; S! |5 l3 P* ?/ E
10.   }
    * [1 k* e$ S* M# t0 a  u
11. })
    . x. @* V0 [% `
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>
   + E* t8 U  u9 ^9 n& K3 I
4.   <div v-bind:class="{'class1': class1}">
   0 `' L  h  ~' ^& d( S2 w* p
5.     directiva v-bind:class
   
6.   </div>
   / Y+ E( h: W1 I7 Z
7. </div>
   
8.    
   
9. <script>
   $ C& j0 v+ Y7 Y: p
10. new Vue({
    . U& c0 V& q6 [/ S
11.     el: '#app',
    ; L+ i" r5 H8 I# X
12.   data:{
    
13.       class1: false
    
14.   }
    
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   ; |  d: ]- P5 E( u! Z  n
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   8 V0 E% C( S) G- d
6. </div>
   3 u( p0 M( I0 E1 M, P; \0 A
7.    
   ; s! x' W/ Y; R# T
8. <script>
   
9. new Vue({
   5 j/ \' d. U) q0 ~* j1 b
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    ! P$ a0 F5 N9 k3 L# T
13.     message: 'RUNOOB',
    / a. D; G3 C* N, K: P
14.     id : 1
    ' N+ A$ F; Q, K1 i) n
15.   }
    9 R) |5 n* j, O; j
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   & O% S1 J6 A0 a, g' y
2.     <p v-if="seen">现在你看到我了</p>
   1 h+ J4 x% ^9 T9 W
3. </div>
   
4.    
   * `0 p+ G  W3 ^
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   ! b; x5 v  ~3 x; q; m1 l
9.     seen: true
   0 |( Z8 q% q' I4 G! i: c# z' e) J3 O
10.   }
    
11. })
    9 c" J* \3 [% Q$ M2 s
12. </script>

复制代码

, w0 e2 N7 D. ?6 |, `

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

参数

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

1. <div id="app">
   ( i6 C4 f7 e' j' Q/ `6 V
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   
4.    
   
5. <script>
   - F; n' _) S' P9 p7 V% k  [+ ~* Y2 C
6. new Vue({
   " O! R# y9 h) X. R0 {: ~/ g/ O
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   7 a* L# S! H+ H& A7 ]8 t
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   9 C$ U% t! j/ B$ o
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   9 C6 X: |' l4 F) U, c5 \
4. </div>
   . [1 [7 F5 N+ L. n
5. 
   / s8 v$ [3 Z3 f( L8 ?
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   & F4 Q7 b3 d/ w# r
9.    </p>
   . b- [5 }7 C( }4 f3 l$ X& v, D
10.    <a  v-on:click="tap">点我</a>
    ( E( i! U6 Y# e: F5 b: ?3 P: n
11. </div>
    
12. 
    
13. 
    1 O4 L9 B  l: C; }* t$ w
14. <script>
    & l3 [2 ]; A0 j! j" L
15. new Vue({
    
16.   el: '#app',
    % s3 j6 F# v7 `+ T9 J# Q
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    
21. new Vue({
    9 j) v$ ^9 B0 p0 G
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    0 a  Z2 B, H3 o* v
25.      {a:'bb'},
    2 a! D: z# E5 O2 K. d
26.      {a:'cc'}
    * B# _" E$ C0 |! n% l0 K1 y
27.     ]
    
28.   },
    
29.    methods:{
    8 x- s9 q8 Z: H- {3 ?2 e& V* F
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    2 M6 M0 m. i3 T+ C
33.    }
    
34. })
    
35. </script>

复制代码

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

- ^7 J# K8 V  T3 K' a