Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   ! d! F- Q2 Z/ Z. f
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   ) {  g8 R  j, m6 T/ ?
2.     <div v-html="message"></div>
   " C+ t. j5 Y% V5 q
3. </div>
   9 m0 L( `( |7 K* E
4.    
   
5. <script>
     }5 v( ^  p" {( F) D& A( j/ T+ F
6. new Vue({
   
7.   el: '#app',
   " J0 s8 j! ]+ j
8.   data: {
   0 M& }: k* M4 A0 _2 N2 X
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    
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">
   : a; r, ^0 b2 T% o  W, K0 w
3.   <br><br>
   $ O0 U  c* h% k& Z$ {  m5 F
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   . H' b/ [1 j1 C, C0 Q. P
8.    
   ; T& \1 q+ s8 c4 j  K
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    , d8 z% C6 V, ?  q
13.       class1: false
    . @( \# }4 G3 P. K& J
14.   }
    
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   ' p! ]- a- Y: l# m( M& M  t# b. D
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   6 q% d  p* K6 D2 n# ]
4.     {{ message.split('').reverse().join('') }}
   6 m4 @, m6 i" \$ ^
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   - B: w4 l8 Y% v
6. </div>
   7 ]$ Z4 a3 O- B; U
7.    
   
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    ; A: J7 b6 S1 s# S- |6 O7 c8 _
12.     ok: true,
      _; F9 g% e; P0 x. f* x6 _
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   - W7 j- I2 T* z7 j7 ^' L! I% E- }  [
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   . d; O; o! n4 E' m$ l% g
5. <script>
   
6. new Vue({
   7 |, X3 x* L! ^# G+ }" V  B8 n
7.   el: '#app',
   : N1 }$ {$ F% n! o( n
8.   data: {
   
9.     seen: true
   7 d# x' @, p0 ^# B; V0 p* E" e
10.   }
    ; }& _3 }9 J$ z7 c' \! _, _4 Y7 y% Q
11. })
    
12. </script>

复制代码

0 a; y/ k5 F. J. G3 F* s$ I

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

参数

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

1. <div id="app">
   ' o' B. ^" S9 H2 T! E
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   : |/ m  `) j! h3 G( l6 l
3. </div>
   
4.    
   / o) |; q. d& A4 P4 E
5. <script>
   
6. new Vue({
   " L* n9 ]+ J9 d
7.   el: '#app',
   3 I; |4 `: M/ X, A
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

' S1 m( Z# K2 O6 W- x

1. <div id="app">
   ; y2 L$ w" m5 L
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   3 R& x: `- B$ [* I# ]8 \$ p9 H
3. 
   
4. </div>
   & l; u) ]6 q/ ~% U1 O! M% k
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   " A5 s6 C7 ~$ e0 x1 O4 t+ N
9.    </p>
   # g, S* o* D( [! N/ w8 M; e/ }
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    : t+ R1 L" U- |7 d% c/ @
12. 
    
13. 
    5 c2 F- S- v% q) G+ o3 u2 u6 {
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    7 l, z# g* s; f0 c
18.     url: 'http://www.cncml.com'
    , f7 L. a+ _, f: a) E
19.   }
    0 \5 F) Q; w% B, n/ K; Q
20. })
    " A, C, X5 N3 q1 S) D  R8 t. u, o
21. new Vue({
    4 Z7 x0 B7 M  M5 t) h( M1 t2 b
22.   el: '#app2',
    2 C: |3 {$ C7 p+ K
23.   data: {
    9 I; @1 f+ L9 i+ l
24.     arr:[
    
25.      {a:'bb'},
    - c3 T0 O3 c$ d" o& N
26.      {a:'cc'}
    3 n1 o  e% [& t7 ^5 z8 w
27.     ]
    
28.   },
    
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    : }) v! L) ]' d% Y- L. d0 t
32.     }
    # s% R8 \$ B6 ^3 G
33.    }
    
34. })
    
35. </script>

复制代码

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

. o# Z" M+ I% B% x  E1 N