Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   4 P# L, U. c' ?; k
3. </div>

复制代码

Html

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

1. <div id="app">
   * T3 |9 m7 ]2 ?' I; S+ P
2.     <div v-html="message"></div>
   
3. </div>
   
4.    
   
5. <script>
   8 {8 `: q, ?3 i4 M9 \( I/ W3 b- U
6. new Vue({
   1 g4 J; ^. @+ _! o, {
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   2 e" V. M0 L5 k. O! N+ s
10.   }
    
11. })
    8 S. C" }7 G3 v5 u! Q
12. </script>

复制代码

属性

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

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

1. <div id="app">
   " A  v: X3 {2 q0 B
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   - Q) S8 |  y+ b! ~) f9 b" `
4.   <div v-bind:class="{'class1': class1}">
   ( G. D* U" g7 s" U& @3 M' L
5.     directiva v-bind:class
   
6.   </div>
   * i9 ?3 h, C3 C7 r" c1 a- W3 R9 x
7. </div>
   6 y$ t8 B$ A7 c" X' j0 D# ~
8.    
   
9. <script>
   
10. new Vue({
    / I0 H& v) f: u2 C$ H4 l1 [
11.     el: '#app',
      P+ }3 {9 J$ D' l/ Q6 {
12.   data:{
    
13.       class1: false
    8 m  Z5 R7 M1 v+ R
14.   }
    ! b/ T  [- X2 M& v5 `; y5 }# n/ |' b
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   : w0 u0 a5 c& y
2.     {{5+5}}<br>
   ; W+ W6 U8 V; ~. G) L
3.     {{ ok ? 'YES' : 'NO' }}<br>
   2 ~% j) J) Q7 _! d! ^) g
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   " W* O% ~/ [, f& r
6. </div>
   
7.    
   ) e; L$ i/ _3 e" X& J0 ]
8. <script>
   ) D/ u& n( q6 C& A0 v7 e0 y
9. new Vue({
   , d! ]. P& C. H$ c6 }2 e( f/ z* c
10.   el: '#app',
    . G, [# j) y4 w7 D
11.   data: {
    + N$ g( I: e/ f+ }5 S( T  F' S7 B5 ^5 T
12.     ok: true,
    
13.     message: 'RUNOOB',
    3 T/ W. o: s" C* Y0 ~( {
14.     id : 1
    
15.   }
    ; e+ e% M- E+ }8 N/ \1 q/ q
16. })
    6 ?- }# o: L6 s7 p  y
17. </script>

复制代码

指令

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

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

1. <div id="app">
   ; e: T! s8 j! x' v
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   * d( _, U3 w' U$ t1 T
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   : H, A3 _0 T0 o
8.   data: {
   
9.     seen: true
   
10.   }
    2 l' ^1 i0 B) B8 ~# Y
11. })
    
12. </script>

复制代码

1 \2 ]) f; Y2 Q; R5 M8 I

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

参数

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

1. <div id="app">
   0 W- X% F' a& r8 D& {# C
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   4 A+ W- r$ E% ^2 ]/ E
3. </div>
   ; e* b: f& v* n0 W
4.    
   
5. <script>
   . |4 ^) W) b$ b) j$ g8 k
6. new Vue({
   7 t: i7 D$ H; o& ?0 |! {
7.   el: '#app',
   1 h5 y$ e' L: f
8.   data: {
   & p3 A9 I# e& F- W
9.     url: 'http://www.runoob.com'
   
10.   }
    2 M0 E7 Q( F4 p  n6 J
11. })
    
12. </script>

复制代码

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

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

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

复制代码

' @( M/ @1 E8 O( W1 W4 s

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   " R6 I. J6 l! ?+ C7 k: q8 g  @5 h
4. </div>
   
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   * I( E; f( {8 a8 O5 {
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    + h2 e- B5 |; Y1 ?" j+ @4 I
13. 
    
14. <script>
    ( Y6 }- e% [! Z
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    ) j) L4 [( l, e- l  t
19.   }
    
20. })
    
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    , K4 P3 V; A$ \$ x
24.     arr:[
    
25.      {a:'bb'},
    * @! p8 v5 s1 x3 w
26.      {a:'cc'}
    . w- d3 m) R- V: E$ J
27.     ]
    
28.   },
    
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
      a" w; h& n/ B, w0 B
32.     }
    . M6 l" G+ U6 g- U1 w) ]
33.    }
    
34. })
    
35. </script>

复制代码

$ b/ B7 B! i6 s' j

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

( }: z- k( M4 C: x. v