Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   * {$ Y7 m- V2 Y
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   
3. </div>
   8 n. C7 P# Y2 N7 }( Y
4.    
   # P, a  o4 [" \# h! s4 \
5. <script>
   4 Z4 i0 k* O$ l" _2 R
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   . `$ M% {- W; g2 b( C% X) n
9.     message: '<h1>菜鸟教程</h1>'
   . K9 M7 |' W0 J- e
10.   }
    
11. })
    0 v# d3 D9 L* j9 Z
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">
   ( U& E& S  q( Y; j1 G" D: o
3.   <br><br>
   , u& e/ e, e$ B4 }. d. _! z
4.   <div v-bind:class="{'class1': class1}">
   7 k# C6 M. a( J$ V- b
5.     directiva v-bind:class
   
6.   </div>
   ( N2 L/ }# Z( o7 H2 r
7. </div>
   
8.    
   
9. <script>
   " C; u# g0 {# e0 }% m. }( L6 M3 n; |
10. new Vue({
    , t) }. M- I, x' a# b" o- v
11.     el: '#app',
    : z" g& b8 S* M& P. p
12.   data:{
    
13.       class1: false
    
14.   }
    7 Z) d3 d8 {% W9 D9 A5 Z! t
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   $ @/ c+ n. g, ?2 ?
3.     {{ ok ? 'YES' : 'NO' }}<br>
   3 ^/ z) N) U7 B
4.     {{ message.split('').reverse().join('') }}
   4 s* |4 T$ H9 a4 V& O( c
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
     j3 {& G( b. g- L( H
7.    
   
8. <script>
   : U4 G: J5 f1 a% J+ E- e$ ~, k
9. new Vue({
   
10.   el: '#app',
    ( O  C& k/ C5 @( A
11.   data: {
    7 ?7 b1 n) h2 K( N  J
12.     ok: true,
    : s* D5 ?+ `2 J$ n0 \4 S& m  I9 U
13.     message: 'RUNOOB',
    7 ?. a2 u  y' q
14.     id : 1
    6 ]1 a) k& Q% z
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   " }' L5 L+ Q% F$ S( v" `
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
     \5 I5 f  h! L6 [; @
4.    
   
5. <script>
   5 X& M- T3 ?5 R8 @! C8 J; g
6. new Vue({
   - |( E; J$ k5 @# x7 C
7.   el: '#app',
     r9 C' |6 i7 u
8.   data: {
   # r, e( [* U) ~! M/ a
9.     seen: true
   
10.   }
    1 X7 F$ O$ k. g
11. })
    
12. </script>

复制代码

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   
4.    
   ) p% |) [5 p2 M) e1 m- v
5. <script>
   ; A+ d3 c/ i) t
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    + S: h: H( m$ d: J4 q! g
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   + z: u* }0 ?5 s1 J+ e& [0 A& c
4. </div>
   
5. 
   7 e: `1 p. S9 C0 s% o
6. <div id="app2">
   6 y2 v0 n" }% [( C0 Y) D
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    * l" |! r1 g: y( u4 d0 e5 V  K& r
11. </div>
    
12. 
    ! M$ G! p. I: _0 s9 S( e( n
13. 
    0 [9 ^3 M7 N& T: ^
14. <script>
    , f8 J( k5 n7 A( S) {  F
15. new Vue({
    : J1 d! x3 E8 {9 n  ]4 B- v) i
16.   el: '#app',
    5 W- X, e3 d: }  z% v7 j
17.   data: {
    : M8 i$ _/ p/ U9 I
18.     url: 'http://www.cncml.com'
    
19.   }
    6 E7 ?' h+ S& S; \0 \& f
20. })
    
21. new Vue({
    
22.   el: '#app2',
    - c2 k: f) o3 |: f. s% y0 k
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    5 H, y5 B: \$ ]+ K% S
26.      {a:'cc'}
    
27.     ]
    0 }' m! T6 \5 ?* x0 W
28.   },
    4 h% ^  l- i! p- @# x( _) L5 T8 x8 \
29.    methods:{
    - t. ]2 U* X8 r2 x: e& S* x) n$ y
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    3 w3 O: {3 v( H& I4 W% f7 m! F( i
33.    }
    
34. })
    # k9 B2 W& @; U% k1 K) @
35. </script>

复制代码

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