Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   / ?. r5 ^8 c1 L3 `% Y2 W- X; E
2.   <p>{{ message }}</p>
   $ U. G2 Y8 x( u3 `! B- d
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   . }. {7 c6 N# L6 L/ U9 J& h
3. </div>
   
4.    
   
5. <script>
   4 T9 E, z# R$ w5 [7 Z' l: N- w
6. new Vue({
   
7.   el: '#app',
   + A. \5 h7 j7 m6 B' n. |* F: C, k
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   , L7 ~+ d9 t5 A) c2 W( M' Y  h9 F
10.   }
    0 q2 k  a# ?1 G' u! V' ^  B' X
11. })
    $ o& v0 w7 Y( D8 v/ j8 J# R: N
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">
   
3.   <br><br>
   / b8 S+ ^+ h" [: l! B( M
4.   <div v-bind:class="{'class1': class1}">
   / L/ L$ r( e0 R1 L6 Z( F$ K% a
5.     directiva v-bind:class
   1 u; F0 [6 C6 Z4 _+ s; T
6.   </div>
   
7. </div>
   7 c% s! v3 S& _! X" x1 q9 q6 U
8.    
   1 x( _7 s! Z9 v' Y! L
9. <script>
   1 y9 [, {# _8 z0 P, v
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    
13.       class1: false
    * ^: W+ ^) T$ S4 [& e
14.   }
    ) q2 B$ K4 u" g% r0 t
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   . z! g: B- L0 F
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   % k5 [' R, d  N3 w' c
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   0 F# l% u$ ]6 i" A9 @2 S
7.    
   ! ]  {! l7 ~0 E; w) x3 q* H# Z
8. <script>
   4 Q. O/ L! p2 u& D8 j, C
9. new Vue({
   . X0 s9 L4 h) i5 f5 i' U/ q
10.   el: '#app',
    $ M+ G$ L  H# V6 k( a. w9 q
11.   data: {
    
12.     ok: true,
      {" D/ F# P; L$ a7 m
13.     message: 'RUNOOB',
    5 b3 f+ C. \6 b; Q+ N: ^8 v
14.     id : 1
    
15.   }
    # L0 |) ?5 I0 L4 V5 k
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   / C3 f* W4 I- }. P
3. </div>
   
4.    
   0 {+ ?+ \2 I( W, [0 j
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   
10.   }
    
11. })
    
12. </script>

复制代码

( T2 U! |: l: O$ m

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

参数

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

1. <div id="app">
   ( x2 M2 J7 w& Z( _3 _# b
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   $ z9 z9 S2 ~- L5 F* y" B  D
4.    
   / c: ?: ]0 o0 n( K
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   $ m% |" i# q& x9 S) ?% D
9.     url: 'http://www.runoob.com'
   * w% o' |2 F; g9 t
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

8 a$ @% G( k; ^  m

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   
4. </div>
   
5. 
   " e+ Z0 [* _) C% M& k6 R3 ?
6. <div id="app2">
   " A4 ?& A5 @4 Y1 _
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   * w0 {' n4 B0 o8 T
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    & p4 I4 `0 @, {; H3 G- ?: p& ^
13. 
    - ~* R# F0 W  J4 g, {  ^
14. <script>
    ( Z5 a+ m! o" _5 C% R
15. new Vue({
    0 P+ _( w  Z& |2 M8 e# P/ w
16.   el: '#app',
    
17.   data: {
    ! l1 r* x' U  Z: l8 J
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    
21. new Vue({
    
22.   el: '#app2',
    . O& e# B+ V9 p
23.   data: {
    
24.     arr:[
    $ M9 g# h' e4 ^' d# Q5 R
25.      {a:'bb'},
    ) {" S0 ^2 w0 i( I
26.      {a:'cc'}
    
27.     ]
    
28.   },
    
29.    methods:{
    / @: ]0 W: H1 H  U
30.     tap : function(){
    6 w, _: N" w& ~. G0 O8 K& K/ t
31.      this.arr.unshift({a:'new'})
    ! s. Z+ L1 y3 e2 c) K
32.     }
    
33.    }
    5 ?5 d, s9 d1 p, J5 S5 e- J
34. })
    % x! u- x6 w  v/ c2 \5 F; J
35. </script>

复制代码

7 B- ?# E+ |5 F1 H

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

9 O' ~* d. s. o  [