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">
   
2.   <p>{{ message }}</p>
   9 B/ x4 g# P. \' v6 n
3. </div>

复制代码

Html

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

1. <div id="app">
   / m- x1 p) T/ @! _0 `! o1 f
2.     <div v-html="message"></div>
   " d/ S4 k8 t, o
3. </div>
   . t! ^9 _( X9 c5 q, q6 m
4.    
   
5. <script>
   + n. |0 F4 R5 J( O* l/ \
6. new Vue({
   6 _+ O* m4 Y5 A4 u
7.   el: '#app',
   
8.   data: {
   0 ^9 R- s! a+ N
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    ! Q8 g3 y4 Y  T
11. })
    # O6 L+ e) |) n
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">
   
3.   <br><br>
   3 {- W8 _0 }, I
4.   <div v-bind:class="{'class1': class1}">
   ( H7 h+ F1 v4 _  s
5.     directiva v-bind:class
   
6.   </div>
   + M# @1 C# H3 J1 y* N9 _8 l
7. </div>
   
8.    
   
9. <script>
   # L  p+ D" l7 E) \5 K) p5 p
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    
13.       class1: false
    4 {4 V" Q: ^( r& m5 A
14.   }
    & L) }7 Q% Y. P* n( ?, ?
15. });
    / S* v1 `5 M9 _! I6 _/ G- P" G
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   & w6 {4 T/ E, z! c- j# Y
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   $ O. ]% w  Z! J( q+ L, f
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   / [9 t( f$ d# f
7.    
   
8. <script>
   
9. new Vue({
   ; G! F# `1 s8 A* `, j9 z, i- Z
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    ' d' A' u- X" K4 i& _# O/ B
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    
16. })
    . m  m) l0 J# N8 C- m. ?7 r9 T
17. </script>

复制代码

指令

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

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

1. <div id="app">
   ; [2 N& L/ K7 E' l# c
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   ( f' U! S: B5 X# C6 K3 ~
5. <script>
     `9 j9 I9 c: ]/ ~4 C
6. new Vue({
   6 a0 X* o7 f5 k4 o
7.   el: '#app',
   - D% Q0 V  g% v1 v
8.   data: {
   
9.     seen: true
   
10.   }
    
11. })
    
12. </script>

复制代码

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

参数

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

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   
4.    
   - p) v2 b* H3 l' ]+ h+ y
5. <script>
   7 u# x$ J  Y* T/ u- H4 y
6. new Vue({
   
7.   el: '#app',
   : G: v' ~# ^. z) _  ~
8.   data: {
   
9.     url: 'http://www.runoob.com'
   . k; _9 H& P' W* n: u+ j& d
10.   }
    4 x6 j4 C0 x5 @& p1 m3 e
11. })
    
12. </script>

复制代码

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

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

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

复制代码

' F% ~3 F, V( K# e$ b! T

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   . j  ^0 Q2 R8 b5 h6 L, x4 K# v
4. </div>
   ; V0 R' I/ y  k# Z
5. 
   ; V- M5 o- B2 [/ ^
6. <div id="app2">
   
7.    <p v-for="val in arr">
   " b* I0 Y" u2 Y! M# |
8.     {{val.a}}
   ; v9 o) d6 }& Y1 S4 d: {8 |
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    
13. 
    
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    $ l. d# m4 o. e6 E
17.   data: {
    * T* y  f8 L2 v  F+ y
18.     url: 'http://www.cncml.com'
    3 ~% J  |6 H/ `, A6 a' `6 C
19.   }
    ( m2 C$ F9 }5 K* }6 l" ]
20. })
    
21. new Vue({
    * I4 s* s& Q; N: S: U' e
22.   el: '#app2',
    % A* d$ k) A1 n
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    + |+ |# G* t0 A" C$ O
28.   },
    " p) `0 _% j7 d5 u/ F0 B
29.    methods:{
    
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    & m1 D& \8 L" V5 o" i1 H1 u
32.     }
    
33.    }
    
34. })
    
35. </script>

复制代码

8 o0 h5 f7 `# ~% P: D* O: P

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

0 K% R5 v% s+ @8 w4 J' u' e  ~修饰符

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

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

复制代码

0 [" w6 Y9 _' q, z# `* f9 [* S' W用户输入

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

1. <div id="app">
   9 ]4 ?: ^9 ^% B; K8 w
