|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">: P+ } {) ~* a% x, z# ]9 j6 x1 x
- <p>{{ message }}</p>/ _! a6 A5 z: n: Z8 D4 q
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
# K v2 D/ ]% O( R0 B - <div v-html="message"></div>" M, ]3 q/ s d8 O3 `) ?- @
- </div>% f! S" S1 O8 ~# w
-
e+ t# `; X7 o - <script>
. W2 Q% P' H) ` - new Vue({9 ^. P% _' ~& |. ^6 q) J, v
- el: '#app',
; b( _' _ X3 a; N - data: {
' D& P2 D; @9 L' `: E' [ - message: '<h1>菜鸟教程</h1>'+ v7 F9 R: V/ }6 U! C
- }
: }% W7 U3 }* x9 @8 L4 q - })3 G0 R6 P- _0 m8 L! X; Z0 p& D
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">- F. Z$ M p5 [& k5 [6 p' z
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">: C h( @- q& Y$ {+ m; b% D1 l
- <br><br>
0 J8 q7 V% x* Z$ ]7 z - <div v-bind:class="{'class1': class1}">' {5 a7 G( b' D* K6 i) |' X
- directiva v-bind:class n- h9 Q; A$ ~* H' z
- </div>1 c# |/ z0 E9 G$ i+ G, J# f
- </div>
/ E1 `+ D. u! K+ h. b - 7 o5 m1 i& l* r- p3 g3 K" q
- <script>1 K9 T2 \# U3 ?8 T
- new Vue({
# `: P: a6 V4 K* _: S1 _ - el: '#app',$ @1 O# F' H9 C# z1 Z
- data:{5 Q+ p3 [2 a! E6 D2 M+ {
- class1: false
! D% m7 H! h9 [# P2 M) S6 K. n6 h- n( F* s - }
* ^( t9 Z3 T5 r7 ^0 _7 T8 i - });1 k4 H+ K; m0 E. k. Y5 D
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">7 @0 _6 D: Y" o# q' |8 \9 X
- {{5+5}}<br>3 s1 w! ^# H( ^
- {{ ok ? 'YES' : 'NO' }}<br>
& i% P$ i+ t! u1 h' w% k S9 R - {{ message.split('').reverse().join('') }}
, ]# y& e) V. d, _/ I1 Z6 I - <div v-bind:id="'list-' + id">菜鸟教程</div>" E, y% L, w& X: q. x' q
- </div>
# K0 _4 s: A3 c9 N- u, z; E- }. x - 5 F+ {' O$ v7 l8 j* B/ C3 G0 N
- <script>/ R% z( W, B8 N& b7 Z2 p5 h
- new Vue({ H& y; G% R q" |, Y4 T% B( Z; L: u
- el: '#app',$ @" @- G- O. N; O4 H
- data: {
8 S5 i/ o. ]; R: q! H8 Q - ok: true,# W1 X( }8 U7 H' _
- message: 'RUNOOB',
: m- t$ r+ E8 l+ R - id : 1
8 F. M" w5 i# T! P5 X9 q# z - }
% ^6 o( l/ O$ F4 f2 w - })
( p6 r- H; K1 n6 u/ \$ f; v - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
5 Z) g: @9 r4 u D7 i. U - <p v-if="seen">现在你看到我了</p>
. f3 Z; ]/ J0 |! q - </div>
: Q* o3 e2 Q/ Y; J; d" Z0 X - # v" {, B# ]7 h' H2 X
- <script>
) X6 r+ C$ U, b. p( @* n - new Vue({
' a* _3 y/ r' R: q$ B/ x P9 P - el: '#app',
8 p0 o* x) Q0 S( q( s2 [ - data: { @: N# u/ a! Z8 l1 ]
- seen: true
/ A3 ^# _& f4 _& R - }4 `! m0 x# s: c0 @9 K) D
- })4 z, z4 O! |4 C! H% {$ u! Z$ A
- </script>
复制代码
# E& ]8 ?, w; [9 ]2 `这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
% g! `$ H' A, }! J0 `$ d; f" Y - <pre><a v-bind:href="url">菜鸟教程</a></pre>2 b3 o0 G% z& O
- </div>
9 n* x4 p1 q& H( ?- E - ' f# Y- {" K3 U/ t8 \$ J9 i! j& z
- <script>0 ^& j8 ? c( r; z; w' W e
- new Vue({) q2 D7 K" H5 S; G* u7 x1 X
- el: '#app', U0 \1 O4 P2 @; f: f
- data: {
7 d5 o6 _! [ R - url: 'http://www.runoob.com'# U; m2 ]9 ?# g- G# H. e8 | j1 G6 ~
- }
9 A1 X% k" L O( O- o. [4 f - })
% V2 f' S, n, P+ G8 A1 d% T4 f9 y1 H2 n - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
3 u& s6 x; c! @" y- m+ G5 `
- <div id="app">
+ U0 Y9 D4 [- B0 ^" u1 z - <pre><a v-bind:href="url">Vue参数</a></pre>8 K, J* V9 U' {$ B
- 4 K' Y6 W7 Y9 Z. y' B, ]4 \
- </div>
/ p) e: c: N5 t% Q" r1 W& z
& b9 q2 ?" z$ \% K o# n- <div id="app2">; ?8 u: v2 H# d! C
- <p v-for="val in arr">' |! m$ |, Z. X- |6 M& |$ v4 y& Y
- {{val.a}}8 x7 A4 e$ J2 V j
- </p>/ i; G5 ^# C% Y7 Z: M% u
- <a v-on:click="tap">点我</a>9 w/ a, C3 k. |( h, r
- </div>
$ {$ D% M* D4 q* x9 k
@0 v, D& [" k2 p3 o/ h
+ p3 E4 Y: g' c5 g( W' D6 _1 W- <script> X3 ~3 N1 O% a8 G) I5 H
- new Vue({
, H4 |) O+ N) V% u - el: '#app',. }& c# D8 h: ?2 n2 f
- data: {9 o% n/ `. B: L! S' M) a. D$ L
- url: 'http://www.cncml.com'
* h6 j. [( u% M( ^, d+ r0 m - }+ n) R! {. u# \; F5 `' K- _
- })
% t- I$ k4 N' A' r; C# A: i - new Vue({$ a4 b" x9 f& @) R. p2 F- _
- el: '#app2',
o: B O4 F8 W& S. C - data: {8 c) c: u5 Q. x) z7 D0 N/ H
- arr:[$ M F$ w# p; O5 U1 H; |
- {a:'bb'},3 j% F0 X7 v9 i8 O
- {a:'cc'}
b, H( H. Q- ?; a) ~ - ]6 g2 k5 q+ p2 Q
- },7 a% j; k+ U& _9 p/ h, Z7 {
- methods:{' L; E! i8 r' s% [; S7 i5 i8 r
- tap : function(){
, ?! K/ g8 j9 H6 ?1 w - this.arr.unshift({a:'new'})
" y" _) c# b" I/ M7 V8 C' i6 E - }9 {/ i! E9 f5 e8 P7 c3 A/ ~5 [7 ?
- }& D/ u" X# q3 L D/ E1 T6 H: \
- })+ e: ]' m! j; v3 k( C# a
- </script>
复制代码
2 B7 C0 D' w* C8 q; Z
, D, W. S2 V4 T$ o
在这里参数是监听的事件名。
( w, X2 u/ L! r X' r |