Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   , V+ H  }% X. A; F. u; r# S: f2 ?
2.   <p>{{ message }}</p>
   - s  O- R: N# A. F1 x3 S& W
3. </div>

复制代码

Html

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

1. <div id="app">
   9 D, {4 T+ N3 _; x2 y
2.     <div v-html="message"></div>
   
3. </div>
   1 }* ?/ ^3 B" q# \( [9 X
4.    
   : W+ q( `0 x! n4 p0 I
5. <script>
   
6. new Vue({
   3 Q( V. h. O' e9 Y
7.   el: '#app',
   / j0 T! B3 e( K4 o: c. r% S
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
     C8 s: N, s" ^9 J
10.   }
    
11. })
    2 r! u1 C" `$ V! H" F! S  t0 S- c
12. </script>

复制代码

属性

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

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

1. <div id="app">
   # W4 ~& j+ L7 [+ j6 ?9 U& a
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   + Y5 L: m" x$ n- k! {% V
5.     directiva v-bind:class
   ; u3 g/ _: P+ c1 m7 A
6.   </div>
   
7. </div>
   " Z) C  {  L/ p& {$ \$ ]
8.    
   . g( E: x0 F7 d! o6 C3 }$ |5 x& c
9. <script>
   
10. new Vue({
    1 d3 D, e9 B2 K
11.     el: '#app',
    
12.   data:{
    
13.       class1: false
    
14.   }
    3 a  J+ s& D& w  E9 r
15. });
    + `2 E( I6 k- }% f
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   ; F8 c, V$ K* O  Q3 R+ c
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   5 Y2 a- r+ b& r9 W# J( t
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   4 e" C# y$ ?' h; {$ O& ]
8. <script>
   # S+ n" H- `' x+ w
9. new Vue({
   
10.   el: '#app',
    5 n( @& P. o# C" [) _# ~& k; E/ ]+ V
11.   data: {
    6 O" C3 B. s" P" W5 t
12.     ok: true,
    
13.     message: 'RUNOOB',
    4 i% E+ S# w  C2 l
14.     id : 1
    ; O- ^- r7 C& ^8 \' ]; A$ [
15.   }
    ' ]0 e# k) f- k5 R  U: P
16. })
    ! l$ g' u$ b  O8 `
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   
5. <script>
   7 {+ p0 Y7 `$ Q) a  e
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
     A/ R" i4 C( |  v3 i: ^5 `
10.   }
    . V3 C$ T+ F8 |. y/ w" v. c0 r
11. })
    8 Z; d. h4 w8 f. @' B% ?9 Q4 l( [& [
12. </script>

复制代码

! y1 b7 g% }2 H- q

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

参数

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

1. <div id="app">
   $ d6 R* ~& i5 [; _
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   " D2 v" p3 ~3 a* [8 g0 i2 _/ @
4.    
   
5. <script>
   ) w7 v* k; ~& n5 O; U
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   / d+ l2 c& P6 T, v: Y
9.     url: 'http://www.runoob.com'
   $ T6 `+ p1 b, W- ~; X
10.   }
    * ~  d8 o8 l7 D" u! U* S$ g& M
11. })
    
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   ( W- ~  B, k" O- L$ z* x
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   . Q/ k5 s8 g% J' }/ T
4. </div>
   * N: L3 g" Z. W# J' g
5. 
   4 a2 b  i+ N6 ~8 Q* P8 U
6. <div id="app2">
   ; z1 R* M& {; H3 ~
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   2 u: P4 W7 ?/ Z) f
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    
13. 
    
14. <script>
    " P) V: ?" G/ f% _4 Y4 v( W. t
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    " _/ D7 u9 Y: \8 t0 A# a+ q
18.     url: 'http://www.cncml.com'
    
19.   }
    ! [3 [$ R* L# w3 W( @
20. })
    
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    " F' n' f0 w% N. |9 j+ p1 x
26.      {a:'cc'}
    
27.     ]
    0 z! [! @- g0 V  l6 v$ \
28.   },
    
29.    methods:{
    5 U- w1 N0 Y/ S  n
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    * n. @6 u& @9 m  n5 p! j; L
33.    }
    
34. })
    
35. </script>

复制代码

7 w8 R6 ?$ G+ e1 y

' ]( l, F+ g3 C

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