Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">9 T: R4 ?0 ?7 ]$ ^. r% O
- <p>{{ message }}</p>
1 v7 E7 w% k/ y% H( B; t% u - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
9 j3 O2 Z9 m- X+ k5 s% D - <div v-html="message"></div>
& s3 d M* k# C. r- M - </div>
6 l+ E- |6 p/ U1 }$ Z0 n& ` -
1 A4 @; H( ?& Y" ~! i4 I - <script>
$ I4 C' G3 _3 P - new Vue({
1 R. G Z: y; b - el: '#app',/ z$ ^1 n6 p2 E( @" ~* `" n
- data: {9 a c. a. z+ ^1 L) b) x
- message: '<h1>菜鸟教程</h1>'
5 C0 ^& ^7 f6 m& Z) t - } w* k& p/ i" M6 x& ^. W3 N
- })
) K5 t$ Q% d& E0 s! y - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
( \! Q! F" a0 A. V* W7 G9 p% z% N - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
X. X& d" C# ^8 U. X5 V - <br><br>% A! B% M) x5 r) V& N2 G
- <div v-bind:class="{'class1': class1}"> E2 C* W: D6 X9 y; R
- directiva v-bind:class+ F: W+ O' J8 p0 _- a5 Q' }6 {
- </div>2 s1 Q- r7 n4 E4 z. ^ x- E
- </div>
- c; a. ?' b8 {0 E+ a' o) w5 d - 2 N- k* L' Q3 w/ I' n
- <script>5 w; f# j/ u0 b
- new Vue({1 y e( f" O# ?
- el: '#app',7 p/ b' f" k0 R. S6 W* H7 {$ `
- data:{
) N+ m1 x0 i8 {- B. ~( |. n - class1: false
5 x1 V, x$ P1 V `: Q3 y1 w - }& T. e+ ]* x& r- C6 a' J3 c) J# |
- });
5 \3 V2 c: y3 J - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">' W; u- T3 k9 M, S
- {{5+5}}<br>
K- D6 X( z/ D, V2 R - {{ ok ? 'YES' : 'NO' }}<br>& w9 d3 ?+ u2 i5 z) I7 p
- {{ message.split('').reverse().join('') }}
6 X& x6 P! i. f9 z - <div v-bind:id="'list-' + id">菜鸟教程</div>
5 q5 f7 t, n1 e. N& ] a. ~0 z - </div>$ ^& m; `! _* X( Y: [
-
1 |) _3 W w' ?4 x; F9 p$ m! H$ c - <script>
; O( L+ {9 {7 g8 y8 Q - new Vue({
" ?; I0 |+ |0 `% C - el: '#app',
2 c5 Q2 S2 ]4 V - data: {% _& r; {5 s" S5 o$ ~: Q* {# c
- ok: true,9 f& Q" I7 j T9 C+ S. V6 ]
- message: 'RUNOOB',
$ U, M7 \+ G8 F- t5 } - id : 1
% [) H& _9 l4 G0 s& d5 r - }
8 ~# E7 b& \# n- _1 }8 h3 f - })
) z; Y ?9 e* D( @. q9 |: t - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">, a8 L7 V: S6 I9 k% [* d- q( f! G
- <p v-if="seen">现在你看到我了</p>
3 ^& u z& Y" r. z; W - </div>
' O+ g4 c8 V4 l: m+ _* z - ) V* A+ O m, F) f, r s! f. _/ z) t
- <script>
- f9 O% H$ z( k6 n2 W - new Vue({
9 g0 g. ?2 _ K6 n7 I- f5 p2 G0 N - el: '#app',1 T& E$ G9 A0 q7 I
- data: {
G% K) K, } p$ c( ]6 ^1 W - seen: true0 X% l0 E% D$ @+ E' b" K
- }- b) y2 [! Z' c' a
- })
7 V7 e! P& P; F2 ^; N7 ^ - </script>
复制代码 - H9 b) m, A% V- P: Z
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">1 v- X9 l% O' x
- <pre><a v-bind:href="url">菜鸟教程</a></pre>* @. w2 ~! b+ j( j9 A7 t
- </div>
/ D4 n9 _! j1 P4 u9 I4 v+ t8 E -
- m1 L3 o2 @' P& u; U - <script>1 n! [! x7 [' C
- new Vue({) _" l- M/ T: ], r5 z2 z! j
- el: '#app',
) }3 e! X, o: p2 e2 w2 r. u$ ` - data: {. i5 s/ t/ ^, Z, Q P* [
- url: 'http://www.runoob.com'
! L( i% Z9 r" m) G8 l - }
$ J3 o8 V: f8 X% K7 o - })
5 Z! }7 X2 I5 s C4 s3 N% I# ?1 H - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码( f) k4 A4 E4 O
- <div id="app">
$ S, C1 Z2 M, m6 G% l* B) g - <pre><a v-bind:href="url">Vue参数</a></pre>
+ e; v e& }5 J* K& `. x. R
2 T6 X, p/ i, b" g8 e- </div>; E& Y0 i3 A4 Q1 S) [" s3 F
" V; s. l6 m) `( X. G0 i- <div id="app2">
9 {( H" z6 O# Y' |0 K; V1 @ - <p v-for="val in arr">% j) h' G7 j8 p) }& y# ]* h, `. ?! L' s- _+ W
- {{val.a}}
& X4 f! Q1 I$ c$ U - </p>
4 q4 S3 R5 x6 ^1 Y+ n2 e& A d: G - <a v-on:click="tap">点我</a>! F, x! n8 R9 w8 A* p$ D, w
- </div>
6 D9 x, s) a: C7 H8 `3 q8 L
J+ ?% E" t. ~" z0 x4 x- , E" m4 s* j- G6 @3 j9 C
- <script>! V5 x7 y \ G
- new Vue({7 P, }0 n8 r: E, h$ T. S! A
- el: '#app',: q, g( o; T# ~( O& Z# x
- data: {
2 f9 z$ `0 `" i6 P. o! P - url: 'http://www.cncml.com'
( Y% ~3 V# ~* w: ^' n - }
! r$ K2 v. T9 A - })
9 t5 c5 \# x! k7 ^( [3 \+ Y, N - new Vue({5 M. Y: J+ v0 y1 z! H' P
- el: '#app2', Q) r2 N9 g% u8 S$ E" {% V
- data: {
, W1 |2 u& [: H% v9 }! } - arr:[* M! B/ C1 I" |; [' d0 p
- {a:'bb'},
2 X+ O5 k7 R4 G. _- B) F$ { - {a:'cc'}9 ]0 ^ k% B; h4 v7 G9 x
- ]
* y1 o1 |+ q( S/ d( r6 Y8 c s - },
G1 k$ N% w# J1 f) x Z: c - methods:{
% l! C3 O; ?. Y. b; H0 u - tap : function(){
9 Y- T R0 O: `( t$ h - this.arr.unshift({a:'new'})
# c$ v* N& `# M3 l - }
' }# K4 U! ^ s2 l6 o - }
& c( F; ?8 L" \9 c3 b" {7 d, q - }), G3 E+ ^: D7 a
- </script>
复制代码
! n# q0 Z8 s9 f0 T/ ?) N3 e, J5 }
7 i( q9 b) q& G' @
在这里参数是监听的事件名。
2 Q' O3 z0 O* n! S# f |