Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   $ j6 \( j" ^- n
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   3 s8 S. r7 ?, W/ j- E) l% p
3. </div>
   
4.    
   
5. <script>
   7 S7 L; H( ]9 V, r$ K$ F4 b
6. new Vue({
   3 o% J1 G. W6 t( B
7.   el: '#app',
   + N; p3 s+ i5 S+ |9 N% y
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    7 F. c6 a% _: i
11. })
    
12. </script>

复制代码

属性

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

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

1. <div id="app">
   : ^* q6 m' N$ D. B+ y$ }+ W2 p) `
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   1 y" I! x5 t* _) C0 u
3.   <br><br>
   2 ?- n6 X! m  f3 R
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   
6.   </div>
     s% s" z, c- a! z/ L$ O# g, M
7. </div>
   3 F( [- W3 w& w* L5 B* L0 E
8.    
   # _$ |* ^6 _* E- z0 S
9. <script>
   % @4 [/ L. [% J7 j0 p" @
10. new Vue({
    + n6 A4 A# s" G+ x
11.     el: '#app',
    $ ^. O; O: l  z! p8 t( y' O) J
12.   data:{
    % s: R2 W9 X. I9 a2 e& W9 S* [
13.       class1: false
    : H# z8 \2 P% b0 W. @" \
14.   }
    " c6 r' p; }% C; b: F7 m# K
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   ' v* S% U  g, f. d0 q' n2 |2 O2 P" K. Y
6. </div>
   * I3 y1 n$ p/ ?3 o" r2 \
7.    
   
8. <script>
   
9. new Vue({
   # R. M! A  |+ v# ?4 k# o
10.   el: '#app',
    
11.   data: {
    8 R) P" n$ n! X: \
12.     ok: true,
    + ~9 x% _- H6 j6 m" r8 c/ }4 a
13.     message: 'RUNOOB',
      _' X1 a& ~, T7 Z7 R, f: J- K, `
14.     id : 1
    : |0 ^* T$ Y9 H
15.   }
    5 X: Z4 k1 z% G" g& [% R
16. })
    . I5 n! J/ a3 f. x2 L' O7 }
17. </script>

复制代码

指令

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

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

1. <div id="app">
   0 _9 t0 A/ V6 W7 e) h. {" D
2.     <p v-if="seen">现在你看到我了</p>
   3 I- E: J; h! {9 Q. Y
3. </div>
   
4.    
   : c6 x+ W0 D; C4 q5 z( t- ?+ P
5. <script>
   8 G3 e' S( h" e6 D2 w$ f, z
6. new Vue({
   9 T* ?( ]! y5 O2 d3 H
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   + A! x4 ^% T2 u
10.   }
    - `" z4 x& [- j* l' q  A! N
11. })
    
12. </script>

复制代码

* \  {# _" |/ ]4 G3 w4 A- T

这里， 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>
   8 [/ X# @5 m+ f9 t0 ~
6. new Vue({
     y) R6 R( @- W: t
7.   el: '#app',
   " u; k4 Q" F$ r9 w
8.   data: {
   ! o+ L% h4 S+ I1 z5 L3 H$ O% u
9.     url: 'http://www.runoob.com'
   + s9 F# ^( n, A! F2 v1 G
10.   }
    0 x$ j, m! k0 m4 Z+ K
11. })
    
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   ) ~" M* J! v+ h$ r
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   % W! |* o, c6 P/ k
3. 
   ) `) p0 q1 C. J6 Z# X$ i
4. </div>
   
5. 
   5 v7 r/ c! E$ m- ]8 |2 B. [4 b, g0 z
6. <div id="app2">
   . h% N& g* j6 }. Q- c
7.    <p v-for="val in arr">
   $ k/ u% `5 C+ j6 V9 D  D. V/ g
8.     {{val.a}}
   , h- u' |2 \/ X8 q, Z3 p, w2 @
9.    </p>
   ; Q+ \% U" P* U* t  q+ h
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    5 x& y3 c' h9 T8 Z) Q& @
12. 
    
13. 
    
14. <script>
    3 ~  h$ a2 u2 a! Y
15. new Vue({
    
16.   el: '#app',
    2 L. @% K- L/ R; @) i. b
17.   data: {
    4 [) ^- w3 M- Z, S, S/ E  y
18.     url: 'http://www.cncml.com'
    9 J3 ^1 ~+ `  h* J
19.   }
    6 f( e7 k9 h+ r3 {" [+ N# F  q3 Z
20. })
    
21. new Vue({
    - o6 }( \# y/ R' G% M& x0 K  z$ t1 @
22.   el: '#app2',
    
23.   data: {
    ) \; M' i$ c/ P) M' x5 A: X8 c
24.     arr:[
    
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
      D) j) L1 @: }1 H& a$ m4 ]
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    $ }9 F& X2 y. y4 h3 D
32.     }
    ; |& g  K( Z6 W# E2 F& @
33.    }
    0 F5 m% _, ?! ?+ b, U/ J
34. })
    
35. </script>

复制代码

6 I: ?1 g# o5 x2 o- Z( U

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

6 B) \9 J' J6 e% _+ M4 |, C' T8 g3 t