Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   5 A( q! i: e% K; x) \( y! ?
3. </div>

复制代码

Html

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

1. <div id="app">
   - q1 p7 @) {- ]6 b" Q) T
2.     <div v-html="message"></div>
   9 l+ z+ I) ]& M0 n6 |
3. </div>
   
4.    
   
5. <script>
   : ~# q1 N6 W: Y1 F6 ]$ @3 @" x, A
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   ' v: u, N, b8 a* @# J* f
10.   }
    5 f# w; l8 b* Y  @
11. })
    ( J* ^0 J. j  ^& ~* ~  P
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">
   ' ?$ V6 D" k& ?/ o
3.   <br><br>
   . D3 p& c5 U/ v- d$ @
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   4 r! z" g: e0 D) I% D: |
6.   </div>
   . n. H' A: ]- b3 X- Y5 V. h5 l. Q. t
7. </div>
   7 o9 Y# ^7 ?. X
8.    
   # X; w0 `! X% K
9. <script>
   
10. new Vue({
      `) G3 O+ X% h$ [/ r; l/ j; R
11.     el: '#app',
    
12.   data:{
    8 d; C- E  D: F1 f
13.       class1: false
    
14.   }
    
15. });
    * I! E0 d# `& E% C+ p+ T
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   # K' y& s8 t, u* {/ S5 n
3.     {{ ok ? 'YES' : 'NO' }}<br>
   - v6 B" Q5 l8 H
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   3 L" K. a; L' y4 O% A$ R
7.    
     r  C! ~, [2 Y# `, G% ^3 Z4 ?
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    ( v, L# b3 l' s$ e$ j1 o- P- x9 T
12.     ok: true,
    ; k( c: W5 ^+ Y5 A+ G2 b
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    . o  L- K" r8 I' ?7 `
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   8 w% c  Z! n2 ^* i
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   - |; @8 {$ ^% [# I9 p
8.   data: {
   ! m2 O, {! F) Q" h6 V
9.     seen: true
   : Q* @) {) p0 W2 ]
10.   }
    
11. })
    9 E1 `. a% G! J  Q4 }! B0 U* g% B. W
12. </script>

复制代码

& E4 A2 a/ Z3 n. k2 ^

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   6 Q% ^, \. V8 J. ?4 p! N" t
3. </div>
   . @3 A+ c2 {7 \! D8 R
4.    
   + P+ j5 K, P7 k; l
5. <script>
   4 v# n: M( s1 K# i0 B
6. new Vue({
   5 P3 j. H& o& `/ C% o: G
7.   el: '#app',
   , `& |1 I" ^, B* X( p
8.   data: {
   4 E' l, E; z# x) |
9.     url: 'http://www.runoob.com'
   
10.   }
    3 K, S7 c0 g; y0 n5 y3 u
11. })
    # h. w+ ~& w* n) W2 J/ X, }  t
12. </script>

复制代码

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

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

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

复制代码

. t/ k% ]3 b+ S% }1 A

1. <div id="app">
   , W8 N& ]* J# C* M# q
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   
4. </div>
   
5. 
   
6. <div id="app2">
   3 ~+ T( F' Y# z4 c
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   7 ]6 Y2 o% O) |
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    0 ~, W# G% q0 m6 X% `; r3 D
13. 
    9 ]# Y3 ~' ^/ Y! R- H) r% X' n+ m  Z9 V
14. <script>
    
15. new Vue({
      O2 V3 [7 K0 X8 o
16.   el: '#app',
    - N. d0 b3 ^+ J' S" i  u8 j3 M
17.   data: {
    
18.     url: 'http://www.cncml.com'
    * A$ N! O: {; ?
19.   }
    9 E- P- v  s( u" Q/ O6 c' j
20. })
    4 E; [! k  q) D5 x$ `
21. new Vue({
    
22.   el: '#app2',
    9 c4 a' I/ n6 m  z5 X$ ^
23.   data: {
    # G) w* \# {$ E4 |5 o% G: N
24.     arr:[
    & _( S* P6 R( X) v: r
25.      {a:'bb'},
    4 J, O: W/ r7 K$ P
26.      {a:'cc'}
    
27.     ]
    
28.   },
    " t! d7 j- G" p/ k. E7 F
29.    methods:{
    ; y' _) O- T+ Z4 J
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    
33.    }
    " X9 w$ o; h! D" y) q7 }' r; ?
34. })
    2 C, }; q: g, O- G
35. </script>

复制代码

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

6 D% u' H) H2 o) v' g9 P