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">
   & M. r3 c9 @4 ?% [
2.     <div v-html="message"></div>
   
3. </div>
   ! z' S, z; [, |3 z% M+ ^# `) p! H6 x
4.    
   
5. <script>
   
6. new Vue({
   ) [/ K$ B! k: z5 i4 n
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    ! F* h  M: _4 |
12. </script>

复制代码

属性

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

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

1. <div id="app">
   $ A- ~: M) r$ @, ~% e
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   ( @  \8 R- k# I( ?" S2 U% {
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   ) p8 H. u' A' V9 v+ z' P+ T
8.    
   
9. <script>
   
10. new Vue({
    1 P2 b. e" q! q
11.     el: '#app',
    $ A+ \* ], m6 ?2 k4 t
12.   data:{
    9 P6 b7 U, ]1 Y% }; Y* |, c
13.       class1: false
    1 I0 s, }0 U4 ]( \  P( X2 C
14.   }
    9 G5 g: Q( o3 d6 P$ ?  l4 W
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   8 r) A. d, K$ e9 K! _4 U+ K4 K+ M
2.     {{5+5}}<br>
   # P3 m& e; W# K: M" a! p
3.     {{ ok ? 'YES' : 'NO' }}<br>
   " y: v% B$ g- z' K0 G& \' {: z
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   0 _* Q, t4 A  Y0 i! `! z9 D- }
8. <script>
   7 L* M% |! ~' m9 g. u
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    , E# ?8 O! u( _2 y. |, o
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    * A# X  L; r$ O+ w' ~$ a& G
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   ; n5 [! w  h" }/ F- y' e; q: K
2.     <p v-if="seen">现在你看到我了</p>
   7 D0 z3 v5 ~' c! g/ x3 C6 e5 A: Y
3. </div>
   
4.    
   . ?4 E  M/ R' `/ s- Q$ Y- {
5. <script>
   ' e1 j' Q8 }) z$ G
6. new Vue({
   
7.   el: '#app',
   % G9 m& O) _# |5 P8 X0 d6 S
8.   data: {
   : V6 b& v1 `8 ^+ T$ U
9.     seen: true
   
10.   }
    " V/ x. {* F( m* y
11. })
    5 A9 i) O) D* i4 o# T; [
12. </script>

复制代码

, x( r( w  n3 h) _

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

参数

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

1. <div id="app">
   8 s6 }4 {9 y0 W0 y8 i
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   2 U/ T5 G# t6 j: c$ g( j6 [
4.    
   
5. <script>
   
6. new Vue({
   ( G/ p  q8 b( ~4 T7 d1 e
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

/ f% y1 d8 V0 ~  `3 i  d7 v+ B

1. <div id="app">
   $ U7 Z2 \7 b7 [0 R+ a
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   , z1 P9 X' ^2 V( _# G7 A
3. 
   
4. </div>
   4 p- c* ~8 z) [  p+ |+ z
5. 
   4 G; Y1 x7 ]+ l  l1 c
6. <div id="app2">
   1 Q+ z; x' X: e- m' L/ A
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    7 ^$ E+ c/ x/ E& _
12. 
    
13. 
    9 H% O1 S8 o2 W1 J. X
14. <script>
    / l! X" G- p- d$ G7 E
15. new Vue({
    ) Z3 v% F2 f6 \0 q* J$ o
16.   el: '#app',
    / k7 d+ b8 j  t2 F
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    
21. new Vue({
    - `" V9 E9 \  }- {1 Y% ?$ p* G
22.   el: '#app2',
    ( N: u* w" \; s0 G- ^  Z3 D5 h
23.   data: {
    - ]4 ]5 }0 o4 U$ J/ W% ~1 }( P3 H
24.     arr:[
    
25.      {a:'bb'},
    . F6 d- ^- X. {1 S3 r* ]4 B/ Q
26.      {a:'cc'}
    
27.     ]
    + q9 _& ~5 ?4 `6 C4 m
28.   },
    ' t4 i/ Y# y2 N+ u( f
29.    methods:{
    : d1 I6 ^; m: d5 a# \4 S& O2 U  n
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    1 I; z1 |: `0 r0 g
32.     }
    
33.    }
    
34. })
    ! Z/ [) l# n7 b2 J7 z; v* W
35. </script>

复制代码

0 A- D9 Z  k$ _! ^* Z5 ~; \7 d

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

% b. N7 _5 B% H8 b( G8 n$ a% j3 Z% x