Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   / Q  @# w9 b% p# Q: c4 I
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   + p# E: E1 H" A# k1 D' J# V
2.     <div v-html="message"></div>
   $ [. d9 j' e& c0 N5 Z% l8 |* V
3. </div>
   
4.    
   
5. <script>
   ' f: T0 Q. K  {/ {  e* E2 ^6 s
6. new Vue({
   
7.   el: '#app',
   ; B1 O  [7 W! D* j; X0 @% g0 y
8.   data: {
   - s  `+ i+ x" F  ]9 O4 N" o
9.     message: '<h1>菜鸟教程</h1>'
     Y2 A+ }9 W  g# r0 [# b& I
10.   }
    
11. })
    
12. </script>

复制代码

属性

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

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

1. <div id="app">
   & j0 W+ w" ?# w7 H; e4 i/ ]- c% V
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   * Y8 m* E* M% u! j# A: T
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   ' b: T5 Y  f1 b- \/ g: u/ d7 c2 `
6.   </div>
   9 z( n6 B9 M( ~' g# C7 F+ r7 j, W6 O
7. </div>
   # l/ @4 c! U! _6 L
8.    
   . @4 x3 o2 x3 N: e: H5 K
9. <script>
   
10. new Vue({
    # V: R0 c5 j% z
11.     el: '#app',
    
12.   data:{
    ' ^: o; N# x2 a) }2 j
13.       class1: false
    ' o" z" Z9 w+ l
14.   }
    8 }# E6 f  ^; |6 ^" y# Q% i9 ^
15. });
    4 b1 L# Q& P) c! q: t9 {' z
16. </script>

复制代码

表达式

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

1. <div id="app">
   0 X' g1 {/ a. k
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   ! i, D% L. R; g$ I+ E  f4 C
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   2 v, n/ S1 u3 ^, o1 j$ y+ j) H
6. </div>
   
7.    
   
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    7 e  V8 v  u* j3 h9 \) b9 |& I; x2 {
11.   data: {
    
12.     ok: true,
    
13.     message: 'RUNOOB',
    . H) C3 m4 I" e7 o* a
14.     id : 1
    3 Q: P; x& a+ Q
15.   }
    : t, q! W1 f( B$ x9 O/ F4 z
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   # M. B/ O; a8 l! h
4.    
   " R9 t6 P3 Q) M$ f1 {4 C% x
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   7 k: W8 @" \* N  E  {, M7 E$ X
8.   data: {
   
9.     seen: true
   
10.   }
    " t/ K2 Y6 |( M! N; S" Z
11. })
    6 s: w+ i: C: @1 a" v9 W" f# B
12. </script>

复制代码

1 l3 `+ l  {4 Q- F3 P, V3 E

这里， 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.    
   8 _+ h; k# K+ S
5. <script>
   
6. new Vue({
   . P# A; x  e- x0 K6 z. z# K% _
7.   el: '#app',
   - R$ r1 }2 \* u
8.   data: {
   
9.     url: 'http://www.runoob.com'
   , N% ?/ I2 p: N" m. h3 U
10.   }
    ) A0 [$ o) g. w( _4 r2 n% Z6 u1 Y
11. })
    ' t) s0 B! |+ A* Y( W. L; F( Z4 L
12. </script>

复制代码

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

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

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

复制代码

" [' K7 [( e$ ?0 ~

1. <div id="app">
   3 s! I+ ?$ ~3 @. B& t) m) D
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   1 r# L1 h+ f  s; E& v9 `* `0 t
3. 
   
4. </div>
   ) g0 `9 j9 C, O. ]3 `  h# \, O
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   1 B& @6 j4 a$ f2 B; m5 e$ E$ o
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    + I4 w/ b8 c. h3 o3 |
11. </div>
    + f! ^+ o2 k2 T$ m- L8 ^4 K
12. 
    
13. 
    : m; z) r0 r  V$ c; o( R/ |
14. <script>
    " T. n! Z5 ^4 R6 B; @8 l
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    0 f/ K+ m+ i1 W/ v- y
18.     url: 'http://www.cncml.com'
    * b, ]  u3 `+ m8 R
19.   }
    6 s  A3 C9 _$ _& L
20. })
    
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    
26.      {a:'cc'}
    4 G- H6 p) z0 a7 d
27.     ]
    
28.   },
    
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    " i/ ^2 Q1 F, F: Z
32.     }
    4 v& y* X6 n, v- L3 a' n8 D
33.    }
    % w9 r0 N# i+ p& h! c6 l
34. })
    
35. </script>

复制代码

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