Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   + k- y. i$ K" W  h, x) _
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   
3. </div>
   
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   0 g" U; _$ e/ @1 k$ }* }
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    
12. </script>

复制代码

属性

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

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

1. <div id="app">
   & R- h) Q- a; ~% \
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   $ r2 m3 X( T8 F+ Q
6.   </div>
   
7. </div>
   2 i" r3 c) Z! V5 s  b5 f, j
8.    
   8 [* @1 I5 Y( ]- ^8 N
9. <script>
   - E1 k! U0 ^* E  y  [- ~, J9 E
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    
13.       class1: false
    1 T0 d% o* e( \
14.   }
      Z! B' i+ t" ^& A: i( c/ D
15. });
    $ n3 g$ s  q# \' `. W, D" A
16. </script>

复制代码

表达式

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

1. <div id="app">
   , n- S' [2 o3 V( E; ]+ l
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
     s9 L, T6 n: o; P2 r
4.     {{ message.split('').reverse().join('') }}
   5 P. Q# R6 Q% x( r
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   4 L1 A6 f, J+ _& n/ F
6. </div>
   ) \  u3 w' f" v3 x. F0 y% t2 O/ |
7.    
   " J5 S4 A1 G0 [+ c7 y) \2 F
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    % Z& g. V: B  \5 @& A
12.     ok: true,
      O$ u; ~7 {1 u5 B
13.     message: 'RUNOOB',
    
14.     id : 1
    6 o. j1 c" |) K, u% \
15.   }
    + }+ x/ u, z+ V& D2 b% E
16. })
    % K1 J. |& B: z2 }& t; K3 g8 ?
17. </script>

复制代码

指令

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

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

1. <div id="app">
     y1 u% v4 g! q# M. w2 r
2.     <p v-if="seen">现在你看到我了</p>
   8 n& R6 ]  o1 g8 e" `
3. </div>
   
4.    
   $ C0 ~$ y. E: V6 k
5. <script>
   9 P5 A  t+ s. _
6. new Vue({
   3 h9 B( w5 p0 [
7.   el: '#app',
   , L7 Q- ]: ?& Y
8.   data: {
   
9.     seen: true
   
10.   }
      |9 N7 D5 ^+ A$ z
11. })
    " J/ Q7 l$ H% u* I% D1 p
12. </script>

复制代码

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   $ \6 |1 q* b& r8 D& G& f$ E1 W
4.    
   
5. <script>
   + i7 \2 R8 c4 f+ e
6. new Vue({
   $ Q! G+ Y- \: P% _' x* m$ D2 d9 t
7.   el: '#app',
   7 m3 v' ^9 O' G; T
8.   data: {
   
9.     url: 'http://www.runoob.com'
   ; J" |# Z+ m8 b4 t
10.   }
    
11. })
    # b/ J) X$ R% m) z& }5 V
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   . [' x2 m% I9 w/ H0 v3 G# y* W5 Y, R" B
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   3 W" {' Z! q& a9 ]3 s1 r. C
3. 
   
4. </div>
   
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    ' i# p  d9 r8 ]: X7 n
13. 
    2 m, ~+ M' k! D8 p' Z1 n- M
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    5 E. f' ~  Q! I# t
20. })
    5 x6 o: r0 |& r6 ]
21. new Vue({
    6 n6 J+ l6 s+ r# O$ l, ~. I
22.   el: '#app2',
    $ C' j: c5 H/ m
23.   data: {
    3 |/ A& F, k  `- i6 `
24.     arr:[
    
25.      {a:'bb'},
    2 l: Z+ n8 E' j3 l) P
26.      {a:'cc'}
    
27.     ]
    0 y1 B" E2 F( Y
28.   },
    
29.    methods:{
    6 N4 n& u8 x6 w/ {
30.     tap : function(){
    1 K3 W$ P" ]+ Q* {( J- c& U$ J
31.      this.arr.unshift({a:'new'})
    
32.     }
    
33.    }
    $ Q6 s3 H6 M0 I- n( ^: _$ o
34. })
    
35. </script>

复制代码

( P0 M) h4 D! M, v, ?

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

* [6 b$ {* Q. u8 F$ E+ y5 j+ p! _+ q