cncml手绘网

标题: Vue.js 模板语法 [打印本页]

---

作者: admin    时间: 2018-7-1 23:16
标题: Vue.js 模板语法
Vue.js 模板语法

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

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

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

---

插值文本

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

1. <div id="app">
   9 a  m% o4 C7 Q. N
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   3 W& c$ _7 ?! f; U& [  H1 I
2.     <div v-html="message"></div>
   
3. </div>
   
4.    
   
5. <script>
   ( ?- T+ Y2 E* R" W& ~6 C9 L
6. new Vue({
   ( R; X& L) w( N3 b" m
7.   el: '#app',
   6 c1 `- Y* {/ W. j3 M
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    
11. })
    + n& |5 e# P) `1 V' t9 w* |
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">
   6 n# U: B! d& O6 F
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   1 {/ Y  y6 a" u7 |' U
5.     directiva v-bind:class
   
6.   </div>
   , V. l8 l  Z3 W7 F. Q% p$ J2 F, W' [
7. </div>
   
8.    
   
9. <script>
   6 j! e+ k5 n" q' S7 O  M
10. new Vue({
    
11.     el: '#app',
    8 I) c% \9 |6 x) N. U& E$ M. Z
12.   data:{
    % E2 w. V5 a* K& x4 @
13.       class1: false
    ) f7 S) }3 `6 Q4 B3 Q- B$ P1 Z) K
14.   }
    : D- T% X7 {. p  l+ Q
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   - ^. S3 d; p, w3 L- L( L
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   ; @# o1 o0 ?1 C9 Q# m/ ]
6. </div>
   
7.    
   
8. <script>
   
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    & ]& l/ W/ S" g  o7 U9 X- F* N
12.     ok: true,
    
13.     message: 'RUNOOB',
    1 ]: e  Q& ~2 \) f
14.     id : 1
    
15.   }
    
16. })
    - O" `4 T, ^& Y5 |) W. l  R
17. </script>

复制代码

指令

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

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

1. <div id="app">
   8 Q3 P% a; v+ }
2.     <p v-if="seen">现在你看到我了</p>
   ) Z6 d& U& _' \1 m, g
3. </div>
   ( ]' H! Q. h( `6 [; G% i
4.    
   & }  Z& A7 ~  o, e$ U
5. <script>
   " ?1 l6 X1 X0 Q% i
6. new Vue({
   $ }. w% G/ G' x
7.   el: '#app',
   1 @  H7 F- X9 b9 I% _8 M
8.   data: {
   
9.     seen: true
   4 T: t, e% O2 \% H: S
10.   }
    / f- \( |5 O% h
11. })
    
12. </script>

复制代码

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

参数

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

