Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
U) G6 d9 z, c( m0 O& L4 E - <p>{{ message }}</p>
& K3 r( v5 y) g- Z6 ?& A - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
$ e2 q4 b* h. j# o- V - <div v-html="message"></div>
& o1 D; H! p4 t! z" y8 x. B - </div>' N" S! u3 R0 f, x, r5 j
- * D; |$ T/ j8 J2 U
- <script>; }& b/ g v; r5 w
- new Vue({3 O8 X i9 e5 M7 h9 l6 v6 d
- el: '#app',, g2 L) @: {0 [# [4 ?
- data: {+ N$ P- D; K- B$ y& u! M
- message: '<h1>菜鸟教程</h1>'1 i, K" V: G' d
- }
1 e' q) B" d8 J0 S - })
9 `+ g. M" b& ]' |4 b# E - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
p0 r( `5 u6 s( Z! p' b( K6 f - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">+ O$ |! D6 q/ U/ K
- <br><br>5 V/ z4 T# J- v% N1 R
- <div v-bind:class="{'class1': class1}">
+ B2 d6 M; F" O/ z t& g4 S - directiva v-bind:class- D5 v- z) Y) o' d7 A: @1 @: D
- </div>
5 O: v! @2 ~4 \' w - </div>& P; e, d& X! x: y
- + y3 y# }! C" O
- <script>: o$ K# q; {" ^
- new Vue({1 P2 T9 g2 T- }0 ~/ L
- el: '#app',- R3 k: e% m) p$ K0 R2 ]
- data:{& l+ o9 K$ L; p. A9 o M2 J
- class1: false+ u" c6 O( M" \. m p1 Q
- }
+ Z0 t, [! s- r% k9 c# K4 ~ - });
: g0 a- B5 W6 {* j - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">7 w! c! W( \5 e* I% c. T. V) i# {
- {{5+5}}<br>
# S5 n% _2 W3 i& v9 }2 }# E - {{ ok ? 'YES' : 'NO' }}<br>
8 I8 \, J- K" W' ` - {{ message.split('').reverse().join('') }}
: D0 x9 E; U" ?( g - <div v-bind:id="'list-' + id">菜鸟教程</div>
7 S5 l. Q8 W$ M1 O/ l, g! ^$ z0 i1 ] - </div>
8 i O) r+ {+ i4 T - / t6 O9 @, ^4 W( o h) G& F, Y
- <script>
3 k& {& r" d7 [. O$ [5 C% B - new Vue({
$ [, D! p7 Z' {: x+ G - el: '#app',
8 s8 ]8 l/ W$ I# v - data: {1 {* D4 m0 k9 O
- ok: true,0 Y) {. T3 n& c: l* a
- message: 'RUNOOB',& z8 O& u( W. o+ B/ P/ [/ M
- id : 1
3 v* b9 M3 \6 q( e" C - }
% {+ G9 V1 c3 _ v% s0 U# k! h - })
' s. R6 t" R& c2 d3 q) j% G4 q - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
x2 x$ Q" Q0 r+ e - <p v-if="seen">现在你看到我了</p>/ n- f9 R. b& l5 Z2 n+ B8 U% b4 P; n
- </div>
$ E$ I) B: D% B4 Q! N! `* I -
0 }* ~/ @ B2 ~- o; U - <script>
% J2 ]+ H) S% F( m0 ^- w - new Vue({ J/ |3 r; l; b' [0 Q5 T
- el: '#app',
O3 R8 K% D& K6 O, d - data: {- `0 t! N* V* | }
- seen: true! }& }+ e9 Z% m9 Z! ]0 |" F
- } q, A y5 Q3 C" }& g# Y; @
- })
, H. s! X! w( H- d* X0 W" y# c - </script>
复制代码 Z2 K6 D Z+ D7 k2 X3 r( H0 H$ f
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
1 w0 E% Y$ i, Q( a1 f, v4 w - <pre><a v-bind:href="url">菜鸟教程</a></pre>
! M; B$ |, C$ ]* Y: C - </div>
, `' U _9 {! x8 E' M - ) v' |2 D" a# n" }2 t+ M7 Z
- <script>* y8 \- q& i2 L$ f$ h! k
- new Vue({- _) H; P \" p$ E
- el: '#app',
0 I/ q0 d; c2 Y5 A4 e2 ? - data: {
6 L; h7 _, p, K4 k5 S1 f5 C - url: 'http://www.runoob.com'
# H# L0 @2 X3 d+ }! P t - }
. R4 v$ H$ v8 J: f) J - })
; u# V1 s1 M; s# M1 r+ T - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
. g1 L+ @* Z) B4 ^5 k( f* {5 m
- <div id="app">
2 M0 [ ~2 n' ~1 E; G: j - <pre><a v-bind:href="url">Vue参数</a></pre>1 I" q/ d0 m& R7 v* \- }
0 q' u2 o( M8 v; k" G# T- </div>
* w* G4 I; L1 w; j2 { - % p3 ^7 C, e: J# W; U; C$ g
- <div id="app2">: l* g2 ~ ~0 r: [
- <p v-for="val in arr">7 V) l# m6 ~( q8 ^; K: b
- {{val.a}}
, L8 n& @7 x& l - </p>
8 `& L6 U: O4 T8 b, Z - <a v-on:click="tap">点我</a>' F( ?2 d$ j$ a: L! A7 h
- </div>
0 I9 a/ M5 i" \2 f - : p0 `/ ^0 J4 D; v% w. p Q Y
- : T) w# b9 ]6 A$ I" ^5 y3 W
- <script>
$ a1 H* f9 d& o1 @8 { - new Vue({5 ~: Y+ j5 b! c
- el: '#app',
8 ^ b& ?4 @- X7 @2 ?. g. j - data: {
% F$ ]! w" k2 j2 p/ ?, M - url: 'http://www.cncml.com'
% T- ?. i8 d/ c9 {2 P6 L4 L' z - }
* M: ~" h* k7 l - })6 @! c6 W) g- N3 ~) S V& Q- b" Z7 b
- new Vue({! V3 L& g$ g/ s
- el: '#app2',
5 P* I; L1 D, |$ a: v. M - data: {' h" X) f* r' `' g; O0 |+ ]1 q
- arr:[6 G0 w$ `% m) r* q X% E
- {a:'bb'},4 c. o4 Q7 \6 \+ J0 v
- {a:'cc'}. T) d* h( R, w! `: f) r
- ]
. o, ?# y% h8 D, x& ] - },( I% H5 m( |9 z/ E) }) p
- methods:{. L. }9 h* {) d; k' i- F
- tap : function(){4 f8 k% u* B: i: W) B
- this.arr.unshift({a:'new'}). x) H+ d: w0 C& V% i! W- Z! h$ Z! ?
- }
$ R6 `! A, v. G - }
2 k) N0 b' f; c( w) M' B) j8 f* I - })
5 g% T, B% |$ n- h - </script>
复制代码
4 u' t4 Y+ ^4 t7 G3 v8 t/ z) S: D2 X9 x. |- {9 \
在这里参数是监听的事件名。
8 L3 H2 H$ M* p7 ] { |