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">
   ' k7 r+ a4 B; @" G. j0 d6 H% N
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   + g* Z( B! K: m
3. </div>
   
4.    
   ( f/ @" L3 N& a$ ]8 Y( n' N8 ~
5. <script>
   5 }5 h( S1 G" G" o- I
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   7 a" q" ^& i4 B
9.     message: '<h1>菜鸟教程</h1>'
   
10.   }
    8 B! ^; f& D' {% x
11. })
    
12. </script>

复制代码

属性

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

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

1. <div id="app">
   + Y. e) Z9 A6 ^  T% e3 ]$ k
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   " d- n2 j3 i' I( D* f8 }2 Q) O
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   : v7 u# l6 g: o& K
6.   </div>
   
7. </div>
   . a* |+ O2 v' a, U! b. F
8.    
   1 ^; q4 W" c  a) r
9. <script>
   ; B" S# @) X9 v  R, D
10. new Vue({
    
11.     el: '#app',
    & d9 i& a! F% |8 Z
12.   data:{
    
13.       class1: false
    + s5 m  Z3 i: u% z. i$ Z# b
14.   }
    " j9 D7 y; u/ ^* Z, Y+ G% \+ {
15. });
    
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   ( f" v$ p# ^# |6 V
6. </div>
   0 T. R& C# c! A3 ^( ]) \
7.    
   
8. <script>
   0 \" m; m; v4 A+ O( Y
9. new Vue({
   6 N8 K" E8 C+ Z9 M0 \$ K1 w
10.   el: '#app',
    ' G. O8 Q7 B8 J$ r$ `9 }
11.   data: {
    ; Q7 ~8 h% G1 H# H* o, d
12.     ok: true,
    % v$ }  \/ t/ E, Y! v5 e
13.     message: 'RUNOOB',
    2 o% r0 }. N! U; M8 E7 g7 f
14.     id : 1
    
15.   }
    
16. })
    $ |& Z- w4 S1 i2 d
17. </script>

复制代码

指令

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

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

1. <div id="app">
   9 N  J( r& }1 o! d) y, q/ x
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   5 D' |- _( x1 R  i$ q% h
8.   data: {
   $ m/ F7 ?: _4 m: H9 m1 B+ n
9.     seen: true
   / a9 _) |" z! b" l
10.   }
    
11. })
    9 r$ l1 H5 F$ c2 Y: ?
12. </script>

复制代码

7 G# W- j0 P1 ?" l1 ^7 l

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

参数

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

1. <div id="app">
   9 ]9 }1 L2 ]: `" F
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   
4.    
   0 F- v+ g( m  n5 `& W" h9 v
5. <script>
   5 S" d, i, T( \
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     url: 'http://www.runoob.com'
   
10.   }
    ) t7 j6 C/ i! R' `% [6 o
11. })
    + @, m/ @. W; T5 F- x0 b
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>
   4 t. I: D; H2 Q8 p" ^4 U
3. 
   
4. </div>
   
5. 
   2 r5 h5 \/ K  k& ?, O3 W
6. <div id="app2">
   1 e: B' |$ {# o/ s1 D1 j
7.    <p v-for="val in arr">
   ! |8 B; J! R% m1 u! ~, u2 H
8.     {{val.a}}
   
9.    </p>
   
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    3 K1 t6 N  d- r9 H7 r) k
12. 
    
13. 
    
14. <script>
    9 q5 t2 ?- ?+ ~
15. new Vue({
    8 ]4 T, x; W% ~: {0 C& t- O6 G
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    $ H& L3 \$ ^% x* ^9 T
20. })
    + `8 e7 r2 y+ A, Y& s) H
21. new Vue({
    2 y$ m. X. T$ [) P, A
22.   el: '#app2',
    
23.   data: {
    
24.     arr:[
    
25.      {a:'bb'},
    
26.      {a:'cc'}
    
27.     ]
    
28.   },
    ; B, X2 [" M. }) T4 b
29.    methods:{
    
30.     tap : function(){
    3 v: h; \% _4 \7 j
31.      this.arr.unshift({a:'new'})
    
32.     }
    
33.    }
    * K' {, k2 P1 A) L+ t9 p# _
34. })
    
35. </script>

复制代码

* t3 {- T3 }8 Z- J# D, n

0 ?4 Q% |) t1 T

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

修饰符

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

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

复制代码

0 `! }) Q3 w' B( L  j+ x; N用户输入

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

1. <div id="app">
   
