|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">8 h% V* A% f1 V0 w6 Z; s
- <p>{{ message }}</p>- I, u# I" `5 v8 j: r Z& q$ {6 }
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
& M. r3 c9 @4 ?% [ - <div v-html="message"></div>) x: _' x6 N9 Y5 p, m
- </div>
! z' S, z; [, |3 z% M+ ^# `) p! H6 x - / `2 U' f8 P9 i) o' Q6 G8 W
- <script>! {! o$ I( p3 M; T" l% ]0 w
- new Vue({
) [/ K$ B! k: z5 i4 n - el: '#app',! V1 l$ V% P; Z( V& I
- data: {6 V7 K( M/ |0 \( I* _
- message: '<h1>菜鸟教程</h1>'# w! t3 b; o' u. s; s
- }' ?. J( `- B4 M4 X6 o: F) w# a
- })
! F* h M: _4 | - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
$ A- ~: M) r$ @, ~% e - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
( @ \8 R- k# I( ?" S2 U% { - <br><br>0 j }' c" h6 r6 I. D/ ]
- <div v-bind:class="{'class1': class1}">0 S7 U. q1 B" L6 _7 f
- directiva v-bind:class" _8 E9 c$ T- ^9 D
- </div>6 n& D, [$ @9 x7 S
- </div>
) p8 H. u' A' V9 v+ z' P+ T - ' Y' q8 f1 w4 l* V6 Q
- <script>0 ~/ M# S7 ~: H5 J
- new Vue({
1 P2 b. e" q! q - el: '#app',
$ A+ \* ], m6 ?2 k4 t - data:{
9 P6 b7 U, ]1 Y% }; Y* |, c - class1: false
1 I0 s, }0 U4 ]( \ P( X2 C - }
9 G5 g: Q( o3 d6 P$ ? l4 W - });8 o) q5 X" g' P
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
8 r) A. d, K$ e9 K! _4 U+ K4 K+ M - {{5+5}}<br>
# P3 m& e; W# K: M" a! p - {{ ok ? 'YES' : 'NO' }}<br>
" y: v% B$ g- z' K0 G& \' {: z - {{ message.split('').reverse().join('') }}/ i+ a w! G& i
- <div v-bind:id="'list-' + id">菜鸟教程</div>% m) Y& b F' l) I q0 E1 H! u. e, I6 K
- </div>) b! F: H" d3 o$ ?
-
0 _* Q, t4 A Y0 i! `! z9 D- } - <script>
7 L* M% |! ~' m9 g. u - new Vue({ ^, T9 M9 C: E; A4 A
- el: '#app',' j/ d9 a; ?7 j$ w; C
- data: {: i m2 W$ G4 X& I( m' [4 y
- ok: true,
, E# ?8 O! u( _2 y. |, o - message: 'RUNOOB',0 [& [+ A% @- C% Y) g
- id : 18 c3 g: k5 l) M: L8 K
- }
* A# X L; r$ O+ w' ~$ a& G - }): e" Z1 ~+ Q" P9 o1 y$ `, T
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
; n5 [! w h" }/ F- y' e; q: K - <p v-if="seen">现在你看到我了</p>
7 D0 z3 v5 ~' c! g/ x3 C6 e5 A: Y - </div>7 C$ [' y- I4 O( S N$ A, ^5 @* F
-
. ?4 E M/ R' `/ s- Q$ Y- { - <script>
' e1 j' Q8 }) z$ G - new Vue({* ]5 b; A4 N8 i7 P; D
- el: '#app',
% G9 m& O) _# |5 P8 X0 d6 S - data: {
: V6 b& v1 `8 ^+ T$ U - seen: true; d9 e# d1 G7 U- A; f3 m
- }
" V/ x. {* F( m* y - })
5 A9 i) O) D* i4 o# T; [ - </script>
复制代码
, x( r( w n3 h) _这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
8 s6 }4 {9 y0 W0 y8 i - <pre><a v-bind:href="url">菜鸟教程</a></pre>/ J& y# I1 ^4 Q8 |7 b) L5 j
- </div>
2 U/ T5 G# t6 j: c$ g( j6 [ - & `0 T" q o, `; l, N7 ?" T7 G/ B9 {
- <script>/ ~$ a% ~! c+ P M( W
- new Vue({
( G/ p q8 b( ~4 T7 d1 e - el: '#app',2 e0 D" X4 Q6 ^! o. d: w
- data: {4 }3 j8 v, m$ n; H" \
- url: 'http://www.runoob.com'+ @! ^4 D9 H8 I" N) _# ]. b; _
- }6 Z# r- v- k) e9 `* Q
- })1 | |, ~# O, D& V; v. V; y8 j
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
/ f% y1 d8 V0 ~ `3 i d7 v+ B
- <div id="app">
$ U7 Z2 \7 b7 [0 R+ a - <pre><a v-bind:href="url">Vue参数</a></pre>
, z1 P9 X' ^2 V( _# G7 A - 6 P$ t9 o1 T4 e) i" \0 ?6 ^& [
- </div>
4 p- c* ~8 z) [ p+ |+ z
4 G; Y1 x7 ]+ l l1 c- <div id="app2">
1 Q+ z; x' X: e- m' L/ A - <p v-for="val in arr">9 B$ r' e- u5 R7 S
- {{val.a}}6 b% x" S' u* C& u
- </p>1 A( z7 N! R0 ^6 V2 m
- <a v-on:click="tap">点我</a>* n7 y* b0 r3 a6 W
- </div>
7 ^$ E+ c/ x/ E& _ - 6 W* f$ L8 Q* t' `# l6 V
9 H% O1 S8 o2 W1 J. X- <script>
/ l! X" G- p- d$ G7 E - new Vue({
) Z3 v% F2 f6 \0 q* J$ o - el: '#app',
/ k7 d+ b8 j t2 F - data: {! W3 K% L& J5 x+ i
- url: 'http://www.cncml.com'. N4 f) {8 U g {9 A
- }* V* F; V4 j. h7 I3 F& i5 b s
- }), k* C, |& s+ o' n7 `
- new Vue({
- `" V9 E9 \ }- {1 Y% ?$ p* G - el: '#app2',
( N: u* w" \; s0 G- ^ Z3 D5 h - data: {
- ]4 ]5 }0 o4 U$ J/ W% ~1 }( P3 H - arr:[" |1 e& E0 F; T; b/ [9 l. o A
- {a:'bb'},
. F6 d- ^- X. {1 S3 r* ]4 B/ Q - {a:'cc'}1 h6 w; O3 K' i7 p# G* G
- ]
+ q9 _& ~5 ?4 `6 C4 m - },
' t4 i/ Y# y2 N+ u( f - methods:{
: d1 I6 ^; m: d5 a# \4 S& O2 U n - tap : function(){$ l! K% r" U }: h
- this.arr.unshift({a:'new'})
1 I; z1 |: `0 r0 g - }* O' m' _( l! x; t
- }" l" i' a7 ~; y2 Y( u/ {4 t, `8 I. ]% p
- })
! Z/ [) l# n7 b2 J7 z; v* W - </script>
复制代码
0 A- D9 Z k$ _! ^* Z5 ~; \7 d' n8 n( S) T3 ~; [7 r$ P5 u5 h5 z
在这里参数是监听的事件名。
% b. N7 _5 B% H8 b( G8 n$ a% j3 Z% x |