Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   , G' A  B8 f" u  W# g6 h, \; ?. @
2.     <div v-html="message"></div>
   3 G( |  h" a8 b, J$ V0 z* x
3. </div>
     n. C, e" c* k+ b
4.    
   2 {. C, F: t9 I# ]
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   + p( }# i) j3 R) p
9.     message: '<h1>菜鸟教程</h1>'
   & `! F0 Q8 I6 v- ~- P
10.   }
    
11. })
    : {9 J. Y" W( e$ Q  Z) U& A7 j* Y
12. </script>

复制代码

属性

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

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

1. <div id="app">
   ! [, x/ B1 Z  k6 Y* O( V# j
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   + W) c2 T) Z8 Z
3.   <br><br>
   3 ]7 g& P! |% W# `3 Z
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   ( }3 s4 d4 l; z' a6 z
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    # V( s: R* @$ j: z' V
13.       class1: false
    9 b* {2 v/ N- H8 C6 h
14.   }
    
15. });
    1 J$ d/ P) v- ?* @* E0 w
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   % m, \3 W6 J1 u5 g4 ^6 x
4.     {{ message.split('').reverse().join('') }}
   ) i5 Q0 G. |6 H& X; }' z2 @
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   . I8 ~# X3 G9 {4 }
6. </div>
   . E4 @. ?% W" h1 y, x+ q
7.    
   
8. <script>
   
9. new Vue({
   : o  T- B. n$ A; c, x- \
10.   el: '#app',
    2 T5 A# ~2 M& `, I
11.   data: {
    
12.     ok: true,
    8 c1 ]$ N5 o  t) j( t+ T0 _" }
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    
16. })
    1 {- K( l( ~" f
17. </script>

复制代码

指令

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

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

1. <div id="app">
   * ]0 D2 q' u* c
2.     <p v-if="seen">现在你看到我了</p>
   ; s5 m# Q( N% S3 q
3. </div>
   
4.    
   6 N% M4 P2 i% K$ b0 c
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   : r2 ]- ?) ]# h; [
8.   data: {
   
9.     seen: true
   # l6 l7 C: W# d% [; r2 W- R
10.   }
    
11. })
      I* D( `0 K. i
12. </script>

复制代码

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
     g, ]! t2 Q4 M
3. </div>
   
4.    
   - J2 P  j& b8 ^- }' Y) e' R
5. <script>
   
6. new Vue({
   % I6 t6 G$ U6 z) C
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    5 d+ C% T! \  M* M$ q4 `; m7 N
11. })
    ' K* A$ k. u* z9 R. p5 T1 e2 y
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   4 A( w  U: O7 q1 \$ d7 C% w
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   5 K8 V: x: |  F4 w% Q
3. 
   + l8 _8 o7 s0 y& C* i- d
4. </div>
   1 w1 N# l4 b$ `1 R+ q
5. 
   3 }" l- Y1 o# [& \6 d$ O/ @1 N
6. <div id="app2">
   
7.    <p v-for="val in arr">
   ( x" X  ^) L* J8 U1 `! X$ M
8.     {{val.a}}
   
9.    </p>
   & i9 J1 q; R' l
10.    <a  v-on:click="tap">点我</a>
    " g+ W3 w; S4 F0 e& p7 i+ J
11. </div>
    
12. 
    ( a& ?4 z0 S" W5 ~% T5 o
13. 
    $ `6 a% A9 W" }
14. <script>
    # B( ]' b" a3 |8 l* H" t
15. new Vue({
    : f% D; x) e" o
16.   el: '#app',
    
17.   data: {
    , O; D! W1 K( y: |) _- K7 ?1 j
18.     url: 'http://www.cncml.com'
    
19.   }
    - z- c& l& o3 ^! B
20. })
    % H! N# \( }4 X/ H! a: s3 @; Y9 w
21. new Vue({
    
22.   el: '#app2',
    ) M6 O8 ~3 B& i
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    - ~% _1 C% o, }+ m, Z' U
26.      {a:'cc'}
    8 e, I" L2 P) ~/ B8 j  H# T
27.     ]
    
28.   },
    : H* P* t$ g! s% C8 K2 `
29.    methods:{
    7 ]2 X# M' j6 I; `' T( ~
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    6 k. j7 X* m& P  c. i; _' ?  Q
32.     }
    
33.    }
    7 I6 u6 p% Q! R+ w7 R0 B  W9 s1 U- [
34. })
    
35. </script>

复制代码

. r/ O0 E' T2 l: c8 m% `: m

# d8 A7 j" |8 ]5 P6 c. G# d" O# ^

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

# H3 }' l* f/ \- z8 e' _