Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   3 d- I" `3 {' e+ k1 Y+ }+ {
2.   <p>{{ message }}</p>
   : q* E0 d% Z" s: v. `
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   1 ~3 [' l  b! U' B- C
3. </div>
   # f4 M0 ^7 h8 L9 M: N/ o
4.    
   8 m& J9 \1 b8 G
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   9 t: U: D' Z, U
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   2 `! n* I% O2 v% D6 G) s
10.   }
    : e( w. |) G& \) w
11. })
    8 G" A- @" I1 A+ b# J" [0 f
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">
   / s' k5 P; T# ?
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   7 b1 @: L2 a5 U0 U9 Y6 N4 y
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   ) u5 \# Y% L0 g8 g% v- X; C6 E
10. new Vue({
    ! \+ A' V; y2 q  ^. r
11.     el: '#app',
    
12.   data:{
    
13.       class1: false
    
14.   }
    
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   ! ~) h2 u; }6 _; t1 V6 b. [- e
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   7 m) M  l2 S+ h5 d* M- Q3 w
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   ! ]! h5 ~7 j" G- v9 G; Y8 P- @! A
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    % W, w+ w# ^, E- S8 @3 i8 p
12.     ok: true,
    
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    5 B6 V$ I9 `/ i; R1 \! n) l5 {: D
16. })
    " ^3 _/ x8 D4 D; c1 b3 x3 B
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   0 k. ~1 r& g; {) d, j
4.    
   ; ?- Y8 f  H8 A5 n7 ]# l
5. <script>
   + n2 N$ _% A9 K# n/ U
6. new Vue({
   
7.   el: '#app',
   ! e: ~5 q# E: D3 d. E* O" }7 p
8.   data: {
   
9.     seen: true
   
10.   }
    : W, D% k) R) i8 A  h% ~; n# o$ W
11. })
    
12. </script>

复制代码

/ c: s& J) D7 Y) A0 h  u1 N9 Z. T0 p

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

参数

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

1. <div id="app">
   ' J) O' I  Q+ G: a- P
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
     a  N- l. R& p: q6 T6 E+ N$ P: Z
3. </div>
   
4.    
   , g3 K# T# L$ X8 `7 I1 S5 Q
5. <script>
   " `8 l- @# {1 l
6. new Vue({
   
7.   el: '#app',
   / Y( O/ V. @; K( }; D. O
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">

复制代码

* T6 ^8 a% ?$ e

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   9 M$ ?# ~0 S# M
3. 
   
4. </div>
   4 L8 u/ K, j8 n9 V4 Y0 j  S" t, u) b
5. 
   
6. <div id="app2">
   6 T; n7 l& x3 _- S* @! i
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   * h3 ~; K0 W. \9 v
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    5 V) L& N6 V  F4 y: v
12. 
    6 i) ], g  T& l: b/ A
13. 
    $ V7 E6 |3 e9 o5 t
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    0 j6 z4 y( U! _# [( U( W% w' I3 C
17.   data: {
    
18.     url: 'http://www.cncml.com'
    6 ^- _* [8 Q: F
19.   }
    
20. })
    
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    ( I0 Z% l* F, q' e6 X
24.     arr:[
    
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    ! R- h5 [7 U( N" `, h
29.    methods:{
    3 k0 [1 I% i  a8 \! m. H% y
30.     tap : function(){
    3 c7 K9 G; g* z4 p  W1 Y9 f8 ~: `
31.      this.arr.unshift({a:'new'})
    
32.     }
    + n9 E9 s- F5 G" K- `9 Z
33.    }
    " U: y3 w* o7 }. l; N: s: K; Y
34. })
    
35. </script>

复制代码

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