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">
   
2.     <div v-html="message"></div>
   , {6 i* ~4 }% }
3. </div>
   5 ~1 {3 D6 d* w% F: o# |2 k6 L, G
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   0 b6 {# _6 j- M/ ]! W; a
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   ) s' E/ N# z2 P' A  H
10.   }
    
11. })
    : w  y1 {. _2 m1 j& L
12. </script>

复制代码

属性

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

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

1. <div id="app">
   $ I6 D6 h+ N. U
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   : H( r1 D  Z' |/ [* Q
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   ' I9 i, [- D  _* b
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   " {& g. S- y+ }! F; c- X
8.    
   , R2 o1 K7 {$ H" v9 v
9. <script>
   
10. new Vue({
    : S+ E. O" J+ V$ |6 V+ X9 A6 @
11.     el: '#app',
    
12.   data:{
    3 c$ k: _4 e3 q) f' r
13.       class1: false
    2 G9 D- n$ C# V
14.   }
    ( u1 R- j/ J! D
15. });
    # f2 O& L; l' Q3 S9 u
16. </script>

复制代码

表达式

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

1. <div id="app">
   $ j! P8 M! h- z
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   " [( I5 V  |2 c6 t# e
7.    
   
8. <script>
   
9. new Vue({
   ' X0 R8 W" T4 Q" X2 v
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    : _3 m0 I. R. I0 z
13.     message: 'RUNOOB',
    9 S3 V" }2 A9 y+ p" e
14.     id : 1
    + D7 Q! f4 u  c0 d
15.   }
    
16. })
    4 a" ~9 `8 O9 e- |$ e3 m% k
17. </script>

复制代码

指令

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

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

1. <div id="app">
   ) \: S: d7 j5 L3 f! T5 J
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   ) j" o7 c/ c" g( y+ u: E9 ]
4.    
   
5. <script>
   / ^$ y4 k) P; p4 @: N
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   + z$ e, T, v& W* ~$ z
10.   }
    : S) C6 r) u+ \' k1 v( j5 }
11. })
    . v% R/ w8 |6 m& e! b3 w% H4 ~
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.    
   $ `4 p6 m% ~- b3 w5 j  t2 H$ |- y- y
5. <script>
   7 y+ v" T" _8 K" X" _5 ~
6. new Vue({
   3 z- [& o" W3 t0 c) d
7.   el: '#app',
     W$ X7 z$ j4 e; r  ]5 L
8.   data: {
   " K. W- ]6 {, J/ o8 p+ W% Y
9.     url: 'http://www.runoob.com'
   * g! P  Z7 n7 W% N8 X
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

1 `; e+ h  l; D8 o0 R: `  [) J

1. <div id="app">
   - P) X6 H0 `3 j7 s/ y
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   
4. </div>
   7 j2 E7 _5 P+ v6 u
5. 
   
6. <div id="app2">
   5 ~/ @, B, G, e7 g0 \) C- [0 M# n4 [9 d
7.    <p v-for="val in arr">
   1 h  D! m( |1 [7 c+ Q
8.     {{val.a}}
   ' [" H1 F: G2 G) m( G$ T. d
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
      x% ~/ @5 |$ m  A7 [
11. </div>
    
12. 
    & X5 v" G; h  l6 r3 f" Z
13. 
    
14. <script>
    " G9 C: b; P; C) u- d
15. new Vue({
    8 A* Q2 E$ Z: b9 Y
16.   el: '#app',
    
17.   data: {
    % E$ ^% ~& u" g& p+ X, T$ q) v
18.     url: 'http://www.cncml.com'
    
19.   }
    ; h$ d1 |$ A6 h) D1 j
20. })
    - p/ ?6 ?( v# y0 p
21. new Vue({
    
22.   el: '#app2',
    6 ]: @7 H4 ]+ }. N' H
23.   data: {
    5 o* ]2 C* E7 z
24.     arr:[
    6 A# R+ Y: ~' W- F, t( g
25.      {a:'bb'},
    
26.      {a:'cc'}
    $ m( s. x1 ^7 g9 W
27.     ]
    
28.   },
    
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    % l' x' i9 s6 u, U+ k: d( H! W
32.     }
    
33.    }
    
34. })
      O( Q, n  ?+ R
35. </script>

复制代码

6 V# s, q* |, T5 X

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