Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   & b2 x) y- l2 |" Q6 P# l! s
3. </div>

复制代码

Html

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

1. <div id="app">
   / C, r( C# h+ B# H
2.     <div v-html="message"></div>
   # u& U& j  W2 _
3. </div>
   ; |# v7 m% `6 S# J8 U5 B
4.    
   ! w; Q  ]3 ?3 n/ n3 O* O
5. <script>
   % o6 X' f# \9 ~8 r( T5 A
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    . |, ~: D  O- q0 m1 p) g" X$ x. G0 A
12. </script>

复制代码

属性

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

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

1. <div id="app">
   ' z5 H5 ?7 u- S: u: z
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   ; h, T# I0 T) r0 X& h( {5 \1 S
3.   <br><br>
   0 y& }% ?+ G5 W7 C% p6 S7 f+ \7 |
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   - X/ Q3 ]8 p/ i: n
6.   </div>
   
7. </div>
   
8.    
   ' N, I5 a: P% _, T0 a1 l! d
9. <script>
   1 I5 U3 [1 Z; d
10. new Vue({
    6 ]3 H3 G1 {* K$ F6 D: f: i7 l2 t
11.     el: '#app',
    ) D9 \  j# @  f1 s2 B  q. F+ L
12.   data:{
    
13.       class1: false
    
14.   }
    8 ^& ^- M6 P+ v, ~
15. });
    ; k: R% F) Q; I$ e4 y  q! t
16. </script>

复制代码

表达式

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

1. <div id="app">
   0 l: P& j" ], R7 K' X3 c
2.     {{5+5}}<br>
   / F8 u& U0 ?- M+ i3 C' N
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   ! g( R. t) {5 k4 h7 i6 Y1 R
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   9 O% J* ?8 G, g, h2 ?5 ^# y( g
6. </div>
   
7.    
   5 I; n( K# `' Y4 Z
8. <script>
   3 I8 [: f1 }' e/ w
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    4 W, q8 j3 f/ M9 m% Z
13.     message: 'RUNOOB',
    7 p' D3 |/ w  F+ F+ }
14.     id : 1
    
15.   }
    * [$ S# _$ [9 T; k) t% u
16. })
    & x+ ~0 c/ p3 M2 s5 i+ J
17. </script>

复制代码

指令

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

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

1. <div id="app">
   : y5 @$ k6 \' L, D1 F
2.     <p v-if="seen">现在你看到我了</p>
   3 U6 G$ _1 J3 Q# L
3. </div>
   
4.    
   - F) v6 X+ l! n9 _* F3 d5 i
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   - r8 J0 M7 Y) u9 j- R0 O1 K
9.     seen: true
   / |( C9 C; r9 L" L
10.   }
    . U8 A. z& E. f% G  }
11. })
    
12. </script>

复制代码

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   # t/ z  W+ f9 m* g# d! R
3. </div>
   ! b! ?/ X% R# p/ }- {$ x
4.    
   ) q5 V+ R* C& }1 N- p: |0 W
5. <script>
   
6. new Vue({
   & W' t+ h* ~" E/ E# q2 X6 ^6 N
7.   el: '#app',
   / m+ b7 I/ O- y
8.   data: {
   
9.     url: 'http://www.runoob.com'
   & e. C: B; G. }6 d  G  u
10.   }
    4 w* a* b$ N7 n/ ~; p3 X+ k% F2 ]
11. })
    
12. </script>

复制代码

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

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

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

复制代码

& @1 c! s9 ]$ r; L: A5 O, k4 H+ g

1. <div id="app">
   - u  D9 |1 E  d8 _6 t: d
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   ( f- T' {4 N; D3 [1 Z
3. 
     ?9 s' }0 [! w, |
4. </div>
   
5. 
   & D6 e- h" b5 c$ h7 x$ e
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   & ^- Q5 _  j' c' F: r
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    # s$ m) B2 p3 n5 ]' y
11. </div>
    
12. 
    
13. 
    ) m0 n* O0 Y# d/ b
14. <script>
    7 o( {" ^9 d% V3 T4 W$ L
15. new Vue({
    
16.   el: '#app',
    $ l" X2 \4 |" e  |. m
17.   data: {
    9 p3 C/ p$ l) y5 q7 ^
18.     url: 'http://www.cncml.com'
    
19.   }
    + m1 i+ Q3 w3 w7 T
20. })
    ! u1 p& ^4 f4 |
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    ( w! k3 U- W% ^7 i2 T2 Q* ^' }
26.      {a:'cc'}
    
27.     ]
    . L6 C8 S  |7 v0 a0 t
28.   },
    
29.    methods:{
    3 N! z% X2 V2 ?1 j8 i! w+ q5 o" Y
30.     tap : function(){
    8 ^1 R1 n% V1 U, [; X  Z# \6 r' ]2 b3 u
31.      this.arr.unshift({a:'new'})
    
32.     }
    " F4 Y  @9 I4 ~- c) N
33.    }
    & L7 b1 m2 L2 W0 q) t- W
34. })
    
35. </script>

复制代码

% A5 _/ A9 f0 r" F3 t& p) E

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