Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   3 Q% I3 N' |: M0 g6 f! w2 J' k% T, ?
3. </div>

复制代码

Html

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

1. <div id="app">
   - M) N1 |4 F$ J% G
2.     <div v-html="message"></div>
   4 r* s& Y& W4 f! }: S" G! Q
3. </div>
   9 [) z3 t$ q! p( o6 r6 K
4.    
   : R# e  a& f5 S' n+ S
5. <script>
   / K0 i2 Y% W+ v" C
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   9 S  c4 V. b0 F: J: v* K/ ~) `
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    2 X% {! ^3 t9 N$ Q$ L
11. })
    * K' q2 w2 p- t8 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">
   # T/ T, _, l$ ?. }
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   ( O9 t. H6 h  k8 b
5.     directiva v-bind:class
   
6.   </div>
   2 x% o' \. Y0 ^: u+ {6 ?0 \  o0 t" x
7. </div>
   
8.    
   
9. <script>
   
10. new Vue({
    8 ]7 y% \$ s3 _
11.     el: '#app',
    
12.   data:{
    , d. Y4 P  d8 F5 c1 F8 l7 }$ V
13.       class1: false
    % G) E  d9 s3 t% v  H) @8 c/ I$ f
14.   }
    
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   & E4 q& a5 j8 k- r
2.     {{5+5}}<br>
   ( R# d- g2 g& ]$ e% v$ b
3.     {{ ok ? 'YES' : 'NO' }}<br>
   " `  v5 y  ~/ ^3 K5 p. Y  f
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   4 Z- G5 M! z8 P7 E
8. <script>
   / [9 y# f$ H. f$ g, l3 A
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    & o. p! |' q# m5 p5 Z- e5 N2 P& O
13.     message: 'RUNOOB',
    $ X8 n3 A2 g4 c9 }" X
14.     id : 1
    3 D6 {7 B7 `+ W% G: G, z( X# T4 Y: e
15.   }
    
16. })
    - P8 o0 ~) z. r7 C2 j5 S9 B
17. </script>

复制代码

指令

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

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

1. <div id="app">
   , g" e% A% ?1 g, ^3 ]
2.     <p v-if="seen">现在你看到我了</p>
     W! l/ N) T7 G$ \' {) ^/ h
3. </div>
   7 {9 L+ w( Z  w: l
4.    
   % I# B8 ]1 u, J& D
5. <script>
   1 s0 P$ O; U4 _4 }
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   1 w6 x: A: l( {- z5 i, x. Z
9.     seen: true
   
10.   }
    
11. })
    
12. </script>

复制代码

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

参数

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

1. <div id="app">
   * I1 j" M3 A# ^
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   
4.    
     q' h5 ^+ j! _4 ?- q, d" e
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   5 y0 k9 E" y; M' B
8.   data: {
   # T' Z. o$ ~$ L' J2 ~
9.     url: 'http://www.runoob.com'
   
10.   }
    " K$ v( l2 s: K( y9 w7 d% Q3 n$ m
11. })
    9 |0 S6 c" S1 ~, G* H8 p
12. </script>

复制代码

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

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

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

复制代码

0 b5 k, l6 U9 z) u5 U- |

1. <div id="app">
   ' F: a$ a3 Z5 Q6 c( u
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   8 O7 p$ N1 t! }
3. 
   * x( j" a' r$ x. E4 ]# j9 Y
4. </div>
   
5. 
   + t& V- g* e5 g+ [" S0 A8 p
6. <div id="app2">
   
7.    <p v-for="val in arr">
   - v) D* e& P0 z6 F* j7 U
8.     {{val.a}}
   
9.    </p>
   7 g- W# ?" O) ~+ H+ X* I: ]/ j
10.    <a  v-on:click="tap">点我</a>
      m9 C+ i+ ^  y) Q% m9 K
11. </div>
    
12. 
    2 Y  u" [4 U) n. H2 `8 C8 C* _
13. 
    / h5 w; J( O  a# e7 K
14. <script>
    % `2 r, Z7 S, x8 A0 S) Y7 A
15. new Vue({
    . H+ v9 i* {6 H7 f0 _
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    ) K3 ?- m. X; h" v  q- Z
19.   }
    1 Y+ D+ Q& ?% o7 O; g6 W
20. })
    ; y3 U2 M, V* A8 A
21. new Vue({
    / O# M  l% M2 q
22.   el: '#app2',
    & j# }0 p4 W& y
23.   data: {
    & a1 v% {6 c% O
24.     arr:[
    
25.      {a:'bb'},
    5 `- F% u) y2 ~* \
26.      {a:'cc'}
    
27.     ]
    
28.   },
    6 Q1 ?( n+ D. `' E1 [
29.    methods:{
    " |, y8 m6 H* \, `" D; e/ }; K
30.     tap : function(){
    & k: m' s2 v+ u) \3 F( O( _
31.      this.arr.unshift({a:'new'})
    
32.     }
    ) B, f5 k. p, B9 L
33.    }
    # J# F5 n2 r- o) B/ y+ R# r; J- }' j) C
34. })
    
35. </script>

复制代码

7 X; E2 q( ~- c' }" V+ e

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

4 \5 U1 x: ^* @5 J