Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   $ o3 @' A) L9 O: l" ?9 q
2.   <p>{{ message }}</p>
   & q5 T0 \: z* u
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   : t: \% Y  H$ C2 ?
3. </div>
   3 k( N) ^2 E: E- C# s: S- i
4.    
   
5. <script>
   6 j" w# L, k! j$ I* C3 l
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   3 E9 S: \7 L% o& U
10.   }
    
11. })
    
12. </script>

复制代码

属性

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

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

1. <div id="app">
   4 k* D- L( G- z9 b3 \( ~, B/ L
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   $ b4 R7 s  G& N# X
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
     ~/ y+ ~1 {0 |, G2 I% d3 h: c
8.    
   
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    : L) Z: ^8 K/ O4 C
12.   data:{
    . I4 O  x' N( C, P6 C
13.       class1: false
    
14.   }
    8 J6 G1 `, e5 d2 Z) X  V, r" ~
15. });
    ( U' Y) J. R9 b* k" T
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   . H: Z+ D, K" u5 L4 r/ L
4.     {{ message.split('').reverse().join('') }}
   " W- S8 Z& e4 g% C
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   
8. <script>
   2 Z( D  d5 n8 c) a3 X4 y& i
9. new Vue({
   ! F' N+ P7 M5 i* ~
10.   el: '#app',
    : Y0 }& ?  k( W- A
11.   data: {
    
12.     ok: true,
    
13.     message: 'RUNOOB',
    + B$ z. v; y3 w- @
14.     id : 1
    
15.   }
    3 G8 K( C0 u5 s4 t  Z0 d# |
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   4 Z5 C3 a' p) D$ s/ k$ ?. [6 m
2.     <p v-if="seen">现在你看到我了</p>
   1 j; M. c' ]3 C! l
3. </div>
   
4.    
   ) i- D% Y* H+ p
5. <script>
   
6. new Vue({
   9 J/ i2 J6 W. @# \. @' Z
7.   el: '#app',
   - ^  F) N1 v! g. e5 Z0 G( N
8.   data: {
   
9.     seen: true
   / \& W! @6 V- o- H: v
10.   }
    
11. })
    + A4 q0 u2 a( _- ~! Z6 }
12. </script>

复制代码

' D4 R" @! r( y) r! J/ W

这里， 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.    
   0 {# }. z% X: L5 g, J
5. <script>
   1 _  z: C3 v+ |6 m7 [- Q) \. {
6. new Vue({
   8 w  M3 p" f+ s# y% f
7.   el: '#app',
   ! n: K  s' R3 v9 A3 t0 b( a6 R
8.   data: {
   ; r  l4 x9 O" {. O' |5 V; m0 b) a( ~1 D( z
9.     url: 'http://www.runoob.com'
   
10.   }
    7 k- T8 x- T* ~1 M
11. })
    
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. 
   ) m/ H% S# ?. J8 X$ d
4. </div>
   . n* o; y. c5 J0 {0 W7 v
5. 
   
6. <div id="app2">
   & e. L2 j/ f1 G6 I& t) T# C
7.    <p v-for="val in arr">
   ) A* y- c$ e4 m; ~# K" D
8.     {{val.a}}
   6 u: _- r& b4 m
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    . A5 M* e) N% U) O/ @
12. 
    
13. 
    
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    1 |  h  G2 Q. ~, j$ V( r0 f, q  J" H- [
18.     url: 'http://www.cncml.com'
    0 ^  A$ @/ j3 _/ f' @( P+ }$ r$ h
19.   }
    3 |  d0 y1 Z# V- k; p; a+ H% C$ R
20. })
    - b6 i' l+ J% p. `+ W
21. new Vue({
    ; c" s* x( ^) B. I
22.   el: '#app2',
    - U" T& _3 K; o7 M+ w* [- U( ~# ]
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    6 k" U2 ^: i$ ^5 s6 r0 s
26.      {a:'cc'}
    
27.     ]
    
28.   },
    
29.    methods:{
    : h# w5 `* J9 P: h! h1 o
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    & C6 _, }: @/ P
32.     }
    
33.    }
    * @; Z& }' F) p# `: }
34. })
    3 A0 h) C  o6 M$ v
35. </script>

复制代码

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

) G( R! R+ @# k; ]3 b% i2 \