Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">; n/ t! P: s. v9 D5 z8 T8 O( ^
- <p>{{ message }}</p>
) H* ~ \! c5 C4 b" t - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
" \, E: N# k$ v3 O - <div v-html="message"></div>$ S4 }. L% g+ a/ P
- </div> ^" a5 q) P2 ~
- $ x B$ d! A# d/ K8 H9 v
- <script>! z/ ~6 V* F g, \6 a
- new Vue({
" J' ^, Z0 E! e% P. ]+ Z - el: '#app',
! P2 h- t+ o3 ?2 w' l - data: {
4 s6 w8 x/ D5 H3 l; f - message: '<h1>菜鸟教程</h1>'
$ a. {# x: [) ^* Y - }
5 D; ~: R/ \. Z - })
8 a. ?; H; _: N# \. t4 N7 @ - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
$ [9 Y {6 h# i% G5 U- R" r - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
7 ?$ Z, P+ S1 o - <br><br>) M2 e* M4 G$ \; z; D- d
- <div v-bind:class="{'class1': class1}">, m+ b2 l/ w% D4 b5 S
- directiva v-bind:class
( I( R k# ~% W( L - </div>
Y) g/ m d7 p. {& x - </div>' \ v) o% H& k! z. m
- ! Z) J+ t7 D! R9 j0 H' g4 g
- <script>
2 b* d0 ]; U# v! s- P9 U - new Vue({
e, {9 i+ _2 o1 i, f! P) o - el: '#app',+ i9 z4 F/ |4 a0 V7 ]
- data:{
8 G6 D8 F. O& K6 z - class1: false# `1 o' Q' B' @
- }
) q3 W& W. a. d: \7 w& K+ F! [2 t. j - });$ e2 } t; R! e8 H! F/ j u# l# O
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">; X) w5 _. Q8 }& j5 Z
- {{5+5}}<br>
/ \& W$ v; S* P7 H - {{ ok ? 'YES' : 'NO' }}<br># @" J; r4 b) Y- X. H; x
- {{ message.split('').reverse().join('') }}. @& r) ^/ y! \
- <div v-bind:id="'list-' + id">菜鸟教程</div>
8 v$ ]* O1 b2 k' e6 g9 D; x - </div>
4 F5 N3 ]/ C5 l# G8 R -
0 N8 P* C2 K+ r( m* i4 T+ F - <script>7 V7 K+ ]5 M+ t3 W8 e' p3 I
- new Vue({
+ D5 Z9 B9 a3 O/ T$ I - el: '#app',* p G( }6 D6 r j7 [. N8 C
- data: {0 l! w6 g% P2 h* A5 ?
- ok: true,
- r9 ` a9 A8 A, R - message: 'RUNOOB',/ A( P" W5 H# x* Q7 k
- id : 1" Z9 f5 ]3 h& w! G9 Z0 w: _* v' E
- }
) o( B% u4 V5 p - })% p4 X! l5 S2 _
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">5 x+ l+ T8 O* _4 o$ ~2 s2 W4 [' v
- <p v-if="seen">现在你看到我了</p>7 Y* C+ }' e6 q* I
- </div>* l' }( p, T+ ^6 G; `8 d: H1 J
-
3 x4 @6 X9 b4 H: p - <script>
/ L/ \6 R; h: Y% ]4 p1 _ - new Vue({
Q/ `7 T) N% a, [0 ]# ` - el: '#app',3 f; z6 Z$ k; @0 ^
- data: {5 P- K1 X) ^" _5 V! h2 D0 {
- seen: true" w( I3 r4 N& [) p5 M7 @+ J4 M" n6 M
- }: [! ^# |! B8 H' ~
- })
* S' D3 ^9 A4 M8 B+ i/ W5 I/ Z/ Y - </script>
复制代码
; s* a3 d" L" P# V# R$ X, a/ V; x* c这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
8 x: o0 P$ |5 R( y; H - <pre><a v-bind:href="url">菜鸟教程</a></pre>
( N. W0 M/ n. E - </div>
6 Z. P8 r, ~ e! h3 y$ m! Y -
$ d8 H" h- l& V: E) m. Y - <script>
7 u% B+ I; p; H- e8 v4 A - new Vue({* x- x- N7 b$ A7 f& C$ s
- el: '#app',# T& j; X2 H; M7 @/ A' y( a
- data: {
" { r2 [# M8 k h4 l0 Z$ O - url: 'http://www.runoob.com'
% P4 Y. E2 x Z- ^# J& { - }7 H8 I L8 F/ S9 ? L7 L+ z
- })
7 A& p) m3 x5 C" r* s - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
5 J; `1 c! U' g0 y6 B
- <div id="app">9 ]; l+ N7 C# h& h
- <pre><a v-bind:href="url">Vue参数</a></pre>5 i% s* Z4 Z* X0 G& I$ q
U# q5 D/ ] Y' M5 c J- </div>
: a8 @. b- v E$ A) S - , i2 W" c2 K$ R. I! o1 b
- <div id="app2">
! y4 x: Y+ x: T3 i7 p" x - <p v-for="val in arr">
& {0 R6 M7 i! g - {{val.a}}
^1 h% r( z" I - </p>
! i5 c- J2 D. e/ z; ?! i' ` - <a v-on:click="tap">点我</a>' B' f+ A" _1 C- @- K# H" N, X$ v
- </div>4 Y. l+ w+ u# D$ o* P6 J
- & G; m4 N& X0 r& O0 z
0 Q# O$ g% R# v2 v- <script>
7 v% J5 S# Q l - new Vue({
' z3 o! f* V; B2 I& ` X# K! I* s - el: '#app',
" K7 u5 m+ @. O( q4 Y - data: {
2 z/ h3 ]* C4 I1 i: V - url: 'http://www.cncml.com'
' z' N. Z: A E/ s# M - }
9 D; s9 W) J3 ?9 s6 Q l - })4 F7 j- D! J5 @+ {
- new Vue({
2 p0 K8 ?& P. {/ u. F - el: '#app2',& O- g. H& S: j2 M# A
- data: {$ {# {( J$ y6 l ^8 z7 h
- arr:[
) i4 ^5 ^4 l: D; Y5 { - {a:'bb'},, ?9 n; p2 |, H' j
- {a:'cc'}
, J; @# T2 Q3 C - ]+ ]8 g# U' l0 Y4 O- v! T
- }," s# B% S0 J: }1 T1 A) S5 Z% e8 D5 U
- methods:{' f( E& [4 s2 B; Q2 y. ^ v
- tap : function(){
( q# G2 L7 Q' j - this.arr.unshift({a:'new'})
4 Q& n& ]* V/ q' t - }
! Z3 R4 u( D. S9 t8 H6 q/ m5 K! V - }' H4 W5 c2 ^, T6 f0 P& d( w
- })
: E2 J' I# V5 G" h# R- W$ [ - </script>
复制代码
1 C D8 u* F* o# r" }5 k+ R2 n9 p1 f9 \5 o5 e: Q
在这里参数是监听的事件名。
- l& L( J. Z' W4 S0 b, w0 q" a8 Z |