Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   8 _5 B' n7 H7 m1 W8 J
2.   <p>{{ message }}</p>
   * Y3 ~2 w9 m3 @) p. |3 j
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   + k- ?  {0 K0 _$ j. j1 H
3. </div>
   2 y" @4 j- ]7 W
4.    
   
5. <script>
   # u4 A6 w0 f) s" I: {/ B
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   ; l% a  f3 r7 s; H. H8 S
9.     message: '<h1>菜鸟教程</h1>'
   : u0 \! I4 G% a
10.   }
    
11. })
    5 a3 \" `1 z% r! z3 m4 N
12. </script>

复制代码

属性

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

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

1. <div id="app">
   $ C+ `. Q2 O- m% @- a
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   % `! A8 E2 `5 y- N: J3 v
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   
6.   </div>
   1 o5 @/ O. W) B' _* h: {
7. </div>
   
8.    
   
9. <script>
   $ i( a7 y3 J5 y$ {4 p0 t# |6 Y" |! b
10. new Vue({
    
11.     el: '#app',
    1 B! U4 U3 ]7 T! J# _( B, J7 Q
12.   data:{
    6 S$ ]. {" v6 b3 x( v& t
13.       class1: false
    8 T* u' C$ H& e- g9 w
14.   }
    : q4 G; F- h" i
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   6 f( n, C9 l' ?. x) O$ c
2.     {{5+5}}<br>
   4 x9 b3 f" F/ A% y7 o% O# _
3.     {{ ok ? 'YES' : 'NO' }}<br>
   * M) v8 o' w) Y: U7 W. H
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   ' L, R4 T. {9 P7 @3 {
7.    
   
8. <script>
   
9. new Vue({
   ! l5 ^  g8 v. T% V
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    
13.     message: 'RUNOOB',
    
14.     id : 1
    3 f4 R5 E+ u( A
15.   }
    ) \" @# T) V% u- G. q
16. })
    8 f& k  {1 [8 Y
17. </script>

复制代码

指令

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

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

1. <div id="app">
   2 j* l& m# W- y6 C6 A
2.     <p v-if="seen">现在你看到我了</p>
   $ x- r) a- U: Q% y! b
3. </div>
   4 S# z* x( I% A- O
4.    
   
5. <script>
   # y) j9 t6 j4 ?
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   1 l0 m7 A9 H4 x  [" T! W6 D( u: A
10.   }
    
11. })
    9 W$ A9 q0 y1 U* v
12. </script>

复制代码

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

参数

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

1. <div id="app">
   8 Y. ?9 P( t! H) T2 |
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   
4.    
   
5. <script>
   ' t* L6 X- T! V8 ?
6. new Vue({
   * B! j9 R3 W) c( H# W
7.   el: '#app',
   0 A' N5 h) t. d, X" r# f- ^- Z0 ^& |' B
8.   data: {
   0 X) |0 W; T' `# B1 |
9.     url: 'http://www.runoob.com'
   , x0 ]0 I- G; l' o$ g
10.   }
    * @' R$ c/ Y7 [7 D5 a
11. })
    , d* k6 v1 ?% V
12. </script>

复制代码

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

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

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

复制代码

1 \3 K4 _# r, E7 ^9 t

1. <div id="app">
   3 _6 Y" T3 i- d& Z0 @
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   . w, A* _) e& ?8 r
4. </div>
   % v: ?1 T0 K( U% G" u- u  b
5. 
     D2 h, \* L$ t
6. <div id="app2">
   & k3 X* O5 F, U% K2 q6 L# ]$ X
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    3 a4 ^' x( d' F: G# _
12. 
    ! I( ^- {2 {* W+ C' Y) @0 P
13. 
    
14. <script>
    3 U# B. E; T1 d; v% p6 ^* r) s
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    - Z- [6 u8 U8 [  b& _' s, M
20. })
    
21. new Vue({
    ; ]9 J+ x" F9 k
22.   el: '#app2',
    % \0 m1 n, U& \
23.   data: {
    / T8 O( i( z2 i. O! V( J/ M% S1 ~
24.     arr:[
    . X7 a8 V1 S9 V- J
25.      {a:'bb'},
    
26.      {a:'cc'}
    5 k7 X( u1 q. V7 c7 E
27.     ]
    
28.   },
    
29.    methods:{
    ; k6 C; v, X4 e8 o# h2 W. ~
30.     tap : function(){
    / q9 G+ g2 O0 [0 Y4 P- I/ N% D3 V
31.      this.arr.unshift({a:'new'})
    5 B: q; C% m) t
32.     }
    3 u  E  u, W) m2 f
33.    }
    9 o+ T  S1 e- q( A. ~' ?4 h! h" Y
34. })
    ; K/ q# l: u/ V
35. </script>

复制代码

1 {% _6 s/ `! }9 F0 ^! y1 y+ C

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