|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
, V+ H }% X. A; F. u; r# S: f2 ? - <p>{{ message }}</p>
- s O- R: N# A. F1 x3 S& W - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
9 D, {4 T+ N3 _; x2 y - <div v-html="message"></div>/ F6 C4 b/ ^ ~" @
- </div>
1 }* ?/ ^3 B" q# \( [9 X -
: W+ q( `0 x! n4 p0 I - <script>, d$ k$ z5 i! }( e2 ]2 S
- new Vue({
3 Q( V. h. O' e9 Y - el: '#app',
/ j0 T! B3 e( K4 o: c. r% S - data: {5 D' P" _' u6 h
- message: '<h1>菜鸟教程</h1>'
C8 s: N, s" ^9 J - }- H0 ]* R2 h! ~& o! s( I: g
- })
2 r! u1 C" `$ V! H" F! S t0 S- c - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
# W4 ~& j+ L7 [+ j6 ?9 U& a - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">- r s; K u$ J2 Y
- <br><br>; m2 ]+ F, w, I/ Y
- <div v-bind:class="{'class1': class1}">
+ Y5 L: m" x$ n- k! {% V - directiva v-bind:class
; u3 g/ _: P+ c1 m7 A - </div>& {" j7 c8 [! }
- </div>
" Z) C { L/ p& {$ \$ ] -
. g( E: x0 F7 d! o6 C3 }$ |5 x& c - <script>; k% G: r# m5 z% v: \) H$ {
- new Vue({
1 d3 D, e9 B2 K - el: '#app',, |- H2 f& ]' Y
- data:{3 t7 G- y6 z. c% F. s
- class1: false& D' V5 N3 Z( a4 C* y/ |; H
- }
3 a J+ s& D& w E9 r - });
+ `2 E( I6 k- }% f - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">, p0 B. O5 G* _1 V! Y
- {{5+5}}<br>
; F8 c, V$ K* O Q3 R+ c - {{ ok ? 'YES' : 'NO' }}<br>) P3 P5 @5 R. L# h6 ]8 q
- {{ message.split('').reverse().join('') }}
5 Y2 a- r+ b& r9 W# J( t - <div v-bind:id="'list-' + id">菜鸟教程</div>1 j0 Y1 U: }* G! Z6 D' j
- </div>( N6 K- J' [$ t1 E W$ i
-
4 e" C# y$ ?' h; {$ O& ] - <script>
# S+ n" H- `' x+ w - new Vue({0 ]3 {0 g$ A$ _$ l
- el: '#app',
5 n( @& P. o# C" [) _# ~& k; E/ ]+ V - data: {
6 O" C3 B. s" P" W5 t - ok: true,1 n% J7 u* _, [+ _+ G
- message: 'RUNOOB',
4 i% E+ S# w C2 l - id : 1
; O- ^- r7 C& ^8 \' ]; A$ [ - }
' ]0 e# k) f- k5 R U: P - })
! l$ g' u$ b O8 ` - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">1 {8 p0 W4 t1 t6 n( L
- <p v-if="seen">现在你看到我了</p># n+ _; B. O; j/ k6 J
- </div>) X/ u) S2 ^; j# k' E3 |: U4 k7 @
- # s: e) I% j2 Y) A5 r, ^
- <script>
7 {+ p0 Y7 `$ Q) a e - new Vue({; ]1 B( r) ^1 l
- el: '#app',8 f- F' ^, R/ I( {. u# e) ]
- data: {0 Y5 ^+ X3 d- A% S% t e
- seen: true
A/ R" i4 C( | v3 i: ^5 ` - }
. V3 C$ T+ F8 |. y/ w" v. c0 r - })
8 Z; d. h4 w8 f. @' B% ?9 Q4 l( [& [ - </script>
复制代码
! y1 b7 g% }2 H- q这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
$ d6 R* ~& i5 [; _ - <pre><a v-bind:href="url">菜鸟教程</a></pre>/ _% v2 B, E( l) C
- </div>
" D2 v" p3 ~3 a* [8 g0 i2 _/ @ - ) l5 Y+ j: v8 Y9 ]+ j$ h1 w' x: z
- <script>
) w7 v* k; ~& n5 O; U - new Vue({% a$ J* r- L5 t! W
- el: '#app',* I% z# i, H) D! w
- data: {
/ d+ l2 c& P6 T, v: Y - url: 'http://www.runoob.com'
$ T6 `+ p1 b, W- ~; X - }
* ~ d8 o8 l7 D" u! U* S$ g& M - })0 ~9 [* c3 a4 _+ i
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码3 ?; g7 w) {+ ?
- <div id="app">
( W- ~ B, k" O- L$ z* x - <pre><a v-bind:href="url">Vue参数</a></pre>) P, z i9 p( P4 q: V' V) W
. Q/ k5 s8 g% J' }/ T- </div>
* N: L3 g" Z. W# J' g
4 a2 b i+ N6 ~8 Q* P8 U- <div id="app2">
; z1 R* M& {; H3 ~ - <p v-for="val in arr">! X2 i3 P2 P8 p* b9 `0 {" h, v
- {{val.a}}
2 u: P4 W7 ?/ Z) f - </p>% f" O1 N2 W+ K! F
- <a v-on:click="tap">点我</a>3 g3 s* P) P6 O/ v/ [2 D6 K
- </div>* s2 f) d9 B7 f
- : ^$ ~8 j( d' r; N7 ^1 b( ?
- 0 I C) }' Y: z* i
- <script>
" P) V: ?" G/ f% _4 Y4 v( W. t - new Vue({% Y2 `0 Q/ J. N8 L6 C
- el: '#app', X# M& Q, i) s4 D4 S( ^
- data: {
" _/ D7 u9 Y: \8 t0 A# a+ q - url: 'http://www.cncml.com'$ \# R. b8 W. P; ~" ?; ~) }; o/ a
- }
! [3 [$ R* L# w3 W( @ - })- Z7 o4 B6 w6 f) m) e
- new Vue({7 l/ n9 X: D/ Q
- el: '#app2',, ~# ^: L! ?3 k( E) _
- data: {6 M9 s/ |* r7 m2 }8 N
- arr:[3 H0 g* s) {" h$ f& }! U+ {4 @
- {a:'bb'},
" F' n' f0 w% N. |9 j+ p1 x - {a:'cc'} J' D+ |$ n3 B" x* T( _7 D( Z
- ]
0 z! [! @- g0 V l6 v$ \ - },5 X4 D- b5 m2 Q( \! `
- methods:{
5 U- w1 N0 Y/ S n - tap : function(){5 w: e2 J; T4 R! T/ I
- this.arr.unshift({a:'new'})3 D; K+ @$ g% V; n7 j
- }
* n. @6 u& @9 m n5 p! j; L - }7 R! j- _* H" }
- })7 ~4 X( b0 h+ H+ t* o
- </script>
复制代码
7 w8 R6 ?$ G+ e1 y
' ]( l, F+ g3 C
在这里参数是监听的事件名。 - \$ U9 q( _7 c! b3 `7 O, n
|