1. <div id="app">
   1 [6 H7 x# P: w' L& x
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   2 ]2 X4 H# C* f# q% X
4.    
   ( }& m2 x4 |, U( b3 ~
5. <script>
   
6. new Vue({
   1 _9 ~; u3 \2 P9 J5 P3 C
7.   el: '#app',
   9 Q$ z5 n  i5 Y- v
8.   data: {
   ' h, g4 q" F$ o6 a- w; m0 `
9.     url: 'http://www.runoob.com'
   
10.   }
    9 w: u7 p. U! \9 U! _
11. })
    
12. </script>

复制代码

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

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

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

复制代码

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   9 `9 G# s. H  P, C) ~" u
4. </div>
   
5. 
   ; y- \* B( c3 T" |, a9 j# U
6. <div id="app2">
   3 |. |0 I4 N7 z& H4 ]3 \) _
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    6 l9 O% L3 e9 G0 U4 _9 G
11. </div>
    
12. 
    ! d9 e7 |% `1 q# X, Y
13. 
    
14. <script>
    ( E9 I7 r1 W; Z+ A1 m$ X6 ]
15. new Vue({
    + B1 b( ~6 u0 h6 J: V% n4 o" }
16.   el: '#app',
    
17.   data: {
    , h$ Z/ u, g1 a
18.     url: 'http://www.cncml.com'
    ( @4 T6 O! ~  [* t5 o5 _
19.   }
    
20. })
    
21. new Vue({
    0 s- E& O' c8 A' S5 C& G, f
22.   el: '#app2',
    ( x) ]0 c. \" S! n
23.   data: {
    7 _9 `3 N+ {: A$ k8 V0 ], ]( {
24.     arr:[
    $ W6 e. K. J( H$ E
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    
29.    methods:{
    1 i* A* X: `) ?% V' w
30.     tap : function(){
    / ?- w# m/ g# O+ m6 p
31.      this.arr.unshift({a:'new'})
    
32.     }
    ( i' X6 R4 m+ F
33.    }
    5 n6 i: b6 H4 y9 \1 e7 ^
34. })
    . T  v# X& o6 W
35. </script>

复制代码

; w% B8 `3 z5 |3 I/ a% q; C

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

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

1. <form v-on:submit.prevent="onSubmit"></form>

复制代码

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

1. <div id="app">
   8 z9 S3 H* B. J& |
2.     <p>{{ message }}</p>
   
3.     <input v-model="message">
   ) J9 A9 J$ `( A" K+ L/ p* n
4. </div>
   6 I. q! f) D1 R/ T' j7 E) N
5.    
   ; U" p6 T2 f. \
6. <script>
   ( @- F  W; f. Q! t' q
7. new Vue({
   % H6 e' n/ C* Q( A, p
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    
11.   }
    
12. })
    
13. </script>

复制代码

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作：

1. <div id="app">
   
2.     <p>{{ message }}</p>
   
3.     <button v-on:click="reverseMessage">反转字符串</button>
   ' O1 t* }# k& U) S* K6 e) n
4. </div>
   7 x1 ^0 l- q( R. q( [! }$ f
5.    
   
6. <script>
   
7. new Vue({
   
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    # \2 m8 }0 B: L- z2 u
11.   },
    . u: |3 `5 L- K
12.   methods: {
    
13.     reverseMessage: function () {
    : D% E# L' A% c# k" M7 |/ g
14.       this.message = this.message.split('').reverse().join('')
    
15.     }
    ; S3 N) \+ }- u" i" `. v; ?2 h/ X
16.   }
    
17. })
    
18. </script>

复制代码

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

1. <!-- 在两个大括号中 -->
   
2. {{ message | capitalize }}
   % B0 T% \( }( j+ I6 R7 L( l
3. 
   0 f9 N" |! U6 m0 l% t
4. <!-- 在 v-bind 指令中 -->
   3 T3 L, }+ `, c, X3 `. a* u$ y/ i7 d
5. <div v-bind:id="rawId | formatId"></div>

复制代码

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

1. <div id="app">
   
2.   {{ message | capitalize }}
   ' g6 V5 w5 y/ u% V  A
3. </div>
   8 d& I1 Q( ?$ S) |% x' t) ^3 s1 y
4.    
   5 R+ R; G6 [+ c8 M9 c+ l) {
5. <script>
   
6. new Vue({
   2 T" K- Q7 p( k; n( J1 V
7.   el: '#app',
   
8.   data: {
   ; v- e9 x) V: t) e% _$ y
9.     message: 'runoob'
   
10.   },
    . X" C+ W5 z! j
11.   filters: {
    5 B4 w7 T  ~8 _# V9 k+ ^) q1 e
12.     capitalize: function (value) {
    
13.       if (!value) return ''
    0 t4 v* f' ~# P, k4 |/ r" \% H, L9 L
14.       value = value.toString()
    7 E8 s3 S% d( W- F* \3 E- W
15.       return value.charAt(0).toUpperCase() + value.slice(1)
    $ a" g8 K6 a  G3 ]: q( G. g
16.     }
    " V  G3 ^$ ], N* X# O
17.   }
    , c) u0 U! @% u( D1 W9 R
18. })
    
19. </script>

复制代码

过滤器可以串联：

1. {{ message | filterA | filterB }}

复制代码

过滤器是 JavaScript 函数，因此可以接受参数：

1. {{ message | filterA('arg1', arg2) }}

复制代码

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

6 x" n+ R; H2 y& I
缩写v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

1. <!-- 完整语法 -->
   0 c+ E/ S* ?/ y( E: F0 M2 c
2. <a v-bind:href="url"></a>
   2 V6 q9 b  k1 r3 `* X, R3 R  H$ _
3. <!-- 缩写 -->
   ) o1 h: I0 D" N+ ~0 W7 t; e
4. <a :href="url"></a>

复制代码

v-on 缩写

1. <!-- 完整语法 -->
   9 c8 ?, K/ Q# e& l
2. <a v-on:click="doSomething"></a>
   # u. T: {- @" M8 I6 i  k
3. <!-- 缩写 -->
   % R* h, K+ }4 s& ^; ?/ u- n" ~+ A
4. <a @click="doSomething"></a>

复制代码

笔记
8 @# ?7 [+ s  j给元素绑定href时可以也绑一个target，新窗口打开页面。

1. new Vue({
   
2.   el: '#app',
   
3.   data: {
   
4.     url: 'http://www.runoob.com',
   ( h/ E9 _1 N7 I: j4 q4 O6 B
5.     target:'_blank'
   
6.   }
   
7. })

复制代码

当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。

Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新

3 c3 f6 h- L: p5 F  |! u7 h! z3 `

这里本来 food 对象是没有 count 属性的，我们要给其添加 count 属性就必须使用 Vue.set 方法，而不能写成 this.food.count = 1

0 \/ w7 {- J7 Q+ a# h  d! N" m
! W2 X8 C8 _+ r' [
# p- v5 q5 [+ E/ h3 R3 H9 a4 {



! A3 P" y( K9 c3 s/ a5 P

---

欢迎光临 cncml手绘网 (http://bbs.cncml.com/)

Powered by Discuz! X3.2