Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">" \, A' K7 n6 k6 u/ m( n2 l* ~
- <p>{{ message }}</p>/ w8 I4 {8 K7 z+ j) A2 ?+ T
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
! Z- e$ J9 k( h- p( b9 o0 S - <div v-html="message"></div>: ^6 M, c; l2 w) i
- </div>. ^) W# y! K1 {+ ?0 @4 F3 T* i7 v
- ) A( N$ o9 O6 q+ d. l" ]0 o8 W6 t
- <script>' @1 |) Q% \, u0 ^
- new Vue({4 K3 M; Y5 A+ }8 V& x
- el: '#app',6 j2 J i! i" L0 G
- data: {. J: K& w# x. ?
- message: '<h1>菜鸟教程</h1>'
, h) T; o) }9 b7 X9 x* w9 ^+ @ - }2 n" T7 Y2 k i( a9 j Y
- })% n$ `' c& v$ i/ @. ]1 R) S8 F
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">$ k' l. l$ x, L% N
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">7 {9 X d. Q! Q3 G4 H8 ?8 w) T/ n
- <br><br>
( ~8 v0 e! y, Q- o - <div v-bind:class="{'class1': class1}">
+ x* E" }+ o/ S' l0 m - directiva v-bind:class
' r2 Q2 \1 [& n. z - </div>
) r$ X- I6 P6 M* o - </div>
! s! _& |/ @ I% o - / N2 ~* ~( K5 ^
- <script>
! a2 q( f( ~& h$ f' W7 K/ F - new Vue({! D* L! Q3 B' o6 w7 I! K, z) O0 ~
- el: '#app',
4 J S5 c' I0 X4 W& B - data:{
5 P* x2 D8 a f3 i - class1: false$ R1 J2 d! Q# Z: N
- }
* b O: z2 D. Z5 H- k1 O: Z( ^5 o - });% f$ L x- e C* e+ K$ o
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">/ x0 J$ K6 ^. ?: B
- {{5+5}}<br>
# M# i/ L2 f; h3 s8 o- y A - {{ ok ? 'YES' : 'NO' }}<br>/ e, `! |* m3 u- g* w1 @& G0 q
- {{ message.split('').reverse().join('') }}# C( |3 k8 b1 {$ s! `& X: W. V% {& p
- <div v-bind:id="'list-' + id">菜鸟教程</div>4 Y' V0 V: i" K( P2 R
- </div>& U, Q, f1 J) n6 M/ y
- ( J2 O( Z! A5 d4 D) q! [# ^. E
- <script>
* B& b; S2 ]3 w* T7 C - new Vue({
; i0 g$ v1 c5 \+ f& C- T2 C. a' M - el: '#app',
" v# _2 B- Z3 ~, A! ] - data: {3 T2 a. e* j+ c9 ~6 `
- ok: true,' |' E! v0 f3 J+ m$ S9 C
- message: 'RUNOOB',4 d$ q$ q+ |5 \5 C; |1 r
- id : 1
6 A' P+ s X3 N; I0 S$ F - }% k7 b* h3 ~) l1 O1 {3 g
- })+ |) s2 a6 V9 ^8 C: L4 Y
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
1 w' w, \# Y5 D5 t - <p v-if="seen">现在你看到我了</p>
# x G c- i& `( z - </div>
" d/ u, W1 A9 E( k2 |* ? - 2 h: [# b0 v$ \/ {: }1 C
- <script>
. \/ r6 Q' n8 ?/ [1 W2 L - new Vue({4 {5 v$ I0 T/ f( O& P, k5 G
- el: '#app',) g$ x3 f4 Y# ` E3 J2 X0 O
- data: {, E1 S% J5 h# T: D# j/ ?* j) P2 }
- seen: true2 g5 @- T' O/ b& Y _4 B9 F
- }" g% Z3 z0 k* R/ z5 i7 K/ M7 M& m
- })$ j ^. i' `8 S; X$ Q
- </script>
复制代码
, P, ?8 {* Y' t, y# N7 q) c这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
2 t: i( i+ e& q3 o( | - <pre><a v-bind:href="url">菜鸟教程</a></pre>
6 q6 s) |7 V- F& M# O6 g. \ - </div>! M7 G8 Q8 B9 U5 v) f- o6 @/ q/ x
-
, ~8 w% @5 p# n4 t - <script>
3 S2 D) ]' ^$ X6 b - new Vue({, ~ R2 s! I. M3 r) a# G8 d
- el: '#app',( x; f$ \+ I+ v( z+ x
- data: {) U, J% J3 p! _( _
- url: 'http://www.runoob.com'# t+ {, M& f' l& v
- }. J0 S% f2 V# a6 {0 p I# M
- })
& g% K0 t+ Z Z* H - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
8 F- l, \9 d- k! ^- f
- <div id="app">* C! W* P7 w$ ~5 C3 ?6 _
- <pre><a v-bind:href="url">Vue参数</a></pre>4 I$ L) C3 C2 e, V9 x
& u5 c+ b, Y% q- </div>: w7 C% \1 I8 Q
- }$ O* V" K$ r! r g1 `
- <div id="app2">/ f7 q% o) D/ ]/ E" g
- <p v-for="val in arr">
6 T1 m% s8 e, `0 f( s - {{val.a}}" `9 c- F+ E6 W* P
- </p>; _5 E& k+ o4 t
- <a v-on:click="tap">点我</a>/ x6 B& D4 E; a: ?" {
- </div>
?) V! Y; x: h x% J R - , ?4 w) M5 s1 p2 @
- ) d+ Y: w; t1 W% n( @+ D
- <script>
" Y: m `6 f) Q& V+ @6 @ - new Vue({
/ j/ K7 C1 t2 _8 o# Y - el: '#app',
& u! l0 d1 J3 k - data: {
3 ~% }2 K2 ^/ D8 O - url: 'http://www.cncml.com'
+ V$ |% |9 p7 M" f7 R# C- [% [ ~ - }
. t$ x, H6 H% _# \ - })/ E4 J; r, }! P% U! P1 l
- new Vue({9 J: `3 F! a, c0 p' @! z; R7 d3 Q
- el: '#app2',% R4 b* s' B7 c9 b, [* X- m
- data: {
7 k) {! `1 j6 ^) i% V+ K. R! S - arr:[
" O& P0 D3 a T' g" k% p, k' } - {a:'bb'},
) ^$ ^- p7 C* `% ` - {a:'cc'}
; C( l( w# T# b1 b: I& K2 E( a - ]
) p; H! F; ^7 M' S - },% K8 }# X& g( w F5 c! ]
- methods:{3 w- g+ ~* ?: ?- c, N* `% I& Y
- tap : function(){+ K8 L( K8 c1 y% w
- this.arr.unshift({a:'new'})
: s/ }9 P! M# N4 W- @ - }+ n6 t6 b7 z) A/ `8 I' j* q
- }. I& _! ^. B2 E2 Y c' Q& B; p
- })
1 {& Z S( r: J1 f - </script>
复制代码
& V4 z4 c L+ l: G0 m% n* `2 t; O }* g; X: I* [
在这里参数是监听的事件名。 + ~2 ~, c: K* Q, ~6 E+ B. Z
|