Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   ) L- H1 M# n5 A# i& P
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   
3. </div>
   
4.    
     b; b9 ~8 H' f4 F" C- a
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   4 A3 h0 C( K& s2 v9 h( `
10.   }
    
11. })
    " \  z' J- x$ V9 j
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">
   ( P3 `% B' o# q6 I0 y0 q
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   - A& g2 U) A7 ^" n
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   1 t+ |8 x4 n3 ~; g5 v6 p4 }
10. new Vue({
    $ i* b% p+ ]6 O7 }
11.     el: '#app',
    ' ^- u4 V) j- W! z  y" q4 C. }
12.   data:{
    $ N4 H) Z) `! [) z0 \' X
13.       class1: false
    : _, C4 b8 o0 H9 r) P1 O
14.   }
    ) i- \  y+ L9 |, O3 N' V% t
15. });
    ) T# B  j. @4 ]) s
16. </script>

复制代码

表达式

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

1. <div id="app">
   6 S, G& k! }0 _/ e9 w/ n- e
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   6 d# q# L# ?  q: G# E  R
7.    
   
8. <script>
   * s3 D6 W. g% ~3 ]# f
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    
13.     message: 'RUNOOB',
      q1 G; ]5 K  J% T% z! F% b$ s
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   , b+ O. o  J7 M. C7 B
3. </div>
   
4.    
   # _! p6 w4 F7 Q, M$ V; t/ X7 R+ @
5. <script>
   & o4 V- ^: R3 A5 S' ~+ B# _
6. new Vue({
   
7.   el: '#app',
   % N, ?- Y! M6 C* b- L/ ]9 C2 b
8.   data: {
   * Y9 G4 I/ N+ X' C, D
9.     seen: true
   4 i3 e3 T6 M: ?
10.   }
    
11. })
    
12. </script>

复制代码

% q# i- Z5 p5 P% M2 t

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   / d. ]7 c1 ~- }3 x6 {% I
3. </div>
   
4.    
   4 r4 h6 @! s" z
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   + K) ]0 L3 u  K1 A% g$ C
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   ; J: D$ [* ]6 f$ J1 K2 {. H7 ^
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   - O4 z$ S6 E# c% |
4. </div>
   . v& `$ u9 X) q5 X
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   ( ]; O$ n) D" f' t
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    + C4 x+ v" }: i
13. 
    4 u2 ^* ?: s# u5 [9 `
14. <script>
    , ]8 z" S! [" t! g+ b( q
15. new Vue({
    
16.   el: '#app',
    ! x: k: p) D* P. ~" S
17.   data: {
    
18.     url: 'http://www.cncml.com'
    ; i/ f0 @& {1 a/ y. J4 z7 D
19.   }
    
20. })
    
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    & x  J  p' [6 t3 ?# Q5 U3 i
24.     arr:[
    
25.      {a:'bb'},
    ! A& F. o, Q- o4 Y& C6 }( E( |
26.      {a:'cc'}
    8 @% i0 w  b* z
27.     ]
    ) s! H) Y7 U6 O* N1 B; d
28.   },
    . E( M! r9 l% N3 k2 D/ Y- k( d
29.    methods:{
    % b. O3 @( q; G  q/ g+ \6 S# Q0 z- {: e
30.     tap : function(){
    - \5 e1 |5 S+ s+ c+ V
31.      this.arr.unshift({a:'new'})
    , ]6 q5 E4 k# M6 h
32.     }
    
33.    }
    
34. })
    
35. </script>

复制代码

' a8 D$ j- C8 @6 r, \7 i

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

+ T/ P  Q% b0 e2 e; b