Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
     }* A6 s0 a* q  q
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   $ t" v0 A# U& p8 ^* M! W+ x( G
2.     <div v-html="message"></div>
   
3. </div>
   2 F$ m, z2 ]3 T/ k+ r
4.    
   
5. <script>
   % j9 N: }6 c( Q0 G
6. new Vue({
   , y2 g5 `! B6 j+ ~
7.   el: '#app',
   
8.   data: {
   1 S8 l" Y% Y* ~% [2 ]0 z( @' G
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    % W+ a3 I: @' q( V% D* d" l
11. })
      J* u# ~$ b# M3 y# _, t! w3 G
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">
   ; }# J( k. {  D" }0 X  t
3.   <br><br>
   / P" \/ `( G6 d* W, z/ y
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   / Q3 G$ j: N/ o; d. J! h4 D
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   
10. new Vue({
    - o/ G( c) n" Y" C3 H; x
11.     el: '#app',
    / P9 l  q- ^5 W6 [
12.   data:{
    
13.       class1: false
    
14.   }
    / W# I( l6 O3 F" T
15. });
    9 N+ j9 }+ w! p( g7 i
16. </script>

复制代码

表达式

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

1. <div id="app">
   $ U8 b4 c! x, B# I8 M
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   " K' ?) A% o1 _- B  L, h% I! G
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   " V. i; F2 {" c. b+ W
8. <script>
   $ \- G4 i* L7 Z6 _! j% \  k
9. new Vue({
   $ o6 r1 S( K2 w+ J5 I% e2 O
10.   el: '#app',
    
11.   data: {
    . [; M0 Z) U- p* r
12.     ok: true,
    - v- H& @( j8 J: W
13.     message: 'RUNOOB',
    * O. U% H  y; g  U
14.     id : 1
    
15.   }
    : }; b, p) W  c/ n/ R3 i, R
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   
5. <script>
   
6. new Vue({
   / Y% c4 p" a: t4 S* u$ I' f
7.   el: '#app',
   6 d4 J. C5 S- [( y, T
8.   data: {
   
9.     seen: true
   ( q$ N8 k& D/ y, `- J4 b  r1 j& o# b
10.   }
    
11. })
    $ U! ^$ b6 G8 I: V' N. c
12. </script>

复制代码

" q. g1 J/ T8 M, a5 T% S

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

参数

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

1. <div id="app">
   " @- I2 Y5 b' y& F3 P# l
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   1 _- @3 h$ W7 s( W
3. </div>
   ( c% c. T2 s1 h  r( s# ~; |3 J8 k
4.    
   
5. <script>
   % e  K( c5 v$ N2 ?8 j
6. new Vue({
   ! c3 F7 [/ s3 F: M# M& _
7.   el: '#app',
   
8.   data: {
     T% W( N: M) C- t
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

) Q0 H% |3 d% f. g, }4 c4 G6 y

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   , y  I* `1 l3 E: v. N8 }5 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. 
    8 f4 M/ Y7 b! |+ z8 P) w" b" Q
13. 
    
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    ( k3 S9 a6 ?+ `, k
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    # X$ L% t, [3 q1 G; L* I4 b- ]
21. new Vue({
    
22.   el: '#app2',
    & o4 N; g9 }$ p8 ?; h2 ]2 P/ f( O
23.   data: {
    / E$ x% {$ }$ ]
24.     arr:[
    
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    ' H  ~* I/ o5 ^; j# }6 R& n3 V
29.    methods:{
    
30.     tap : function(){
    ; D) ?$ d* n) H+ N& h+ Q
31.      this.arr.unshift({a:'new'})
    , w: Q. `: N8 M
32.     }
    4 X/ v7 ~3 s: i) n* }
33.    }
    
34. })
    
35. </script>

复制代码

# \% P3 G+ F: w+ e, ]0 Y2 z

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

9 U) z( R8 s* L, x- [