2.     <p>{{ message }}</p>
   
3.     <input v-model="message">
   : N: ?4 S/ W1 O5 o  Q2 q
4. </div>
   ! @) F( F# g8 z' r3 m' t4 m* Z" }
5.    
   
6. <script>
   
7. new Vue({
   2 K' r: }" b% E& `
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    * C& q) K" {3 F) Y) l4 T1 h
11.   }
    1 m7 |, J8 M2 ]' l) M+ d
12. })
    
13. </script>

复制代码

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

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

1. <div id="app">
     }: d/ }  F% |
2.     <p>{{ message }}</p>
   
3.     <button v-on:click="reverseMessage">反转字符串</button>
   
4. </div>
   # d# E7 J$ \3 h5 P0 X7 x2 `. \9 U
5.    
   
6. <script>
   
7. new Vue({
   
8.   el: '#app',
   
9.   data: {
   # m3 Q$ \, b  p& I
10.     message: 'Runoob!'
    
11.   },
    ( o' X: T8 Y; ?/ f4 z2 s. b
12.   methods: {
    / R2 e7 F3 T9 V) n7 g% |
13.     reverseMessage: function () {
    . R+ o  ~: C3 m' T# Z
14.       this.message = this.message.split('').reverse().join('')
    & i2 V5 _: ~7 T5 G
15.     }
    ( G1 C6 {& ?2 l# h
16.   }
    / X) {- y- {. p
17. })
    
18. </script>

复制代码

9 O: V) y; D: T过滤器

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

1. <!-- 在两个大括号中 -->
   & k; d0 |; q' b4 |
2. {{ message | capitalize }}
   
3. 
   ! R8 Q) {1 E; `3 a- U& V
4. <!-- 在 v-bind 指令中 -->
   2 |6 t& q9 p" N2 u$ D/ l* e
5. <div v-bind:id="rawId | formatId"></div>

复制代码

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

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

1. <div id="app">
   
2.   {{ message | capitalize }}
   
3. </div>
   
4.    
   4 H' m3 k: \+ U3 ^" m  E! [; q* H
5. <script>
   4 w. |& [  `% y1 a- p1 _' V) T
6. new Vue({
   
7.   el: '#app',
   9 w7 n; B$ G' T* D' ]( W" L% F
8.   data: {
   9 ?5 u3 X  m) [: p5 M
9.     message: 'runoob'
   $ d/ e/ S( t0 b+ L2 l7 A
10.   },
    
11.   filters: {
    
12.     capitalize: function (value) {
      T8 K/ \& k: a9 K5 q! C# F9 b
13.       if (!value) return ''
    
14.       value = value.toString()
    
15.       return value.charAt(0).toUpperCase() + value.slice(1)
    ; x, A) z4 ^$ X: ]
16.     }
    . f, l! E+ R- v. z$ ]) @
17.   }
    
18. })
    
19. </script>

复制代码

过滤器可以串联：

1. {{ message | filterA | filterB }}

复制代码

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

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

复制代码

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

; s# \( N0 N: q
$ J- T- c  k7 P! ~- E/ q# w) T缩写v-bind 缩写

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

1. <!-- 完整语法 -->
     J" O( k. e; F( s% K$ J
2. <a v-bind:href="url"></a>
   
3. <!-- 缩写 -->
   
4. <a :href="url"></a>

复制代码

v-on 缩写

1. <!-- 完整语法 -->
   
2. <a v-on:click="doSomething"></a>
   
3. <!-- 缩写 -->
   $ m; s( e5 Q% O' ~9 ]/ `/ E8 o
4. <a @click="doSomething"></a>

复制代码

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

1. new Vue({
   - `) d. K8 u3 o% S+ U! f/ U/ r
2.   el: '#app',
   
3.   data: {
   
4.     url: 'http://www.runoob.com',
   
5.     target:'_blank'
   ( p' |9 y7 N6 \7 @5 h2 ~+ O+ R; e
6.   }
   7 ]+ |- y: f$ }* e) I
7. })

复制代码

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

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

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

8 v8 E3 {# B- o6 e5 s
/ T! {  e3 R, `5 F( k9 j& F
7 w" E# U. w% ^
. q1 G/ v  r8 V6 m# n3 N3 @! U  t. l7 o4 A

" u* n0 S: E  M

8 R! V- j" i' n* o5 [7 u2 t9 j4 y! N& w5 S
2 S# V3 o- A3 _* X- g5 A

---

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

Powered by Discuz! X3.2