Vue.js 模板语法

admin

Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   
2.   <p>{{ message }}</p>
   4 p8 y1 T! g  z# Q+ R8 p
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   
3. </div>
   2 m; i% c+ P) r: s9 t6 B
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   : ~( W! x6 t) O+ v4 F) y# G
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   0 x: [4 t  x8 S
10.   }
    
11. })
    : c" m5 h, A2 @! R, m
12. </script>

复制代码

属性

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

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

1. <div id="app">
   $ k! |3 [5 s  ]; E5 ]8 r
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   7 [. N" T0 O: T+ n  X
4.   <div v-bind:class="{'class1': class1}">
   ' @( a$ z- [" t4 [' t# y+ b2 @
5.     directiva v-bind:class
   
6.   </div>
   
7. </div>
   
8.    
   
9. <script>
   ( N+ i$ B8 p) p+ R$ L& `8 u
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    2 ?0 _/ }! |3 I2 a0 ^* c
13.       class1: false
    
14.   }
    
15. });
    4 a7 Q& C$ b- L7 O& ^
16. </script>

复制代码

表达式

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

1. <div id="app">
   & h8 D# _2 I+ n8 u+ E, J  N& K5 ~
2.     {{5+5}}<br>
   7 A- ]( ]; ~5 ]- C
3.     {{ ok ? 'YES' : 'NO' }}<br>
   - v8 X3 \6 p2 c- H) x+ u
4.     {{ message.split('').reverse().join('') }}
   8 @3 S( d) \  f  E
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   
8. <script>
   
9. new Vue({
   & i; {2 `, X  Z2 K0 D6 ^1 d& \2 F
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    
13.     message: 'RUNOOB',
    ( X$ `1 T! D9 f% H9 H9 Z
14.     id : 1
    - l: E$ j3 d3 C6 B# E
15.   }
    
16. })
    5 b2 `: U: f& c. v/ a9 x
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     seen: true
   ' S; F- |: x6 b* Q6 N
10.   }
    . Z3 u% _- G7 R8 l) I# G
11. })
    
12. </script>

复制代码

& c& f" o* x' g" ?+ Z  X# h3 W# u4 {

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

参数

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

1. <div id="app">
   8 A8 m* r- }) x; v( ^. n; H3 T+ r
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   5 n# B; L# l+ n2 Q8 L6 \7 h
4.    
   
5. <script>
   
6. new Vue({
   ; l9 Q6 g5 B6 W7 S
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    : w) D6 F' a4 `' i& P: {, N
11. })
    
12. </script>

复制代码

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

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

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

复制代码

: {- N1 h- O( B; s0 S: |

1. <div id="app">
   7 z$ D* n! e. B9 g) n4 G: A# Q
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   ; q3 E9 }: {6 i! R+ r
4. </div>
   5 i3 H4 f; w8 Q" C; Y; r  I. j
5. 
   5 W- s3 _6 t: N1 }& P' E
6. <div id="app2">
   ' L! {1 G- A- c# Y
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   ) I- Z  ~: M3 l5 h: v
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    - @0 u. A+ o1 }8 l
12. 
    
13. 
    # Y  w& s0 P+ K
14. <script>
    ! w/ }- d  {4 A; h" w
15. new Vue({
    , Z( }4 K# w, G% f; H$ S2 y
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    : a3 D6 v* P; e  [2 V5 \' q
20. })
    " D! C) E+ y2 z) e( [* P0 e
21. new Vue({
    
22.   el: '#app2',
    
23.   data: {
    $ K! J/ a; Q8 _  j8 R
24.     arr:[
    
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    4 f* p) C4 t, w6 m7 N  N0 {+ ~
29.    methods:{
    ' q2 T( k% {, S! S3 `, ?5 m
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    
32.     }
    
33.    }
    / }+ q; I$ P  ~8 P* _- u
34. })
    0 X+ V# p, f/ R2 n9 S& a, }
35. </script>

复制代码

" M) v5 K  g3 \

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

# M/ f& N1 o" ^# ^, P6 K: w