|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
) k9 c, D% w/ G/ A( q5 S& a( Q- y9 N - <p>{{ message }}</p>
, O, q# e& a4 |1 j" n ~9 u - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">3 E) [8 g- q4 j' t! j/ N; J9 A! ^
- <div v-html="message"></div>9 p" t; S/ j/ `. U& a
- </div>; x9 g' ?& y- U9 `: f6 _
- . A" ^8 U, Z- z* [2 \
- <script>
3 X9 J0 Y7 O+ k; e - new Vue({
! J$ S! U4 {' W$ b# h - el: '#app',
" v8 u$ d, }" Y) { - data: {
" i3 Q8 ^4 v0 ^! c7 V5 Y$ ~0 ^- [ - message: '<h1>菜鸟教程</h1>'0 C: E$ A1 Z# O( w6 p3 n: N
- }8 T+ f' q( a, ~* K- b* k: K
- }) Y5 c, g: P0 e1 g- m
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">% J' u8 b! e! R" X0 d
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
: I5 m) M7 l, t6 W - <br><br>
- y3 m2 Y C+ ` - <div v-bind:class="{'class1': class1}">
2 J6 j0 Z, x. w: {7 }9 F. w2 K4 j - directiva v-bind:class9 f4 q: n+ k! q# T3 f
- </div>8 I+ d" H& E* }+ { A2 S
- </div>( Y/ ]: n5 X, A
-
, \- L5 z% L, h; n' l" @ - <script>
+ E; }" @9 J+ ]( B - new Vue({' q; Q2 C6 T% A, Q+ @# e
- el: '#app'," |2 \- q9 j$ q
- data:{
' b, l, G3 Y5 ^ - class1: false
) s1 v) d' j; E" s - }1 k) l) s) `4 F" ?) E
- });
/ n* Y6 @- F5 j3 G& p" O1 p5 N! v r - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
( h2 P! H) `- {' D4 S - {{5+5}}<br>
^6 V ~5 ]% c2 g1 E' b L - {{ ok ? 'YES' : 'NO' }}<br>% Z$ l* y( o4 ?; m/ M' Y4 U% g: O
- {{ message.split('').reverse().join('') }} O% b# A" u$ g
- <div v-bind:id="'list-' + id">菜鸟教程</div>4 D7 X) m5 A: i
- </div>
0 \& m9 |. W r1 J! E5 n7 e- u -
9 Y$ O3 i* J4 k$ z - <script>
' R: M3 ]3 G6 g# h( I# v3 d - new Vue({% n2 k/ u" g/ e. A0 e
- el: '#app',
- f, A) Q* n+ E6 R, p- W - data: {
- U& o/ t, ?+ X0 z% H - ok: true,
. V$ w$ t3 H3 \+ y4 y- k" B0 V - message: 'RUNOOB',# L, P8 |* ?3 U4 z# J% A
- id : 1
/ D; q" b7 c/ K$ [. @$ `9 ^ - }/ A/ g( T, b4 M$ B
- })
, u" ?' j4 d( v% U0 c% x6 n - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">6 z. i+ e9 J `; v" H% U, X$ ~: T
- <p v-if="seen">现在你看到我了</p>6 i! F0 X2 H r4 ~1 O
- </div>
0 s% x1 Y. v. w6 g3 x/ g5 v/ q -
; U) M1 ~8 q6 O# }; i1 a - <script>& }) r/ }- R0 W/ |5 L" t
- new Vue({
4 M2 b: a/ F; j# o' x6 w - el: '#app',
! L7 R3 I0 T T l0 ^1 o - data: {6 g5 H* | f5 a. y
- seen: true
) X9 M2 |+ Q" f - }
6 b! ?) u! D+ ^8 q$ w* z, _6 x7 _ - })7 u Q8 r4 M, U
- </script>
复制代码
r7 @ i# e. d- I/ A, E9 @0 s这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">0 y4 ?! ~+ |0 Q9 S3 |/ B
- <pre><a v-bind:href="url">菜鸟教程</a></pre>
% a+ |7 T; S- W* M( J U - </div>; S( q. q' K! X" t" B
- 3 l( _( k" Z4 t8 J2 ~
- <script>) Y" \& f9 K1 f& f9 v
- new Vue({5 A8 [1 [' e& ?
- el: '#app',3 d- ]* k6 b# |; w1 l% X
- data: {) M) ]- p2 ?6 a9 l: P1 h/ _
- url: 'http://www.runoob.com'" r( u7 ?3 J% ?+ S/ C
- }
' b+ F7 t* L: ?4 Y9 q - }); b, s- A. a9 ^8 K. j" N
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码5 a1 M4 F+ v! r0 F
- <div id="app">- @% W" [9 Q$ N0 ^+ f1 J/ H: E2 `: R
- <pre><a v-bind:href="url">Vue参数</a></pre>
! T7 w2 X: `8 B; R - % t; v4 D4 k6 m# r* z# c3 D
- </div>
6 ?7 w+ O% [( U5 r, O1 Y$ F2 x4 d - l" [2 J( i k7 U9 z! H% {
- <div id="app2">
0 P j- P+ B( U. z: N - <p v-for="val in arr">- e6 b2 }' g2 Q
- {{val.a}}
' O9 Y/ _3 k9 X: D. |3 D0 v7 S3 Y - </p> C5 Q9 h% | j+ G4 t& W- F
- <a v-on:click="tap">点我</a>
7 V1 _+ H" b! y* b5 P9 u0 i - </div>
( E# z0 |8 Y$ s" ?; m - ! `+ D0 q6 ?3 z' H
' I" A' n# G* o( p- <script>
9 Q; Z5 t0 [2 \4 X7 R. w6 O7 s - new Vue({4 T& h6 J @; @' U
- el: '#app',
9 g& D8 K+ f1 k( j! V% D - data: {
5 ^: a/ ^ \, _# W: V - url: 'http://www.cncml.com'; O' e* O2 l! W0 I
- }% W- Y2 Q# W" p0 Y% I A
- })
* f u' C1 R5 r. {4 | - new Vue({5 ?/ Z' |$ O2 x; H; Y5 I& t
- el: '#app2',# q; U' F7 R4 @1 K% n7 D0 i
- data: {# Y; N$ L4 X$ a
- arr:[
1 o: m y* k' q$ u8 X - {a:'bb'},
% V0 _& }2 n" ] - {a:'cc'}0 b3 J: ^# i7 M3 C9 [2 T) E
- ]
! n9 O. h2 D9 ]0 q6 x - },
/ C: F% @- r9 V9 U - methods:{' H" Y8 t0 V5 B$ b, f
- tap : function(){
/ P9 J& M: S1 X8 g& r - this.arr.unshift({a:'new'})& t0 R& F" n+ p
- }
- T+ c7 N6 q2 | p - }1 l1 O# o- \4 i3 l& v( B, u
- })8 y" A- }$ o/ G
- </script>
复制代码 Z3 ]6 S$ |, S$ o
+ o+ q- I8 U, P+ d7 H1 N1 Z
在这里参数是监听的事件名。 9 x$ J2 A; M. H# \, ~
|