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">
   # M( A% X5 C, j* j$ E
2.     <div v-html="message"></div>
   
3. </div>
   1 o) E7 K6 m- t) F# r* r: L! F
4.    
   " z/ _, O! @' a0 N1 r) X
5. <script>
   ) N2 T/ |) ^! ^7 ~) \
6. new Vue({
   , e+ t; J' u% ^
7.   el: '#app',
   5 r/ U; j7 H7 o2 K; _7 I
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    0 W, M, S. I" A
11. })
    % d% X5 C/ c. j+ u( v
12. </script>

复制代码

属性

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

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

1. <div id="app">
   * ^! d' T$ ~$ r' _. R" D
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   6 d/ }4 h) ?- }' v5 o
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   1 p" u, q) A( o* {' E5 X
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   ; p2 W8 r  q; _0 Q  Z
10. new Vue({
    . S- r% \8 T5 z0 e
11.     el: '#app',
    / X# M% j' f, K% Q0 H" o6 F, `8 B& B
12.   data:{
    
13.       class1: false
    - ?! R# y& U/ K8 y' W
14.   }
    
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   2 R% m! O7 I9 f; ^' h
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   ' C' q: o4 T9 m
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   : M' s2 _  @! E8 z; B( W8 v; ~
6. </div>
   
7.    
   9 y; S8 P2 @0 h  g& e% R
8. <script>
   . Z( E) g& u" M; T0 S" W
9. new Vue({
   1 M% \- m; m* B6 V3 n4 o
10.   el: '#app',
    ! Q4 N. l1 w5 s' P1 M/ D& e# c
11.   data: {
    ( v8 o5 H: d9 P: w  P* M
12.     ok: true,
    & V3 S& m' Y( h* K# {" ~; F
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    ; T. |8 B3 X2 I
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   : S: m, Q) n+ p( s& {9 v) p% ~
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   ) n! T3 J& i4 m+ }& }6 d. z  S* c
5. <script>
   
6. new Vue({
   6 X, v! f% m" ^1 \9 q* v- n
7.   el: '#app',
   ) A" P  r8 ]* C' K; W* U: y# f
8.   data: {
   0 v* [$ G- S3 \/ r( t6 s0 }9 x) a! w% N
9.     seen: true
   
10.   }
    . j+ ?% _; X$ A* q/ M& z0 D) l
11. })
    ! r/ [- B4 X" B9 k
12. </script>

复制代码

6 _) \- v/ I& e+ E/ ]; w) D

这里， 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.    
   
5. <script>
   6 ?# X4 M: r' Q5 f8 y+ a
6. new Vue({
   5 w. j  U# c+ h8 h
7.   el: '#app',
   9 Z% {) P, ?: N/ i# r+ w
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    ) T" s9 D8 r/ U9 f
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   % @5 ?# S) L7 v" _% {' K
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   $ R, T, k6 C( ^( R' X& t
4. </div>
   
5. 
   - [5 `3 `, o6 V; @, w8 D
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   9 t: J" `) p6 K1 Z9 g$ i4 I7 T6 g
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    
13. 
    
14. <script>
    
15. new Vue({
    / Z  @" }8 P( Q4 l$ S' \, n
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    
21. new Vue({
    
22.   el: '#app2',
    1 F, L$ m9 _( J
23.   data: {
    0 O  z9 _: l6 O& ^
24.     arr:[
    1 D3 J( v; {4 F  D6 `3 o  F" d" h
25.      {a:'bb'},
    ) a( K, a6 Q6 w! `6 x3 G- h
26.      {a:'cc'}
    
27.     ]
    1 U& s' W8 C/ M* p. q2 u4 ?
28.   },
    
29.    methods:{
    4 i3 c, \, K% I7 b( {
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    9 s& C9 O3 j2 G- X" w. V, X
32.     }
    
33.    }
    ) I5 Y6 \9 A! k" ?
34. })
    
35. </script>

复制代码

* S2 m7 K5 l0 L' v* T, n

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