Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">1 J/ j$ u; ?7 `* U; O
- <p>{{ message }}</p>
% U& P. ~+ s) C" r - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
3 M( _) B1 o. z- Q5 _ - <div v-html="message"></div>
& A, b2 [0 t2 I - </div>; P' W- M# B! ^8 o, i2 @$ i
- 5 J7 @3 R1 G; w$ {
- <script>% b6 {. S8 ?7 w v; |; q
- new Vue({: x+ _( f0 U2 j' g( z
- el: '#app',
9 d: Q6 E2 L2 p* G8 ?6 w5 Z - data: {
! I& A+ t. d( G, Z1 n - message: '<h1>菜鸟教程</h1>'- h5 f8 D7 Y: P5 O6 U# o
- }
" \$ P6 `* z( i - })
# z1 V6 m% N+ p; q( h; @) x+ W - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
6 y4 o2 n5 X8 y - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"> a A/ T: Q) I" ]0 x* A) b
- <br><br>
D, g! e! J5 K - <div v-bind:class="{'class1': class1}">
. S" f/ V7 H7 | - directiva v-bind:class7 x4 j, }5 E! W$ M/ o1 ?2 x
- </div>* R6 f9 T( ^1 q9 B' H. v
- </div>
( C" w3 Q: D! ^ M0 E - ) ]7 E" z0 g) z v+ f$ o7 D. H' X0 ?
- <script>, c5 B8 w2 S0 r& s6 e
- new Vue({
/ g. ]* r% q1 \9 S6 l. _ - el: '#app',( j) n& d) d% o3 h6 N( U. \
- data:{
% @. |" i7 i& ?- k! j - class1: false
* j# D; S' Z$ ]6 L4 u) |1 a4 t - }3 f: W, Q$ D' d% A
- });
, b, d7 {& X* \5 D9 c* [% C - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
6 D! t4 ?8 }; |. T7 }- p - {{5+5}}<br>
9 K, q; e" W0 R& D+ _ - {{ ok ? 'YES' : 'NO' }}<br>% J& b- v+ C1 z
- {{ message.split('').reverse().join('') }}6 I$ h& t" e8 n" c9 {& {; V8 t# ]
- <div v-bind:id="'list-' + id">菜鸟教程</div>
; R9 _/ ]6 d5 A( i- b) U - </div>
K; X$ K9 i! i+ P -
i+ D8 @, _& m, V - <script>9 N1 u* c) j* ^3 K
- new Vue({
3 Y" D) }+ l: S - el: '#app',& P. t# I1 @. G( O, U& ^2 O/ |
- data: {
" R, f- W5 c' `3 E( T - ok: true,; t( A$ b7 ?9 {. ]" P
- message: 'RUNOOB',
# [5 k! Q0 ~) B/ d6 j! K. V - id : 1; V- m5 o8 x0 m5 U0 h
- }) Z7 u% M$ w; D) {4 z
- })
5 @* d: a Q0 x8 G9 Z2 a - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
% Y5 Y. w& v" Y- r8 ^/ R. Q - <p v-if="seen">现在你看到我了</p>
' j Z1 w( u8 b+ t- t, ?. h) s - </div>8 ~) t/ _5 C% R( \! v
- - L: S- K, h4 I
- <script>/ `& D* u& D* X% j) q" R/ ]' I
- new Vue({
1 S7 H" w: q# i - el: '#app',
* }; O4 E# m' E: F; W8 i" e( k/ ` - data: {
/ P: M6 _; ~: v9 Y7 i - seen: true
2 W J- O' e. ^* I1 T. ~6 ]5 p, O - }
9 W7 q: V `9 P X- ] - }): I l3 ]4 g+ U* ^( M& w2 `
- </script>
复制代码 * w. s7 V' r$ ^
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">1 Y. L& n; }; `! E$ l7 C' ^' ? y' e
- <pre><a v-bind:href="url">菜鸟教程</a></pre>( o: d: C" a* D$ ~- o. k
- </div>1 v% |$ s- L( ^
-
1 h* O. q1 X5 E9 R& D8 o* W - <script>
& y1 J& _( B: c; H# q% Y - new Vue({8 y4 G' G! K4 ^- t; R' Q$ P
- el: '#app',4 E2 k. g6 p) v5 m* I& Z+ q9 C& p; d
- data: {
* V8 M9 q; Z3 X$ ` i } - url: 'http://www.runoob.com'
$ `: \$ S9 r. j4 R u& P - }
* U: W5 ^4 C# G h3 s3 X - })
% K4 I9 |/ b2 f6 F - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
1 `/ ^0 |7 q& x1 [& u
- <div id="app">
1 U3 ^( n! _8 t" k9 d - <pre><a v-bind:href="url">Vue参数</a></pre>3 I6 g- Q5 ?- u1 W) k% n
- ; b9 L7 X- v0 x s4 M [3 J1 p
- </div>1 d' n: @$ i' `3 C' a+ A
- 1 }( @# O0 R! r3 g/ r( J0 C5 A
- <div id="app2">
6 V4 V; N3 h" q4 @5 c+ v. ?) J - <p v-for="val in arr">% h; l5 p4 ^8 x* Q' F
- {{val.a}}7 V$ {* n6 p( u* B/ Z
- </p>. a& H# m. [, `. Z5 d
- <a v-on:click="tap">点我</a>
% j1 `- \+ @- ?& a/ X) L4 D - </div>' J R# t \$ t; O) j8 `6 N
- . ~. h# Y( G9 O* g+ z, ^" V( q
- . |0 T; z) q! _: R5 R4 H* H- ~
- <script>
; g5 p# L9 k7 z* t) }; H6 |" z/ f - new Vue({2 C! U% E3 {- j7 d& g1 { a
- el: '#app',
- l1 T, e8 m6 g( _2 q0 [ - data: {
, n) b) Y: m R. p$ q3 I - url: 'http://www.cncml.com' r6 T5 c8 A( M5 L; b+ |
- }
* }' W( r7 { |7 N - })9 m, M) g: G, v* f
- new Vue({" {4 F0 x) t1 [
- el: '#app2',6 d$ f& E7 H0 [: D
- data: {, H3 \; h( E I8 C
- arr:[% q( B" [! e: ~* Z# x
- {a:'bb'},* c( ?- y: A# ~, |/ z. y; x; g
- {a:'cc'} C, _$ v' p- G7 ?. O; J$ S
- ]/ d! v5 |. ?3 w% k
- },9 Z* h. W1 q( u! L! a1 T3 ]
- methods:{
- c9 o$ N" f) b& m0 n! h - tap : function(){( D2 l# b' M+ p9 g; [7 W
- this.arr.unshift({a:'new'})
" d9 N, a9 E# { - }
* a# h. L: H% Z- N! B - }4 \' i5 ?& u) _$ o6 g! ]. V- C
- })
! N2 x9 V) J1 k' d& t& f( X4 a - </script>
复制代码 & K7 H$ R" O4 r* t( C% q! F9 Y
& S0 Q6 Q: d: g5 j
在这里参数是监听的事件名。 " J6 u y# J% r5 K
|