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">
   ( 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.    
   
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',
   
8.   data: {
   5 v/ ?4 @. h2 h- H; Q
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    * ?. j8 e/ K1 \2 M: v
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>
   ; 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>
   
7. </div>
   9 M( Z. ?. J- q: h- |
8.    
   
9. <script>
   / ~( I* ?' U. U0 S
10. new Vue({
    0 f/ Z9 S3 e0 n( R! d
11.     el: '#app',
    
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. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   6 [3 P; p7 N, B( B! v& w$ H
7.    
   # c( ~1 X8 c( e9 d4 F
8. <script>
   
9. new Vue({
   0 F' _0 T, e1 l6 n8 R0 l4 B
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    
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>
   
3. </div>
   
4.    
   / c7 a9 k; H4 A, G& p( _, C7 Q9 Z
5. <script>
   
6. new Vue({
   9 j- ~% f  w! m) ^
7.   el: '#app',
   
8.   data: {
   ! k# u2 Z4 P1 S1 f; D) b/ f3 t& [
9.     seen: true
   
10.   }
    
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">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   ! i) X& |  f3 ?& B
4.    
   4 K9 q+ e, B* z4 m5 I( @
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   " ?1 {: Q7 y8 u
10.   }
    
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">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
     y9 K* j/ K- i0 @' l
4. </div>
   
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
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>
    
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    
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: {
    
24.     arr:[
    % k( A9 l+ [4 }6 s5 a, W
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    ' t3 {1 C0 q% y- @! ^' Z
28.   },
    
29.    methods:{
    
30.     tap : function(){
    : c- _' k' `  c
31.      this.arr.unshift({a:'new'})
    6 C! T5 U. f  L9 w4 V
32.     }
    
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( |

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