Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   % s3 H& F8 e: V3 _4 Z7 U
3. </div>

复制代码

Html

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

1. <div id="app">
   ) b: l* ^$ [7 ^0 `) v
2.     <div v-html="message"></div>
   8 P0 ~9 C1 R% ?! X! p4 Z
3. </div>
   
4.    
     g/ F/ K2 S9 D& p! \
5. <script>
   
6. new Vue({
   & n0 e1 }. A9 n" t8 J
7.   el: '#app',
   
8.   data: {
   $ a2 I3 Y8 O, w6 C) r
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    
12. </script>

复制代码

属性

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

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

1. <div id="app">
   - x* T, N) E0 Q5 `
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   / m2 K! s; z7 `+ |5 t; h% }5 y. R; w
3.   <br><br>
   6 W2 g. R2 z& Y4 k* u6 k7 @) w
4.   <div v-bind:class="{'class1': class1}">
   8 m% D3 }5 |; ~. S+ X
5.     directiva v-bind:class
   9 `3 `. X& j: r6 t+ g  d5 y
6.   </div>
   
7. </div>
   : S& f! g2 X. ?- r" q  O
8.    
   
9. <script>
   
10. new Vue({
    5 _+ _% J4 V, r# [5 ?; B4 ^0 ?
11.     el: '#app',
    $ L5 z+ K, Y4 W6 d9 T
12.   data:{
    
13.       class1: false
    
14.   }
    
15. });
    1 X! u. B, [* W" A: g
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   * m" Q. C. l, s* w
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   ! f% B: `  F+ P- u& D$ e# I9 R
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   % s# e: f6 y& |; t! C, ~+ J& {
7.    
   % G  d' I! D5 ^+ i% f' F
8. <script>
   
9. new Vue({
   ! C1 y1 S0 s+ s3 a
10.   el: '#app',
    
11.   data: {
    , R6 n1 Y4 C  D
12.     ok: true,
    ; z6 s8 Q- _7 M1 U7 m2 r
13.     message: 'RUNOOB',
    + e4 Q4 @" d4 e# J. g( r4 m
14.     id : 1
    
15.   }
    
16. })
    , u/ Y3 H8 D" w$ Z7 f4 g& _
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   % m( K: p4 P. B& a
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   + [% B1 U/ D0 Y4 {
10.   }
    . r+ I, @8 }8 _( h" d9 C
11. })
    
12. </script>

复制代码

1 y  k0 G" r, F) c& O/ ]1 `6 z

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

参数

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

1. <div id="app">
   & J9 w1 K/ N: b
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   6 t9 }0 k  |1 |! y% z( Q+ L0 T
3. </div>
   2 Z4 s  [) h; W5 n
4.    
   3 F: m8 d+ R. a9 i% }/ p, v+ m
5. <script>
   
6. new Vue({
   # ]- \: v3 P7 N6 q9 E9 T
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   - T' m1 e- [" a' x
10.   }
    
11. })
    5 b( W$ B1 ~' U) t" K4 p& ?) ]" M
12. </script>

复制代码

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

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

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

复制代码

3 B1 X9 q- S3 r  Z& u

1. <div id="app">
   1 e! S3 Q- I& E) U. T, f  u/ z* Q
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   1 t: y( h( p! D0 f
4. </div>
   
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   - ]' C' I  Y. M# ~) V2 P
8.     {{val.a}}
   4 _% ~" W/ D* k, E% `3 k( r
9.    </p>
   : _9 ~, D2 z3 _! ?
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    ( K5 N' J* \6 k6 j% I- H, m
12. 
    0 k5 ^+ H5 p1 E
13. 
    
14. <script>
    # J( x7 c. P4 p  w4 p5 p5 G
15. new Vue({
    * r8 c+ ~9 t, e0 z
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    + ^* C3 k' \' Q4 V* k& ?% k
20. })
    
21. new Vue({
    
22.   el: '#app2',
    9 A# w9 l, k4 S: Q
23.   data: {
    
24.     arr:[
    & F7 _; C1 G' t( Y
25.      {a:'bb'},
    4 E' ~- }+ o& \
26.      {a:'cc'}
    
27.     ]
    
28.   },
    ) }0 G2 @, v4 h' ~3 ~$ k
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    + E0 ?6 p  p1 a( f
33.    }
    7 J1 L; E' C! f7 l
34. })
    
35. </script>

复制代码

" A/ q2 x* P" E) X- v: [' f

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