Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   : }  Q# g8 l: O. ^- ^) K
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   2 l0 A6 A$ Q: h6 m4 d
2.     <div v-html="message"></div>
   # P5 o5 m& T5 D, X$ X, v
3. </div>
   # V+ c6 l3 o" u4 V' o
4.    
   ( Z& e" c3 O  @8 V
5. <script>
   * {. {# C& y" a) C1 F* u/ i+ n. P
6. new Vue({
   & Y7 R( t  T' m
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   * b- w: X3 N  h
10.   }
    
11. })
    * Z1 O8 l# u7 O) h7 T; d
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">
   ! a/ Z1 b, n. m" ~& @1 n
3.   <br><br>
   6 e3 z% I- F6 E3 Y7 s1 Q9 N' t
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   5 ^- l! @0 E9 D, Y$ o+ x' N' v
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    * ?+ M3 d3 b, K& Q) {7 c
12.   data:{
    
13.       class1: false
    7 t- {- a# i6 D% i0 |
14.   }
    4 x/ W) o9 k6 \4 `7 b
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
     p$ Y: l, ^, V0 i$ |- x
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   4 O$ S3 h% j4 A) t1 P; `# L
6. </div>
     y- @% j" P/ Y% k, m
7.    
   7 n- Z3 S$ ]' a1 a
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    3 p) o3 R5 C, t1 f
11.   data: {
    
12.     ok: true,
    : v: ^0 d0 a: M( @! S
13.     message: 'RUNOOB',
    
14.     id : 1
    % O7 V  I' Q% n7 I4 p+ Y" F4 C! ~
15.   }
    $ `/ Q2 Y- j; r! r  n, P& u
16. })
    & C* R3 i+ N! {
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   3 |6 q  x$ n7 C2 h' q! G( y9 H
3. </div>
   ' N, c, z5 B* V) a1 w/ h# X0 A
4.    
   
5. <script>
   - |1 f5 @& }2 |; \. u; k
6. new Vue({
   4 T- G$ F- u; K" H5 q& H
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   % T( H0 U0 f; K. I) l! ~
10.   }
    
11. })
    ( D6 c0 B/ T; P5 {! u: @+ M
12. </script>

复制代码

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   - W( Z, X+ V$ S9 I- P: U& e
3. </div>
   
4.    
   8 S& B& k. V6 }: v8 }' g
5. <script>
   8 u4 Q3 a6 h* E1 d+ `/ R7 I, _
6. new Vue({
   
7.   el: '#app',
   * O! }4 `1 ^+ ~3 n; T6 E
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    , m; G+ K2 E2 @; L/ l- V5 W$ a
11. })
    
12. </script>

复制代码

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

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

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

复制代码

' d# a1 v! ]7 V" t

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   
4. </div>
     T; F4 M' O4 A+ i8 Y
5. 
   9 O, @" y" E) z6 D  ?
6. <div id="app2">
   
7.    <p v-for="val in arr">
   " P8 H6 a; N# z, e# h8 c! ]6 ~
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    
13. 
    0 t: e. I' ?5 E
14. <script>
    3 N* Q4 _2 c( {1 L' Z, k
15. new Vue({
    . D, O) U! f# S) Q
16.   el: '#app',
    
17.   data: {
    2 V( u6 t5 t6 @% P
18.     url: 'http://www.cncml.com'
    % j0 O2 |. y" k3 E  @$ Z- i
19.   }
    + g4 J( x$ g* X: {8 A' {) M
20. })
    + e2 ~' Q1 d: `- D9 {% V
21. new Vue({
    3 U- M1 o, x. F) T# t: V: m; W
22.   el: '#app2',
    9 s5 J6 J6 b( @. O8 U6 K+ v4 x4 Z
23.   data: {
    
24.     arr:[
    & ^$ s" j# B5 D5 \* v  r$ s
25.      {a:'bb'},
    
26.      {a:'cc'}
    # P' }3 `. ~* X4 z8 y( |
27.     ]
    
28.   },
    
29.    methods:{
    ( O- p- y+ Z6 R3 `2 s
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    8 O3 s2 M  ?; y% L
32.     }
    
33.    }
    
34. })
    
35. </script>

复制代码

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