2.     <p>{{ message }}</p>
   ) x8 P9 R& N! ]2 h6 ]5 A- j' e, Z
3.     <input v-model="message">
   
4. </div>
   
5.    
   / F; h7 _+ T# e5 c/ M' g. e
6. <script>
   
7. new Vue({
   
8.   el: '#app',
   ) L& u: }% H& @
9.   data: {
   " n% X. R* D1 O% }6 }# m
10.     message: 'Runoob!'
    % S4 n& Q" T  H& q- {5 X1 f- g) I
11.   }
    
12. })
    
13. </script>

复制代码

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

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

1. <div id="app">
   
2.     <p>{{ message }}</p>
   
3.     <button v-on:click="reverseMessage">反转字符串</button>
     l5 y/ M4 G) R) i: l9 \6 f( q; @3 ?. ?
4. </div>
   2 v/ n) e' h6 l' b
5.    
   7 `6 |! Q7 X1 W6 F, @
6. <script>
   
7. new Vue({
   $ y' d  F7 E- ]6 w: s  u
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    
11.   },
    
12.   methods: {
    1 q! r# T* W' }
13.     reverseMessage: function () {
    
14.       this.message = this.message.split('').reverse().join('')
    3 |! Q: H$ j# m* e2 }* J; @2 Y
15.     }
    
16.   }
    
17. })
    - _: s1 E" z& h: r8 ^
18. </script>

复制代码

2 e5 k! Q; G" V0 `/ h过滤器

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

1. <!-- 在两个大括号中 -->
   
2. {{ message | capitalize }}
   
3. 
   
4. <!-- 在 v-bind 指令中 -->
   " ]0 P. U# V5 ~+ i: l$ a* w8 x
5. <div v-bind:id="rawId | formatId"></div>

复制代码

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

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

1. <div id="app">
   5 m* p% U+ x/ ^0 {) p
2.   {{ message | capitalize }}
   
3. </div>
   
4.    
   . a% ^8 Y, {' Q2 r& |% k  T
5. <script>
     ]- C5 X: h' o6 k& H
6. new Vue({
   : G/ ^6 ]) k/ @( E3 g
7.   el: '#app',
   
8.   data: {
   * g, w0 M) F3 R* L0 g9 S
9.     message: 'runoob'
     i/ S9 U$ o0 }0 W" L' ~# d6 k
10.   },
    
11.   filters: {
    
12.     capitalize: function (value) {
    
13.       if (!value) return ''
    
14.       value = value.toString()
    
15.       return value.charAt(0).toUpperCase() + value.slice(1)
    
16.     }
    
17.   }
    
18. })
    
19. </script>

复制代码

过滤器可以串联：

1. {{ message | filterA | filterB }}

复制代码

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

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

复制代码

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

! e' h+ m; {7 e' @- B2 M$ L
缩写v-bind 缩写

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

1. <!-- 完整语法 -->
   
2. <a v-bind:href="url"></a>
   ) ]* ~" M5 J2 P
3. <!-- 缩写 -->
   % [2 B% U  {$ Y- E
4. <a :href="url"></a>

复制代码

v-on 缩写

1. <!-- 完整语法 -->
   
2. <a v-on:click="doSomething"></a>
   6 u# g" e+ q; {5 a% y9 z; f
3. <!-- 缩写 -->
   
4. <a @click="doSomething"></a>

复制代码

笔记
给元素绑定href时可以也绑一个target，新窗口打开页面。

1. new Vue({
   
2.   el: '#app',
     n! d/ P% ]' r7 t" m! @8 @8 |
3.   data: {
   : ?! P' ]5 A/ G* a% h7 w& p) w4 o
4.     url: 'http://www.runoob.com',
   
5.     target:'_blank'
   
6.   }
   
7. })

复制代码

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

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

8 O: k' g& y9 J5 R: b

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

9 q2 v& r/ g3 b: K" U2 R
& |! l7 s3 V4 p- Y5 n
& J" r7 ]9 R" V1 h1 S, {
& m9 L9 G" t; X# [( |: V

0 f! P. F) t0 j9 A4 o

& A' q2 `1 M) d; C

---

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

Powered by Discuz! X3.2