|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
}* A6 s0 a* q q - <p>{{ message }}</p>; x1 U6 C M4 C* P
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
$ t" v0 A# U& p8 ^* M! W+ x( G - <div v-html="message"></div> H% o) P% ` {1 Y+ X% e
- </div>
2 F$ m, z2 ]3 T/ k+ r - % @4 ]4 U% F; T& P8 T& i
- <script>
% j9 N: }6 c( Q0 G - new Vue({
, y2 g5 `! B6 j+ ~ - el: '#app',2 D( c3 g7 e3 h; n6 L
- data: {
1 S8 l" Y% Y* ~% [2 ]0 z( @' G - message: '<h1>菜鸟教程</h1>'3 V9 Y7 f$ V7 X! V# C4 P" \
- }
% W+ a3 I: @' q( V% D* d" l - })
J* u# ~$ b# M3 y# _, t! w3 G - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">4 \6 V, W: U3 X+ _8 w5 J1 p
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
; }# J( k. { D" }0 X t - <br><br>
/ P" \/ `( G6 d* W, z/ y - <div v-bind:class="{'class1': class1}">8 E, L4 ]/ V6 ?0 x, j; _! S
- directiva v-bind:class
/ Q3 G$ j: N/ o; d. J! h4 D - </div>" w+ F* p+ s. ]
- </div>1 u, A8 Q) t/ L
- % }& [! r# s- ]1 {
- <script>+ X" N' [% F* [$ y7 F
- new Vue({
- o/ G( c) n" Y" C3 H; x - el: '#app',
/ P9 l q- ^5 W6 [ - data:{3 q% Q0 Z% S, Z+ H6 P$ l/ ^! |
- class1: false4 K1 ]. O1 _6 c" M. J
- }
/ W# I( l6 O3 F" T - });
9 N+ j9 }+ w! p( g7 i - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
$ U8 b4 c! x, B# I8 M - {{5+5}}<br>0 ]+ J3 R' @# s
- {{ ok ? 'YES' : 'NO' }}<br>* t3 x' y! Y" f. e! m' Z, w
- {{ message.split('').reverse().join('') }}
" K' ?) A% o1 _- B L, h% I! G - <div v-bind:id="'list-' + id">菜鸟教程</div>$ B# B1 h. Q$ I y% Y2 E
- </div>- S& @% ]6 F2 c/ C6 m; J0 g" J
-
" V. i; F2 {" c. b+ W - <script>
$ \- G4 i* L7 Z6 _! j% \ k - new Vue({
$ o6 r1 S( K2 w+ J5 I% e2 O - el: '#app',. I$ R8 I5 D& R
- data: {
. [; M0 Z) U- p* r - ok: true,
- v- H& @( j8 J: W - message: 'RUNOOB',
* O. U% H y; g U - id : 12 |$ p1 C6 b$ U! e
- }
: }; b, p) W c/ n/ R3 i, R - })' Y& d t5 W# b2 ?9 }+ `9 O. v0 Y
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">1 n: C! L' Q8 J8 G) N. E& F& }% C
- <p v-if="seen">现在你看到我了</p>+ v! o0 Y9 r( Y4 X$ ]+ A
- </div>- c4 B( G' Q& X$ V
- + J2 W+ I5 J; g) D% d# Q/ T" D# y3 n
- <script>1 O3 `5 s+ ]$ d5 `9 J. |
- new Vue({
/ Y% c4 p" a: t4 S* u$ I' f - el: '#app',
6 d4 J. C5 S- [( y, T - data: {, s8 L7 y n9 N7 b
- seen: true
( q$ N8 k& D/ y, `- J4 b r1 j& o# b - }( d! a7 ]' x# y5 Q d
- })
$ U! ^$ b6 G8 I: V' N. c - </script>
复制代码
" q. g1 J/ T8 M, a5 T% S这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
" @- I2 Y5 b' y& F3 P# l - <pre><a v-bind:href="url">菜鸟教程</a></pre>
1 _- @3 h$ W7 s( W - </div>
( c% c. T2 s1 h r( s# ~; |3 J8 k - : C3 a5 i) I* H5 O! Y: B
- <script>
% e K( c5 v$ N2 ?8 j - new Vue({
! c3 F7 [/ s3 F: M# M& _ - el: '#app',' k- W) B2 b0 U* k- t, m/ S+ \) N
- data: {
T% W( N: M) C- t - url: 'http://www.runoob.com': t' s/ R- y& T$ p' r
- }8 J8 N/ P! D# }
- }). p. Q- E/ ^( j- B" b1 C2 A+ c
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
) Q0 H% |3 d% f. g, }4 c4 G6 y
- <div id="app">8 r; B: o. O$ S* @' E+ c, P
- <pre><a v-bind:href="url">Vue参数</a></pre>
, y I* `1 l3 E: v. N8 }5 C - ! n3 G4 T! d9 o1 X9 z& x5 V& t
- </div>' t$ S0 c5 n+ S% l
- / x- Q+ @. ?1 r- F
- <div id="app2">7 ` F+ U( j; z) o, f' i
- <p v-for="val in arr">6 U1 \3 | U$ Z
- {{val.a}}4 }) @. O1 A4 `9 Q% |$ e9 w
- </p># B" n" s3 \. a4 `1 s4 {
- <a v-on:click="tap">点我</a>: [: s4 h" h3 Z
- </div>) [% d* {/ M% R1 Y' j
8 f4 M/ Y7 b! |+ z8 P) w" b" Q- 1 ^" n* o$ R$ e8 j6 A5 c
- <script>. g( S e9 b: y
- new Vue({' n9 O+ N" T% Q p c! M4 l w
- el: '#app',/ v1 |. P" A: i
- data: {
( k3 S9 a6 ?+ `, k - url: 'http://www.cncml.com'9 ?) t/ l/ R+ ?1 w
- }6 G7 D+ l; y0 o7 `3 j# q
- })
# X$ L% t, [3 q1 G; L* I4 b- ] - new Vue({ L1 P6 h4 v( D8 L) S& _' ?7 M
- el: '#app2',
& o4 N; g9 }$ p8 ?; h2 ]2 P/ f( O - data: {
/ E$ x% {$ }$ ] - arr:[$ o% a2 x8 B/ n4 g2 Z n e& @6 D
- {a:'bb'},6 e9 X# G8 |0 W& b, ]# V" _
- {a:'cc'}. i7 ?5 T) v+ } v& _. b, W2 o* S
- ]! z: n& Q4 j+ l% n4 W/ i
- },
' H ~* I/ o5 ^; j# }6 R& n3 V - methods:{& B5 {4 m, T+ x- p4 I7 B
- tap : function(){
; D) ?$ d* n) H+ N& h+ Q - this.arr.unshift({a:'new'})
, w: Q. `: N8 M - }
4 X/ v7 ~3 s: i) n* } - }% g8 G( O* q2 B! l
- })2 z; K4 |6 ?( Z+ c% J* s
- </script>
复制代码
# \% P3 G+ F: w+ e, ]0 Y2 z, B5 X6 e, R! c z
在这里参数是监听的事件名。
9 U) z( R8 s* L, x- [ |