|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
$ j6 \( j" ^- n - <p>{{ message }}</p>: j( y8 l6 J3 _% A1 g
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">; n' W* ?- S- z8 s, Z
- <div v-html="message"></div>
3 s8 S. r7 ?, W/ j- E) l% p - </div>" c+ M% }6 E* ?7 q p
- / K& M0 Z# Y* l* W& w
- <script>
7 S7 L; H( ]9 V, r$ K$ F4 b - new Vue({
3 o% J1 G. W6 t( B - el: '#app',
+ N; p3 s+ i5 S+ |9 N% y - data: {+ H" W. B) G( j [
- message: '<h1>菜鸟教程</h1>'. v# y ?& `( A. }# @- P) K2 @
- }
7 F. c6 a% _: i - })1 e4 c4 h4 s L# l" P6 P" r3 A. J
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
: ^* q6 m' N$ D. B+ y$ }+ W2 p) ` - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
1 y" I! x5 t* _) C0 u - <br><br>
2 ?- n6 X! m f3 R - <div v-bind:class="{'class1': class1}">) w9 L/ t- H" j H' b$ w3 D
- directiva v-bind:class: D& M4 \& f+ A
- </div>
s% s" z, c- a! z/ L$ O# g, M - </div>
3 F( [- W3 w& w* L5 B* L0 E -
# _$ |* ^6 _* E- z0 S - <script>
% @4 [/ L. [% J7 j0 p" @ - new Vue({
+ n6 A4 A# s" G+ x - el: '#app',
$ ^. O; O: l z! p8 t( y' O) J - data:{
% s: R2 W9 X. I9 a2 e& W9 S* [ - class1: false
: H# z8 \2 P% b0 W. @" \ - }
" c6 r' p; }% C; b: F7 m# K - });/ V, t! t9 w b* ~6 k! p# |
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">' R9 S% K4 X4 l6 W( r2 {! D
- {{5+5}}<br>$ G- H9 c" n& l5 i
- {{ ok ? 'YES' : 'NO' }}<br>5 j# x' g7 k( h5 T8 k: Q
- {{ message.split('').reverse().join('') }}8 O( q# B9 j4 V3 C6 U. K
- <div v-bind:id="'list-' + id">菜鸟教程</div>
' v* S% U g, f. d0 q' n2 |2 O2 P" K. Y - </div>
* I3 y1 n$ p/ ?3 o" r2 \ - 7 ?: r8 }* Z8 E) W$ G5 v* [, V
- <script>. s2 F4 X6 g( ~( q2 J7 M5 z4 H: o
- new Vue({
# R. M! A |+ v# ?4 k# o - el: '#app',+ a" q( x8 Z4 G- e7 ]
- data: {
8 R) P" n$ n! X: \ - ok: true,
+ ~9 x% _- H6 j6 m" r8 c/ }4 a - message: 'RUNOOB',
_' X1 a& ~, T7 Z7 R, f: J- K, ` - id : 1
: |0 ^* T$ Y9 H - }
5 X: Z4 k1 z% G" g& [% R - })
. I5 n! J/ a3 f. x2 L' O7 } - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
0 _9 t0 A/ V6 W7 e) h. {" D - <p v-if="seen">现在你看到我了</p>
3 I- E: J; h! {9 Q. Y - </div>$ [" N7 g7 @' ]7 F2 B9 X* H
-
: c6 x+ W0 D; C4 q5 z( t- ?+ P - <script>
8 G3 e' S( h" e6 D2 w$ f, z - new Vue({
9 T* ?( ]! y5 O2 d3 H - el: '#app',% d m9 X/ H3 }* P. Z$ b! y
- data: {5 S. E r. c: T$ l! w: f
- seen: true
+ A! x4 ^% T2 u - }
- `" z4 x& [- j* l' q A! N - })7 _7 S* g; _2 n) z1 M8 W2 K7 G% P
- </script>
复制代码
* \ {# _" |/ ]4 G3 w4 A- T这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">, {: f4 d4 a' \
- <pre><a v-bind:href="url">菜鸟教程</a></pre>' U. `7 N$ ^4 E
- </div> b6 _5 _! U: [+ x* z
- 0 m$ X2 F( E6 } k6 S- u5 H
- <script>
8 [/ X# @5 m+ f9 t0 ~ - new Vue({
y) R6 R( @- W: t - el: '#app',
" u; k4 Q" F$ r9 w - data: {
! o+ L% h4 S+ I1 z5 L3 H$ O% u - url: 'http://www.runoob.com'
+ s9 F# ^( n, A! F2 v1 G - }
0 x$ j, m! k0 m4 Z+ K - })) M2 w% A; }7 f2 V% c3 j% D/ D
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码$ I, K3 M& ]5 l# w( j7 E
- <div id="app">
) ~" M* J! v+ h$ r - <pre><a v-bind:href="url">Vue参数</a></pre>
% W! |* o, c6 P/ k
) `) p0 q1 C. J6 Z# X$ i- </div>9 L3 R# @9 L3 h7 B. b
5 v7 r/ c! E$ m- ]8 |2 B. [4 b, g0 z- <div id="app2">
. h% N& g* j6 }. Q- c - <p v-for="val in arr">
$ k/ u% `5 C+ j6 V9 D D. V/ g - {{val.a}}
, h- u' |2 \/ X8 q, Z3 p, w2 @ - </p>
; Q+ \% U" P* U* t q+ h - <a v-on:click="tap">点我</a>% u" l. ^- S9 j4 Y! H
- </div>
5 x& y3 c' h9 T8 Z) Q& @ - % I/ @7 N0 E- f' l% Q/ o& ]; p. e
- ( n6 R7 P0 z5 A
- <script>
3 ~ h$ a2 u2 a! Y - new Vue({4 R; S4 [$ i+ V) g" r: t H7 L* J
- el: '#app',
2 L. @% K- L/ R; @) i. b - data: {
4 [) ^- w3 M- Z, S, S/ E y - url: 'http://www.cncml.com'
9 J3 ^1 ~+ ` h* J - }
6 f( e7 k9 h+ r3 {" [+ N# F q3 Z - })7 \, ^' ~: t! q/ q
- new Vue({
- o6 }( \# y/ R' G% M& x0 K z$ t1 @ - el: '#app2',8 `0 t) r m: I$ }9 k
- data: {
) \; M' i$ c/ P) M' x5 A: X8 c - arr:[5 A& }2 x# [& V2 ~" i
- {a:'bb'},& K+ w; T( q. \! P/ s1 c+ }1 h
- {a:'cc'}: o* @ ^. M F4 O9 P
- ]' ~1 K7 z& N& Y3 o6 l* [3 N
- },
D) j) L1 @: }1 H& a$ m4 ] - methods:{ C" }, a0 _3 S& x0 C
- tap : function(){" H' m0 }% ^" G8 d
- this.arr.unshift({a:'new'})
$ }9 F& X2 y. y4 h3 D - }
; |& g K( Z6 W# E2 F& @ - }
0 F5 m% _, ?! ?+ b, U/ J - })4 s" I- z3 p% S# l
- </script>
复制代码 - e$ \- n) Q g0 P
6 I: ?1 g# o5 x2 o- Z( U
在这里参数是监听的事件名。
6 B) \9 J' J6 e% _+ M4 |, C' T8 g3 t |