Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   ! G/ Y' n& C, f# u1 S* ~
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   1 r8 b/ ^3 C* V' u6 [' _, {& J& z
2.     <div v-html="message"></div>
   
3. </div>
   
4.    
   
5. <script>
   6 y4 N) T, R+ Y
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   7 Z0 g! m/ K, @
10.   }
    
11. })
    / e0 K1 O2 ~; ]/ {; d6 w
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}">
   
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   ! l0 u5 |% s# B- o2 X
8.    
   
9. <script>
   : n+ u0 ]. c1 x# A* W+ }
10. new Vue({
    
11.     el: '#app',
    * a' u' y4 l$ p' w
12.   data:{
    - ^9 E$ U+ S2 g" Q. a( q: U
13.       class1: false
    
14.   }
    
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   % F) m* @4 |& Y# H+ G6 _
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   / f$ Y* h$ _5 e3 [0 w. u- g
7.    
   
8. <script>
   ! s+ H# o& C, Y, ?# C* V! ]
9. new Vue({
   ! x4 L7 H6 x" d* Y# L! c* y& q
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    ! W- C2 v& L: P) _3 N9 T7 P6 t. w
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   6 @3 W& x# A1 Q
3. </div>
   
4.    
   , w" L0 x# X  Q/ O. O( _1 e
5. <script>
   
6. new Vue({
   4 s; N# H9 S3 R
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   ; {/ ?1 D& G( ], M' x
10.   }
    / a* E4 p0 b( c6 M0 C% L/ R2 X
11. })
    ! W7 o( @$ g7 ~0 ~9 P
12. </script>

复制代码

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   1 Q" g  l+ U- f9 F6 k% p
3. </div>
   2 _! ]. P1 \. V& R4 d
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   2 ]" e9 ~- a# T. ]; ^/ {  c* I
10.   }
    ' R% M% P; Y, Y
11. })
    
12. </script>

复制代码

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

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

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

复制代码

; q6 i8 Y& v* u" ]8 ]% H4 q) j8 c

1. <div id="app">
   4 D6 o. c+ F( |4 G% g- W
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   7 y( S1 D8 Q! K
4. </div>
   
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   / p2 f. ~, v6 G' K) X; c4 B( q
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    ! `. I8 @/ ?# Z/ R0 l2 y5 h
11. </div>
    2 `0 n$ b7 v  I# |4 d) [2 U
12. 
    ) W! B& W# d! J' r% w: H5 F
13. 
    
14. <script>
    
15. new Vue({
    ( k! _8 C; h8 u% ]/ V0 `
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    / ~3 l0 L; K  H- p9 d
19.   }
    
20. })
    , P/ `% a* x, J7 R, s' q
21. new Vue({
    
22.   el: '#app2',
    ' S0 E. D4 G( u7 L0 T3 K0 Q
23.   data: {
    
24.     arr:[
    + S% \6 S" ]9 u
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    ' C: w' T% ^3 c8 O: t) K& b, |" h9 V
28.   },
    / b- q3 k3 T; e" d2 G# j! w- [8 a
29.    methods:{
    % D% \8 b- [& E4 E, x5 b2 t6 T  V
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    
33.    }
    - f" k; K  x0 X7 o* M7 ?* C: W: j
34. })
      W( Y- z2 L) T5 K; {& ]
35. </script>

复制代码

7 ]+ I7 ~0 ~: h( z3 {9 E

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