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>
   ( g2 }. n: k1 n' u" r1 u- u
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   
3. </div>
   6 Y) z/ q  ~0 z/ {, K- E
4.    
     c- z( R/ n6 _% {
5. <script>
   
6. new Vue({
   # O; Z6 W# A1 r3 A) K
7.   el: '#app',
   ( y4 [9 {; V  y, c
8.   data: {
   6 Z+ E; @. \" H, ?. h; q7 w
9.     message: '<h1>菜鸟教程</h1>'
   ' S$ p: I0 `2 n" t  d3 ]4 V
10.   }
    ; l) }9 G( s1 k# w( |: k7 U
11. })
    
12. </script>

复制代码

属性

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

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

1. <div id="app">
   " B  w# ?1 ?' a' g
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   $ r# K) q* O3 @" W: A: s) m  T- |' i
5.     directiva v-bind:class
   $ h$ T, s0 s+ d8 Y9 Y/ z/ j
6.   </div>
   ; w. `5 g! J: l# z3 G  Z% G7 y
7. </div>
   
8.    
   4 `$ _' f7 z) |/ m3 t2 Y
9. <script>
   4 ]  F, h' k7 m; V
10. new Vue({
    ) Q! ^8 i6 ~9 E# _9 [9 O, Z
11.     el: '#app',
    4 N( m& Z- u$ r. C+ e. Y
12.   data:{
    
13.       class1: false
    
14.   }
    $ {! I! a  w1 P. X- y8 l
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   ; H6 |+ j! s. P( W& @& J
2.     {{5+5}}<br>
   4 o( {( `: b$ U+ w' f% R
3.     {{ ok ? 'YES' : 'NO' }}<br>
   0 n% B1 h* q) ?% X) t8 V" B8 v
4.     {{ message.split('').reverse().join('') }}
   8 m+ i  h: D# t4 a
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
     O5 ~8 \' H- f( w
7.    
   - x( B9 x/ [; o- z6 {& k
8. <script>
   ) |1 f0 [9 V7 F1 n2 p. T, X3 f! C
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    ; [2 T4 e" I, _* N% z9 x
13.     message: 'RUNOOB',
    
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   & i$ U* g  @2 m4 D: D# {
3. </div>
   , F/ S2 W) E- Q6 S
4.    
   
5. <script>
   / _; w' J# P7 k, R  G: X
6. new Vue({
   
7.   el: '#app',
   ( n( \4 Y: T1 o( ]
8.   data: {
   
9.     seen: true
   
10.   }
    
11. })
    , a9 k* h$ q9 T6 ?) E) |
12. </script>

复制代码

) Z7 D' V) U. G

这里， 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.    
   . M$ s1 V3 {; J9 u
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   , q/ o- D! N+ R( s
8.   data: {
   0 ?3 K/ U( u3 D; c1 n
9.     url: 'http://www.runoob.com'
   
10.   }
    ( w% e7 `  M; ~% x" A1 a" A- J
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. 
   
4. </div>
   
5. 
   ; D/ i! a  I3 v9 B
6. <div id="app2">
   ( E% [$ [$ ]! Z8 o* H  Y
7.    <p v-for="val in arr">
   - ~3 f  c; u, [% g5 c3 k+ u% }
8.     {{val.a}}
   ( t# t' W- y2 D& C3 S) S
9.    </p>
   + Q  [# `# Y9 c" ~9 [
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    
13. 
    
14. <script>
    
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    8 U: k. u. A" O) }4 x0 D) _
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    % Z! ?8 {2 K! e8 d3 d  m; K: `' \
21. new Vue({
    ) X1 V# Z- k1 T0 l. V* _& L. e$ w
22.   el: '#app2',
    
23.   data: {
    0 a0 q# B, `$ ~+ F+ j( J
24.     arr:[
    , Q0 T  H, F4 J9 I, j. m
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    3 u8 X. ?% M' {& Z) V, K
29.    methods:{
    
30.     tap : function(){
    $ B! o0 h& o& Y$ h8 h& m
31.      this.arr.unshift({a:'new'})
    
32.     }
    
33.    }
    
34. })
    2 i7 s# j8 @1 z* @8 W& q
35. </script>

复制代码

7 L- Y8 Q7 Z3 r

) o5 d7 R0 f. l" ?' B

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

2 l8 T( T+ B( I' m, P修饰符

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

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

复制代码

0 E7 ~+ X0 j5 K5 I1 j2 b. H用户输入

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

1. <div id="app">
   
2.     <p>{{ message }}</p>
   7 B  j5 h; @9 O. M; ^+ j" Y0 A
3.     <input v-model="message">
   4 s3 f# \, `" {1 [
4. </div>
   / h5 t) x' `7 \3 u3 f# E1 p! B
5.    
   5 E% N( G9 @1 W( u0 `, V
6. <script>
   4 z, m2 |8 [1 D2 Z( k( w+ |2 q
7. new Vue({
   
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    ; s6 E1 \( B& {1 ~
11.   }
    
12. })
    8 @; j% Y. [" Q  {; i% Z
13. </script>

复制代码

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

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

1. <div id="app">
   1 V# a( g8 x0 r: g
2.     <p>{{ message }}</p>
   $ v% s# r" n4 {( ~. T
3.     <button v-on:click="reverseMessage">反转字符串</button>
   
4. </div>
   
5.    
   ; {' ^+ g+ v" B( ^! ^
6. <script>
   9 P# s, _7 s! u' U9 L
7. new Vue({
   ) _8 l4 q8 y6 C0 W7 E. w3 z  y
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    " I, b  {1 ?6 L; Z. E! J
11.   },
    
12.   methods: {
    
13.     reverseMessage: function () {
    
14.       this.message = this.message.split('').reverse().join('')
    
15.     }
    
16.   }
    
17. })
    9 D+ N+ D' \7 v4 s- ?/ }
18. </script>

复制代码

. C4 g, X  ]% J; \/ j过滤器

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

1. <!-- 在两个大括号中 -->
   5 [; ^6 _  G$ Z  k8 n. u5 u: y
2. {{ message | capitalize }}
   
3. 
   
4. <!-- 在 v-bind 指令中 -->
   * F/ |( s0 D. U5 s0 Q! p, [
5. <div v-bind:id="rawId | formatId"></div>

复制代码

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

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

1. <div id="app">
   
2.   {{ message | capitalize }}
   
3. </div>
   
4.    
   
5. <script>
   : r+ _0 T% x% X4 ^7 y; k
6. new Vue({
   % Z: r5 j0 A( b7 o1 z
7.   el: '#app',
   " L4 j2 T+ i( O+ P- y9 ~8 i1 b, p# m- q
8.   data: {
   
9.     message: 'runoob'
   
10.   },
    
11.   filters: {
    
12.     capitalize: function (value) {
    ! b0 B2 J) C) r7 O6 G/ ~; c: L
13.       if (!value) return ''
    
14.       value = value.toString()
    
15.       return value.charAt(0).toUpperCase() + value.slice(1)
    
16.     }
    
17.   }
    + }  [! y0 ^& ~2 {4 A/ C2 j
18. })
    9 m8 B$ [6 q& Z
19. </script>

复制代码

过滤器可以串联：

1. {{ message | filterA | filterB }}

复制代码

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

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

复制代码

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

3 i* C2 ~9 t3 q+ o7 O1 N( G4 ^# I
缩写v-bind 缩写

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

1. <!-- 完整语法 -->
   
2. <a v-bind:href="url"></a>
   
3. <!-- 缩写 -->
   
4. <a :href="url"></a>

复制代码

v-on 缩写

1. <!-- 完整语法 -->
   0 y0 a$ A  d3 J
2. <a v-on:click="doSomething"></a>
   2 O2 t! d6 |  t# P
3. <!-- 缩写 -->
   3 F0 O7 {* B$ x. S
4. <a @click="doSomething"></a>

复制代码

笔记
给元素绑定href时可以也绑一个target，新窗口打开页面。
# F0 C0 r1 W: w# Q3 B; D/ O

1. new Vue({
   
2.   el: '#app',
   , S3 d, e; W5 q( [! e
3.   data: {
   
4.     url: 'http://www.runoob.com',
   , L& v. S% F2 _# u. O6 |
5.     target:'_blank'
   7 c1 G. O8 x- i
6.   }
   , k( o7 n3 s; n
7. })

复制代码

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

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

* i: G9 U: T; n+ Z: X* T

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

  C' n9 y/ Q9 N, v/ ?# H
; q, [+ x5 Y5 f& h+ @
# P" C: k" _5 y. P8 q
6 j6 M+ \+ A% O4 s7 ~0 E% [
3 ^6 p' Q: O# r$ F5 D
: y$ Z2 ?$ g$ H, A8 D
6 c; ?$ q9 l7 \% {  d
; }: l2 d4 F" n" |2 S
! X) `8 t5 x0 O* h1 [: U3 R

---

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

Powered by Discuz! X3.2