Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
/ j" B" Y0 B9 K- ^$ S - <p>{{ message }}</p>4 y5 ~4 q$ a8 s
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
" `0 Z3 G" d5 ~6 {: J* I$ I% o - <div v-html="message"></div>' S, |$ j+ h4 @. c/ P
- </div>
: A# K( j) V+ Z- z& o -
) l- ?& N) |! T& W j - <script>
, x$ `. X* }. v* x0 _" u8 u - new Vue({( T: e& Q9 \2 x% ~. q' g. X8 M- d
- el: '#app',1 O5 k- ^3 D" H* P% {8 k# B
- data: {
/ T8 X+ g% \5 H' l# O - message: '<h1>菜鸟教程</h1>'
0 u; D; k) D* ` - }
( _% z; d: x2 J ]) s - })
: Z( p6 S0 o1 y8 e k |0 B - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">/ b @& y7 G- A. Y8 l
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">- W2 L4 q$ ]' M6 W! N. m; Y* z
- <br><br># ^; O8 b5 \( ]' ?
- <div v-bind:class="{'class1': class1}">
2 m/ n# E* F+ d4 i6 L3 Q6 P - directiva v-bind:class0 E" D; V' |" G/ @) P; x
- </div>
( n- y- x% v2 ?3 z - </div>
& U# L9 `: q: K$ r& Z8 {4 s -
& ]% F/ q9 R$ e2 e6 V6 o q3 R - <script>
% m5 `& c, r5 K - new Vue({3 L5 S& {2 g3 T! p
- el: '#app',
; O7 [$ S- r! p9 j h6 S& w: |& @ - data:{
9 m3 @5 f+ |1 e+ W - class1: false7 V* {1 }! I$ ?' U3 o$ ~& q
- }$ P* D; g$ b0 Z0 Z, a5 F
- });
$ Y+ i l2 t6 x0 H1 K( ` - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
4 n4 b. o# Z4 i; B* _ - {{5+5}}<br>
, K& z6 c1 v3 B4 A$ R5 r$ p: g! ] - {{ ok ? 'YES' : 'NO' }}<br>
" @' O1 c. v6 @. Y- I) j4 S0 U - {{ message.split('').reverse().join('') }}0 w! H; Z5 h O% x' Y
- <div v-bind:id="'list-' + id">菜鸟教程</div>
, i1 O4 G- Z' Y2 G# O - </div>9 \9 o& d7 ?7 R( c1 Q+ C+ m' e
- 2 P( S/ j3 Q2 \# v
- <script>
* J! p3 W3 u) i1 S; W9 B - new Vue({
( a- G0 \' Y9 X; E - el: '#app',1 `% w. B* Z4 E/ |4 ^8 b
- data: {
& Q+ j0 a! z7 s+ a: ? - ok: true,0 u& N0 F7 y4 y% w ^' b
- message: 'RUNOOB',
$ o: | V- J0 Q9 Q - id : 1; V( D+ H# c( Q5 P Q& U# B
- }
/ o* ]! ?, l* m5 o8 E( C - }), z% A- _$ x! y4 C$ F- }
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
" p) A3 g) N% C1 U& |0 y0 l D: z - <p v-if="seen">现在你看到我了</p># ^8 V/ I7 \6 h J4 b& z2 R2 P& f
- </div>4 U( ~% a, p# ~7 i
- 7 Q; I7 S8 R+ [# {1 D' @ y! X
- <script>
4 ^% n# P' t/ b- [- V9 K: U) p - new Vue({) Z9 k* K* {# F% i8 f+ a* s1 h
- el: '#app',
, o3 M' J6 E3 ?; `4 c - data: {6 [* v0 ~2 @, N' z6 `
- seen: true8 Z6 h( W( D* K" ^7 u/ w7 h
- }; [& j) |3 d+ \3 S# @. Y
- })
: P2 h5 Z8 u* T& w2 h# U, d - </script>
复制代码 5 {8 b5 l. B) { {
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app"> o8 A9 u, Q5 O+ Q+ b
- <pre><a v-bind:href="url">菜鸟教程</a></pre>$ U0 H9 \+ T, L$ M7 W
- </div>9 T0 }" i& I4 j0 d
-
8 i8 `+ e0 H( i5 B - <script>+ k1 ]2 F( x7 \* c" O0 W. e N
- new Vue({% n, T" E% i( W5 o* ^, z
- el: '#app',
, h" @: }: A3 o) y2 X - data: { _' N/ j2 \& \6 R
- url: 'http://www.runoob.com'
3 g4 m9 I- X7 L# X - }$ u2 G5 j# s6 V1 M% ~5 _5 E
- })+ C5 z( e: |* i1 J9 a4 V
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
' b9 H& [ s3 G! v& Z. J0 X l
- <div id="app"> o7 r( c: b9 r7 C# N. \
- <pre><a v-bind:href="url">Vue参数</a></pre>
: h" S* i4 P6 u. V9 X \ - , R$ s) I' r5 y; T
- </div>
8 y1 a' L8 w' Q% l* n3 b
* ?6 h" H) c2 x7 W7 g* U- <div id="app2">
9 _, V' m) e6 ]5 @2 F7 I - <p v-for="val in arr">
2 ?9 r. Q) x% D( A - {{val.a}}: h2 _0 ]4 f8 ?' i7 e
- </p>* }! q6 F; A; U3 h% v+ Q6 v0 J2 t
- <a v-on:click="tap">点我</a>* W- _' A8 \) u1 a
- </div>4 i# l0 W7 X2 ~. h9 @, D3 U8 O7 s1 k& r
' L( F, p3 G/ d* P3 w! c7 F
8 g" e5 t4 I8 z1 E3 o) h- c- <script>
f/ [& F( K$ p" t# n: _ m; J - new Vue({
, l3 Z9 a6 h: `/ P/ a3 d" y- _ - el: '#app',0 ^3 d; W8 r6 n. ]! o+ j) K
- data: {* m7 n% U$ F3 V) r' m! Q% n, ~
- url: 'http://www.cncml.com'
9 v m/ o9 _1 a+ H - }9 }$ e7 m+ K$ K% a. U
- })
) H1 j: U7 q9 U - new Vue({( W6 o1 d( |0 J( w& f
- el: '#app2',7 p) h4 i& f/ Q; c. ]( R. B
- data: {
4 y8 c: r5 F( ] e4 ]( l$ r7 ~ - arr:[. V( i8 U* E: [; S* V* u
- {a:'bb'},
2 a0 u" j3 `6 V5 x7 h - {a:'cc'}
) d0 c* p' i1 j5 \$ P0 k' T - ]
/ G4 t+ n5 B w1 C* ` - },' ]5 B2 G, `& \9 S, o
- methods:{4 l- a" _# f, B% l
- tap : function(){" l% ~8 R1 u4 D- j5 ]
- this.arr.unshift({a:'new'})
9 C; d* k. R6 P - }4 e9 u+ `, f$ q# t
- }: w, G' g. [# y, L x
- })
9 f7 [& j5 ?% b ] - </script>
复制代码
( J; @8 n3 l1 ]4 m- z2 [9 _1 G
4 A: U( E# L' \
在这里参数是监听的事件名。
$ W0 z7 T, ^5 s8 u |