Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   ) M: W# A  j; c/ w; }$ ]4 [" Z5 n1 X
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
     e- {8 [  v; \$ H  w3 U$ `" Z
2.     <div v-html="message"></div>
   
3. </div>
   
4.    
   , e+ s- D/ g& l5 Z
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   / g4 Q( Y" y+ I. d- t0 K
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    7 ?5 q, }6 Q2 `- z% v0 \
12. </script>

复制代码

属性

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

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

1. <div id="app">
   7 E/ |) w" b' f  l, M' }
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   " T) T: P1 S/ Q8 N; K5 `) b
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   2 S; U9 T- U3 a8 H! N+ F
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   2 b8 ~1 s. ?' ^4 @; @/ V6 `
8.    
   ' H' Y+ y, e8 R4 l0 _1 N) k
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    . r1 I% m8 z; P; L
12.   data:{
    
13.       class1: false
    
14.   }
    8 b8 r3 ~% C, s
15. });
    . X1 _: \& b6 u/ l
16. </script>

复制代码

表达式

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

1. <div id="app">
   / q: ~4 T( ?& v: J
2.     {{5+5}}<br>
   " w6 F: M$ E3 e' B$ s
3.     {{ ok ? 'YES' : 'NO' }}<br>
   8 q: n' r6 q1 ]7 F( O' h* s3 z# s
4.     {{ message.split('').reverse().join('') }}
   # C& e5 L0 R. h. [
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   6 ?1 G; I' [0 O6 P; b/ A( T) j' ~
6. </div>
   
7.    
   * R7 U, C) g" T7 Y; n- v' O$ Q
8. <script>
   
9. new Vue({
   / e8 m0 U& [8 A$ a
10.   el: '#app',
    6 s. m$ k  A/ x* W, b
11.   data: {
    * T  k9 ~, s" \6 k6 n0 V
12.     ok: true,
    4 @6 T8 p: F/ b) Y+ A# o- A
13.     message: 'RUNOOB',
    
14.     id : 1
    ; Z' \- b% T0 {
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   3 M5 {9 m9 d4 t7 [! s" g- E
3. </div>
   2 K# z5 A4 I2 z( w/ ^
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   
10.   }
    
11. })
    6 b8 e4 a# r' i3 T& x4 C  [
12. </script>

复制代码

% Y7 p5 B4 U' ^# M

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

参数

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

1. <div id="app">
   5 n# l9 {1 D3 |  J8 Y1 b
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   / h( \& [0 q* e. X8 `
3. </div>
   
4.    
   ' a2 w) Z  O, Q1 u1 [, g
5. <script>
   / [0 ~7 U; ]. N! }7 N
6. new Vue({
   
7.   el: '#app',
   8 _6 E! u! T5 {1 G) }
8.   data: {
   
9.     url: 'http://www.runoob.com'
   0 p2 A8 x. s5 B9 u) }3 |$ J, D
10.   }
    
11. })
    ; t8 n$ V1 i+ x1 z& m
12. </script>

复制代码

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

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

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

复制代码

" @) G: w& P4 J' c

1. <div id="app">
   ; X; X+ j0 w* l: `+ a9 B: A3 [8 D  Q
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   * W5 Y. n! H  l7 R  z2 x, Z
4. </div>
   1 \8 N) s; H0 ]" N
5. 
   5 @$ O, O" [. _7 S$ F$ z
6. <div id="app2">
   1 {2 ^0 R1 k& i- |6 ^3 V/ y
7.    <p v-for="val in arr">
   + F8 a' f% h* j5 X
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    2 i1 {- v- n( ~# I9 f# @
11. </div>
    
12. 
    / \0 q% x+ v2 s
13. 
    
14. <script>
    
15. new Vue({
    0 T5 d! W5 I% U& \+ t
16.   el: '#app',
    # ]; Y4 {9 t% @+ N5 X/ w
17.   data: {
    8 ^+ b& u1 L& [/ m1 a
18.     url: 'http://www.cncml.com'
    ) ?3 ?, U: b+ }( V3 q; X: V
19.   }
    
20. })
    
21. new Vue({
    
22.   el: '#app2',
    ) j! z* s$ _# b. y; w) A$ N
23.   data: {
    
24.     arr:[
    4 z' H6 {0 f2 A, f& A
25.      {a:'bb'},
    
26.      {a:'cc'}
    $ e5 ~' A3 c$ j+ S% ?* i
27.     ]
    % ^  B/ o( {: G
28.   },
    9 [6 \+ S1 \  p# J& L8 R
29.    methods:{
    . X4 ?5 v/ d3 b4 d) r
30.     tap : function(){
    6 h+ [4 I0 N0 ~
31.      this.arr.unshift({a:'new'})
    
32.     }
    ! Y3 p; Y4 A; G: z2 \" n
33.    }
    & U5 c/ a! a$ V2 V
34. })
    
35. </script>

复制代码

$ K- u. e$ M* l8 }+ n4 ^2 j+ L- b& N

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