Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   ) O% l/ @# ~. E$ v0 f7 s6 S
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   : w" F( Z& z  A% D2 _6 C! p' ?$ y; Z. g
3. </div>
   0 o, Z- @+ Q" S" q# b& g* S# s$ c2 }
4.    
   
5. <script>
   * Y# Q0 @0 L: P7 {& U
6. new Vue({
   
7.   el: '#app',
   $ _/ a/ ]. o& g" p7 Z# h
8.   data: {
   + I; f, m0 c( U# d
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    4 R! Z" ~2 `( G8 ]. z- c, V7 f$ E1 r) q
11. })
    
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">
   . |( E* S. ?6 a. m0 k( E9 h
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   
6.   </div>
   8 c1 w; m+ T- b6 Y/ a
7. </div>
   
8.    
   
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    
13.       class1: false
    / g/ o2 o% H# Q5 [7 Q" K
14.   }
    
15. });
      d% O3 I0 v6 o/ W# K! @: d& s
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   9 t# g$ e% H" S; r5 F$ P
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   ! S3 k$ I+ j1 u* u6 K
6. </div>
   
7.    
   6 U9 e& `3 h5 T# O, h9 L- d
8. <script>
   % _8 }7 D, ~, k  n
9. new Vue({
   # T9 S% M  d! I* Y; |6 Y
10.   el: '#app',
    ( w. C: q8 l& }4 c' o) h
11.   data: {
    8 J+ H; B2 y7 R+ V' q$ q
12.     ok: true,
    / }. U0 Y8 d% B3 h
13.     message: 'RUNOOB',
    . r9 E5 z. O7 @4 p- O
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   % \/ Z' O0 |8 X
3. </div>
   
4.    
   # R/ B7 i: \1 [6 Z0 W4 M1 U5 F
5. <script>
   
6. new Vue({
   & m9 G8 D' s% U& K- n8 G
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   & J8 A1 v5 _3 Z6 c! ?1 K! D( @
10.   }
    + T, C4 `5 U. ^" f# u
11. })
    8 k: y  L% S2 ]0 @- K" C! E
12. </script>

复制代码

4 o' C. W$ L# X: h  i

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   6 @7 S8 g( H* L+ w; k# Q) P# j/ s' @4 |
3. </div>
   " n- t" o# ^/ h7 P% I# Y1 G
4.    
   + ^- h5 h) k) ~0 h% Z+ c
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
     g5 I) k  F9 V
9.     url: 'http://www.runoob.com'
   . r5 C: g* U6 }  ~2 X6 g
10.   }
    ; x! J& T, X* L0 }
11. })
    
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   
4. </div>
   
5. 
   
6. <div id="app2">
     _4 }8 b* C; Q: l- K4 ^" S
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   / ^# ^3 e$ S8 y: p! N6 u7 X
9.    </p>
   , I' F/ e( m) z6 \
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    . l6 m; V* I- r: F( G; Q
12. 
    
13. 
    ( Y/ F, g3 D- k! E
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    6 H! L* `7 A& p6 _& U& A
20. })
    ( U% B# g# S" O4 n* G2 H3 |6 _
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    , D- }( J1 b4 `% x0 h
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    
29.    methods:{
    
30.     tap : function(){
    % ~9 s5 {/ n" \
31.      this.arr.unshift({a:'new'})
    ( Y5 L# I0 ~* u8 T! y* {3 P
32.     }
    4 e% y' _; r8 w8 p7 _
33.    }
    . @, Y- A# P0 ?8 g
34. })
    
35. </script>

复制代码

% S) A: N8 B6 T  Z: k$ j3 }3 M

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

1 Q3 P4 |$ S: L3 e