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>
   
3. </div>
   7 W+ ^. A+ ^  S3 C
4.    
   " i2 Y: K0 a' g8 m7 B- S( H* W
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   9 |8 t& @* t# p: J; l
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   & Q, Q+ Z* }- V" U- `
10.   }
      i: L( A7 _& k& m
11. })
    7 t; Z6 {- [7 v5 h
12. </script>

复制代码

属性

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

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

1. <div id="app">
   : g$ K& b9 d3 W+ _
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   : ]; T* q& g, u) r. F1 ~5 C
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
     q! S* a0 N6 V# V- k
5.     directiva v-bind:class
   0 K' b/ n" _3 h5 I* P
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   ( t7 c: x* x" a- f
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    
13.       class1: false
    2 o3 Q. S; T% l6 H/ V/ _
14.   }
    5 v! r2 |2 o  Z
15. });
    9 L  i$ d& \& [2 O8 e4 R
16. </script>

复制代码

表达式

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

1. <div id="app">
   0 B( s# Q' S- |( ?" J& ~
2.     {{5+5}}<br>
   $ @+ d4 \( ^& f3 V4 R4 l8 [, i) Q
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   $ @: m9 x. N; |2 o
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   , p) N$ o# U& _! o; w. }
6. </div>
   
7.    
   
8. <script>
     d; h; b7 T$ s
9. new Vue({
   % M) m1 l8 |$ Z# }% x- D; M$ M
10.   el: '#app',
    * l0 h4 e9 U5 E0 H" {% [! Y4 A
11.   data: {
    
12.     ok: true,
    & X' g1 A7 p* z8 t
13.     message: 'RUNOOB',
    
14.     id : 1
    - ]6 s% V/ ]8 Y+ U
15.   }
    : D  U  W" b" D9 W4 N
16. })
    1 @4 t" O7 o5 a
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   3 v6 Y0 g( q! q( [
3. </div>
   
4.    
   : \( Z2 |: U4 z) {- l1 I
5. <script>
   0 c8 |& G$ p, Y0 [+ z
6. new Vue({
   5 ?7 y; w& m8 G/ ^
7.   el: '#app',
   
8.   data: {
   3 s$ V; k! X9 B/ \  ?
9.     seen: true
   5 X3 ~' \3 V$ r5 Z8 V
10.   }
    
11. })
    
12. </script>

复制代码

2 J, x7 a1 T+ t8 Y4 x) L

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

参数

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

1. <div id="app">
   / M& t8 d0 i/ H  M" t/ Z. [
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   2 `/ U" A4 o$ q4 Y+ ]
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    0 k  K# I+ x+ A3 o; ?  B
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   / Z; _' d' a* \: ~1 \
4. </div>
   
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   ) C/ w- b% b' d* R
8.     {{val.a}}
   2 n4 r, X; E" V0 a  f- U9 r* o) x2 H
9.    </p>
   . @. j' [$ @+ K' Y8 H/ e+ ]
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    . s5 x/ K+ g/ p0 Q( H; i
12. 
    
13. 
    + O3 e2 h3 N* w% w( y, b
14. <script>
    
15. new Vue({
    ; n0 t' v0 j" A3 }
16.   el: '#app',
    
17.   data: {
    + g6 ?! G1 v/ M& z# j
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    
21. new Vue({
    - _. N- k+ w0 \3 C9 i2 F
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    % M& v9 [# H4 w* [% Y
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    + T7 V6 S6 @) A5 P  Q) B' r
33.    }
    1 I+ `+ }' i7 T4 o6 B
34. })
    - H2 c' r* q/ K+ U6 z( [4 D; w8 E
35. </script>

复制代码

) m0 r! [$ I! @4 |' F

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

$ y: p( j) `& M2 z