Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   ( Q9 c; }  p& K. q* {, s
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: {
   
9.     message: '<h1>菜鸟教程</h1>'
   : g8 E. W4 o7 W/ h) L2 c
10.   }
    
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">
   / _1 {4 h: O3 J3 E
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    7 ?3 C4 l8 i# A5 a- p' Q
12.   data:{
    
13.       class1: false
    
14.   }
    
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   3 A( u; y! R# t$ |0 e' r
6. </div>
   ! K$ p4 k- E0 D+ D
7.    
   & [. Q; Q# i1 E  L. c5 D
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    $ d' P; Q% s* H4 {4 D+ ?  T
12.     ok: true,
    & x  D* J3 ^& P5 F+ j: X
13.     message: 'RUNOOB',
    
14.     id : 1
    ! E) Q5 r2 S0 i& z9 }* t
15.   }
    2 `6 D6 C0 E. g& Y; z- C  ~3 M. j
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   " u! H) ^  \7 q5 g
3. </div>
   
4.    
   ( l5 B7 j9 `3 {% x' I7 b5 C- g. }- C
5. <script>
   
6. new Vue({
   6 C5 y* N$ g' Y
7.   el: '#app',
   2 k/ `) d' R: A7 j/ e& t' [' c
8.   data: {
   ( Y4 y7 S( s% ~9 N! X
9.     seen: true
   
10.   }
    
11. })
    - X3 j- l3 a9 g4 i4 t1 O% `
12. </script>

复制代码

8 O3 J3 P1 g% `5 f& R2 ~9 C4 S7 ?

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   2 c4 ?+ u" U$ d7 D" P
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    + N9 J) ?8 ~. i0 H& Y" x6 b* G7 M
12. </script>

复制代码

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

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

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

复制代码

2 I4 m) }" m! V1 h/ @4 l

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   . v( m9 U. i( `% G( W( g- l8 i
3. 
   % r4 O5 A: h3 H- y
4. </div>
   
5. 
   
6. <div id="app2">
   ! p7 c; ]9 B$ U
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   9 k% I: a; x( N" |
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    5 T, h! M8 O: ~+ S6 O1 O2 M" a
12. 
    
13. 
    / b. r! O( A8 ]6 w7 M; L0 |
14. <script>
    
15. new Vue({
    ; V/ K1 R# T( V" M- U2 \4 J
16.   el: '#app',
    ! `$ A& b! |5 E
17.   data: {
    3 L) b& X4 X4 Q, ]0 S' P% V
18.     url: 'http://www.cncml.com'
    4 @; u3 ^5 b/ \! o% q) V' p6 E
19.   }
    0 y- H9 |3 Y' j, @" W
20. })
    7 ?% H$ B* L9 q. z
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    . Q, ?& X! g8 x) j; W7 T
24.     arr:[
    - o; U2 N# l! F& Z& E" F+ m( a
25.      {a:'bb'},
    
26.      {a:'cc'}
    0 s! p3 ~& k1 @$ F+ C0 o; Q2 H4 R( Y
27.     ]
    & B8 s3 F! O& a! o! b
28.   },
    8 x0 p; n& x* r& q$ H4 H, s5 L; T: Q
29.    methods:{
    
30.     tap : function(){
    + a" z% a! Y& Y) O: [2 v/ h6 K- {
31.      this.arr.unshift({a:'new'})
    
32.     }
    # ?8 o/ e+ G8 v7 Y. y$ g
33.    }
    
34. })
    5 G1 M- D: i" r7 M, v
35. </script>

复制代码

  h1 x3 s# o3 P; A

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