cncml手绘网
标题: Vue.js 模板语法 [打印本页]
作者: admin 时间: 2018-7-1 23:16
标题: Vue.js 模板语法
Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
- <div id="app">
7 G; v% T6 Z5 C - <p>{{ message }}</p>
9 p6 N: [6 P( y' S7 r - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码:
- <div id="app">
1 d% ]% ?3 D# n" J - <div v-html="message"></div>) ], M; k& z' o" i. ^
- </div>! x8 A2 B# X# ?
-
* r) I6 {8 Q3 Y0 F: W - <script>
# `* a' l8 A0 a - new Vue({& `' u6 u2 u3 W7 H' p
- el: '#app',
" S. O. e9 ^1 p - data: {
$ [5 ~+ H/ S: `$ H - message: '<h1>菜鸟教程</h1>'
9 t' N. k( k+ O" p - }+ A# T7 j0 a7 o1 Z8 I
- })* o/ u! s* o. j8 d- s: N) \# \. T- _
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
- <div id="app">* C8 C! n9 X- K! w+ F
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">9 @& l! O' d5 ?5 Q
- <br><br>
9 {0 z5 L9 s2 l! z6 w - <div v-bind:class="{'class1': class1}">
* \: ~$ c4 e+ m& `0 } - directiva v-bind:class3 f, V4 @) D+ t# a" t
- </div>" ?3 a/ l: X% V) c0 i# t0 m
- </div>0 e& S; R6 h0 M
-
* [+ g9 Q, `: L - <script>
8 R9 Z( x( r8 x - new Vue({
2 o' b+ A( J4 T r; p, y$ S) B - el: '#app',
% t7 j$ S$ ~. d C# E/ @8 I - data:{
9 k5 _3 F0 @; J; L - class1: false
6 a1 T3 _0 k% W r2 e - }# \: v- G3 E- X
- });
3 H- c2 b! p% } - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。
- <div id="app">
; W8 J7 {2 p; l4 y6 X+ L - {{5+5}}<br>
" m) x' Y. I& {( c - {{ ok ? 'YES' : 'NO' }}<br>
1 T% E, R0 l# c! p" p1 ?5 ?+ ` - {{ message.split('').reverse().join('') }}
& O2 I# m! O( Z* x7 G* a0 h - <div v-bind:id="'list-' + id">菜鸟教程</div>% Z4 I {8 J+ R9 |
- </div>) J. k2 w0 U, {2 X
-
2 K" Q3 `; j' s$ _% n5 Y - <script>; n0 E# {4 b) a: T% C5 o: V. M
- new Vue({
5 V6 v1 S# ]4 O8 R, Z- X/ | - el: '#app',+ P( F$ X1 Y& R# e. J/ ~# f
- data: {
* j$ H) e. `# f: o) u6 ? - ok: true,9 F+ {/ m* |( I
- message: 'RUNOOB',1 e7 B: w& A$ v9 j M" ^; U/ o
- id : 1! `% Y$ s4 m% v% Y
- } ]$ S0 g$ X# q2 f4 |" l+ c$ E% Q
- })
6 |; z/ Q) p% O# _- z# I' S, A! ` - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
- <div id="app">5 } a' }+ ]/ B
- <p v-if="seen">现在你看到我了</p>
6 D r# y' I- L2 f - </div>
! A, Q9 R8 i- {4 S$ W) V5 `7 P -
, J4 \# L& h* M% R$ d* x( R - <script>
" ]9 Q2 e" S) T; n - new Vue({- i6 m( V7 `% [0 ]/ Z
- el: '#app',: a2 d) \+ g3 U
- data: {
9 G" [/ S c3 o9 q( \ - seen: true
' J3 G- ]% ?: n) M8 [' G1 t$ w$ \ - }/ I; f d1 }! _, {2 E& K
- })7 Y$ f9 Y/ R+ \" `& G
- </script>
复制代码
0 q+ @9 r) f8 H9 ^2 `* E这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
- <div id="app">
5 K3 n1 R. @* t! Z - <pre><a v-bind:href="url">菜鸟教程</a></pre>
) N! X5 F9 Y% U% A( B6 }: M. D - </div>
8 D% p) ^9 ?* @( R! F! p- F" H -
9 H/ ^2 N& I( c0 @* d0 ~ A - <script>
0 j; `4 ?6 K3 E; i - new Vue({
) v& }# j+ d/ T$ B/ l$ i9 o - el: '#app',
) v) c8 `6 Q% u$ O0 E8 _ - data: {6 O; @+ T+ G& j4 ~ B6 Z
- url: 'http://www.runoob.com'% S: @) o' Y/ e
- }+ z$ ^% D2 z9 r3 h
- })* i4 L8 T! W& M7 i: {
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
- <a v-on:click="doSomething">
复制代码
k: }: W0 r/ N% X( p
- <div id="app"> i5 k+ |9 x5 r. g0 j3 {6 J
- <pre><a v-bind:href="url">Vue参数</a></pre>
, y, `* L! R% Z2 o0 K# z - A2 m. [; j! H" o
- </div>
! f5 \* M% t9 D: Z
& D1 ]6 B6 L6 V- <div id="app2">8 q( V8 \- t/ w) q
- <p v-for="val in arr">
d5 d1 m1 A6 F+ X$ \# {. T - {{val.a}}2 I& q e4 G, s. W$ `4 o
- </p>+ L; a0 l; T# G" a7 q0 K" ?: K1 V
- <a v-on:click="tap">点我</a>+ C- Z- `$ v' |, z0 j
- </div>9 ?) i5 x2 S0 D! ], X/ g
- * X4 D6 F7 m5 v2 S
- 9 r, ~6 F& Q# Q! c6 l8 U) q1 X+ t B
- <script>7 v& S7 l- U3 c6 C
- new Vue({# n9 r! z7 ~! |1 V; N: Z ^3 L, t
- el: '#app',% S# \& i) `+ Z; ~
- data: {: {% p" r) U6 m8 X& O
- url: 'http://www.cncml.com'7 p, l8 Y) y9 ^2 r% ]
- }& S$ Q9 c G4 S: ~* o/ |' d
- }), K* k" q6 {9 U" s3 D9 D
- new Vue({; Y! V: d9 v- H4 W' p
- el: '#app2',
& ~. \5 [- F+ ]! X2 } - data: {
! E; ^* L) M: v: K+ b' R& U1 ^6 k - arr:[5 y* V; p& f* u3 \* n- c- W) r
- {a:'bb'}, V, L( G5 t2 T, m/ t; Z
- {a:'cc'}" w1 x; A# E) s* Z
- ]
) {" D% h8 M6 w0 f# L1 R7 [# Q - },
9 F, r# X" D$ I0 G4 Y C( B- D3 A - methods:{
/ {/ k9 r, l6 E; m6 w3 P - tap : function(){6 N- z, z" X$ B0 ~7 _7 M# _6 I
- this.arr.unshift({a:'new'})+ ]$ Z+ E D; `$ G8 u+ ^- i5 d
- }
; Q) S6 W8 C8 m - }5 ^* N: Z: n" \
- })
3 \; i% v0 _( d - </script>
复制代码
/ c/ _; x6 o( m. O' Q* R; Y+ Y3 q! V9 \5 ]! Z' q, G2 Q3 S; Z
在这里参数是监听的事件名。
, L9 { `' m5 R6 L& p' B3 h修饰符修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
- <form v-on:submit.prevent="onSubmit"></form>
复制代码
2 \) y$ M5 x3 o# i用户输入在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:
- <div id="app">
2 g) M+ K- {6 x! U# L$ J - <p>{{ message }}</p>+ |% B3 l9 e3 [& u
- <input v-model="message">8 S* U& b& k, P/ t* T' `
- </div>
/ m' u/ S+ [6 N( I5 b - # s) Q4 t8 u0 t- e5 Q
- <script>9 x5 }/ b/ |/ B
- new Vue({* f- C: ?$ W1 j# M8 H. i0 f; _
- el: '#app', H( r Z5 g: u% \/ P- K1 L. R. P
- data: {
/ I" e7 {4 b# x - message: 'Runoob!'0 U; Q* K$ O! H$ P3 {$ E8 H
- }
' {( V' g( R6 k - })
7 _, C% o; E5 y- F: Z0 R s - </script>
复制代码按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作:
- <div id="app">, ]4 Y8 H/ `1 J
- <p>{{ message }}</p>7 x% Z. V) ~. X' u. t C6 `! `# x
- <button v-on:click="reverseMessage">反转字符串</button>
2 k7 }0 L b5 R4 A0 m( z9 h" g! r - </div>, c, J- [0 o" ]
- G4 D% S6 j& E' c/ ?% I
- <script>( q+ C; W6 I) h
- new Vue({
7 b- ~* s& }8 U - el: '#app',
/ {- m* b; @; j) G+ E% G$ z: ] - data: {
, Q2 I. q n* |% Q, ^ K - message: 'Runoob!'$ h9 I/ B$ h7 l1 m9 ~9 X
- },& S" a% @* ]5 J/ T/ j
- methods: {* ^- @) J5 n+ f$ U5 `
- reverseMessage: function () {
! _& ?3 u4 C: c1 |; E' I1 @" H - this.message = this.message.split('').reverse().join('')# m. u" h$ U( ^3 q$ O# t/ h
- }
( r; |% r4 y% z6 b - }
J2 r/ v8 C6 D8 X k9 Z - })2 P( ]# W9 J, N3 l, D; @) \1 C
- </script>
复制代码
+ f% y0 E. w; T9 |% ^过滤器Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:
- <!-- 在两个大括号中 --> N3 @2 ^) n, e
- {{ message | capitalize }}
/ h; G0 g- U5 Q
3 k' R; I+ K" N- <!-- 在 v-bind 指令中 -->
: B; H, A6 I; w$ D% N - <div v-bind:id="rawId | formatId"></div>
复制代码过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写:
- <div id="app">& s3 @3 m' k4 u, _: v
- {{ message | capitalize }}
- @7 K9 D; L/ O0 a1 z - </div>: u3 a6 Q$ m9 L
-
0 I% K* X! h4 j) ]* q- g: p" n+ U - <script>
1 D* Y0 t) L1 j7 L, n0 R - new Vue({
, l# e K& `4 ^/ L5 j, |) c - el: '#app',
" P: D, ~5 M' z; H* ?2 Y - data: {, ]9 D* U" |3 N9 @' r6 }) O* S
- message: 'runoob'1 C& V3 m$ f2 M' ~: r& F2 ~1 \' u6 K8 Y3 R
- },
) @; ?7 l# N6 C3 X# u4 C9 I% I - filters: {
* x& h T7 R3 T( z2 w* M# w - capitalize: function (value) {
0 C6 Q" H$ z s$ X% ^+ E% u - if (!value) return ''9 J* c, P) F. _: Y: r# l2 J
- value = value.toString()2 g1 `, t! {4 g/ L- t+ e1 @5 a
- return value.charAt(0).toUpperCase() + value.slice(1)
. j ~' _3 x! p5 K - }# U1 ^0 |8 e/ u. a. O
- }
/ A( `/ }5 U. S* a1 S$ o - })
+ o0 E [4 O8 O+ `2 E. a - </script>
复制代码过滤器可以串联:
- {{ message | filterA | filterB }}
复制代码过滤器是 JavaScript 函数,因此可以接受参数:
- {{ message | filterA('arg1', arg2) }}
复制代码这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
! U) k) R# E5 K- }; ^' ~
) U2 g3 F, B2 {4 u1 f& r, f" Y4 Y缩写v-bind 缩写Vue.js 为两个最为常用的指令提供了特别的缩写:
- <!-- 完整语法 -->, G6 Z) }! k- u0 r
- <a v-bind:href="url"></a>0 c# c0 L5 w" R) ]
- <!-- 缩写 -->
( l; R. ?* p. z - <a :href="url"></a>
复制代码 v-on 缩写- <!-- 完整语法 -->
; F+ _" c, x) b7 p E5 d - <a v-on:click="doSomething"></a>5 H! ~& y( _5 Q/ e" q6 E
- <!-- 缩写 -->( X% H. i$ O9 }: W' B: O
- <a @click="doSomething"></a>
复制代码 笔记
5 ^# b: v9 }1 v5 i给元素绑定href时可以也绑一个target,新窗口打开页面。: v* j: G/ P4 W3 T' G; n7 I6 _& H
- new Vue({/ J+ i% A, s/ l* W% E- g# `
- el: '#app',8 ~4 O O! n- u, A$ q
- data: {, I/ P+ u1 t" K5 J6 _8 q0 E# l! ], Y
- url: 'http://www.runoob.com',: S$ O# }+ n7 q' w# ?+ \* o3 H
- target:'_blank'
b7 C" u; E4 {1 v+ Q0 b n - } |2 T' d( Z# b5 }# e
- })
复制代码当我们给一个比如 props 中,或者 data 中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用 Vue.set 方法。
Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新
/ T+ j% A2 H/ O5 M N
这里本来 food 对象是没有 count 属性的,我们要给其添加 count 属性就必须使用 Vue.set 方法,而不能写成 this.food.count = 1
$ K$ v8 B8 H. Y. }9 d) d
6 X9 t' W5 ~4 N( A. c
9 q8 q: M f, o3 T6 @4 y
/ I! B: Y: s! N6 S% r8 E3 I( O0 V) |% D
7 {* g/ f/ g0 {6 K1 {
3 A9 [. s$ V2 @3 P- g3 o
4 A. N/ S5 y% Y; q+ T- W2 k
2 h8 @1 K! m/ c
欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |