Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   % M' D( T* ^7 y+ o
2.     <div v-html="message"></div>
   9 K) Y; a- u/ i# z5 ?' [8 k0 S
3. </div>
   
4.    
   ( Y" E* e2 x$ W) O
5. <script>
   
6. new Vue({
   + q, y7 a7 M: h6 k2 V
7.   el: '#app',
   * B( \7 b' q: O: |4 m: t1 g
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    4 H2 D  {4 x: Q4 {% 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">
   
3.   <br><br>
   9 d) Q* F, S0 T9 g- S. S% `) l
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   0 T! J: r# \! A9 |
6.   </div>
   
7. </div>
     ^+ N! ~7 J" d7 f; S& {1 _
8.    
   
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    2 ]1 ?% g* j! k1 m$ T7 \0 S
12.   data:{
    
13.       class1: false
    
14.   }
    
15. });
      j! t% p: r1 V% q
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
     `( G' r  }/ o  E; ?6 d( k$ f8 Q
6. </div>
   
7.    
   % R0 l8 |1 @& X& w/ ?) y
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    ; \) X, [, y! g3 r; C/ D6 ]
12.     ok: true,
    2 ~2 u" D6 _- c4 ]
13.     message: 'RUNOOB',
    & c2 |- P/ i0 ]% ?. ~" R
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   3 g% T8 p% f, n/ t" W% o9 f: d9 }- q
2.     <p v-if="seen">现在你看到我了</p>
   7 Y2 v5 I1 a1 o' J5 F, ]; M: R
3. </div>
   " A9 p; Q! ]! W7 r. K0 v* \
4.    
   
5. <script>
   , F9 W4 ~5 Z% a$ M/ C- B( X" g9 s
6. new Vue({
   / ~3 `5 e; V0 N" E& A. u
7.   el: '#app',
   
8.   data: {
   # D: f. O: K# J
9.     seen: true
   0 H% G" L; B7 k  Q0 f" _' C! q
10.   }
    
11. })
    ; H/ U+ Z5 _+ `/ G: }- Y- b. `
12. </script>

复制代码

; Y5 J" v4 ?7 x( ]- s" x

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   . m1 P, U4 p, j; T2 ]
3. </div>
   . ?+ y7 f1 [" Q/ f: W
4.    
   
5. <script>
   % x  u+ `, q+ Y
6. new Vue({
   5 J0 }! w: I+ m0 e1 c# t
7.   el: '#app',
   
8.   data: {
   ' @* }1 `  V: a5 X* m- \
9.     url: 'http://www.runoob.com'
   
10.   }
    ' {! Y- d4 J. I1 z# z5 w( \
11. })
    
12. </script>

复制代码

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

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

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

复制代码

. n' c8 V& m% ~

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   & Q9 ?! J& \; g$ j# l7 B5 G
4. </div>
   
5. 
   / F) ^% U+ Q, a# u! o0 L
6. <div id="app2">
   7 |. v$ G- Y* B
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    " U7 y4 a5 b3 J0 k
11. </div>
    * c8 ]2 l( f- ?
12. 
    + A( ~# D* V1 t7 z! o( d
13. 
    " a% `  A# G( @; ~
14. <script>
    3 R. n  C% t9 O# A9 P/ s
15. new Vue({
    3 [# {8 H- ]# }4 g
16.   el: '#app',
    ! W$ ~5 {6 X3 n7 |" `0 \9 q
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    3 e) f- a$ W: A0 ?  x$ Z% t
20. })
    
21. new Vue({
    9 I0 x. k" V2 ]9 L
22.   el: '#app2',
    
23.   data: {
    $ |6 t5 f/ R1 P! I3 X5 O
24.     arr:[
    
25.      {a:'bb'},
    ( V- t& H3 r/ N+ h
26.      {a:'cc'}
    & H2 g) s" E4 {" _
27.     ]
    ) P* B! ^1 _# Q) z; O. ?1 ]
28.   },
    
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    ; |5 P3 \6 U. B6 }4 `; ~
33.    }
    5 ~) o. s8 e1 C. I4 O0 S
34. })
    
35. </script>

复制代码

! _* v7 L" w/ d: [

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