Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
; j0 t; L0 j+ U$ G( [0 j8 F - <p>{{ message }}</p>
( k' v4 V4 ~# t" s; ^: ~8 ` - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">- e$ @$ y8 n P2 U
- <div v-html="message"></div>
; v: M' q# F9 P' t% | e! u: h2 K' v - </div>- t. H7 q, i) P8 d
- 6 p) U9 v# F9 d* F. P
- <script>6 w& K& t' f( d
- new Vue({
* u( q- {5 X7 |& A+ B$ R - el: '#app',- j. p" Z# \, \/ d w
- data: {( T7 d) [4 R3 l3 }% L5 ^
- message: '<h1>菜鸟教程</h1>'. a3 V% I1 Q9 ?& {0 f
- }& [. [( c9 l9 D: p1 s9 F% R7 J
- }), I/ f& V$ j5 [4 V/ p' a* Y& T
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
" J& ~" B! g# Z - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
" d$ j9 h7 K2 a, o. V0 h6 { - <br><br>. f) ^8 Q' ?: E6 p
- <div v-bind:class="{'class1': class1}">
7 i+ Y8 R/ v; ` - directiva v-bind:class
' n @, N; D% D \ - </div>0 m1 L* z# ~6 X2 g: `- W
- </div>
; C. P$ r8 E. x* h* _! y) B9 o - $ {2 g3 w) H6 q' n
- <script>
9 ~; U4 c c6 B/ T - new Vue({
) E7 e' t* H+ r+ N' l - el: '#app',
" Z4 Y. `% l- p& m0 G% n% s* K - data:{5 k! j$ X5 I& f8 L9 ]+ B+ y
- class1: false
0 z' ^" q n3 p* D - }
8 M1 Q$ S: a" e+ r* n5 d - });- R8 O% _8 o6 j
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">+ h5 ^: D7 x! V( p: q, F
- {{5+5}}<br>
6 j3 Z+ M5 k% B$ ^" L - {{ ok ? 'YES' : 'NO' }}<br>- V9 R) M( x, r1 E$ d) s- s
- {{ message.split('').reverse().join('') }}! G/ |- N8 t/ u$ v3 [" R5 q
- <div v-bind:id="'list-' + id">菜鸟教程</div>
+ H9 L* B9 ]' m0 P3 C: N - </div>8 W+ z! `; X# _* C
- ( q w6 E( n7 L9 a
- <script>: i1 i6 q, F) ^+ r5 E* Z
- new Vue({
( i' z8 K! ~& e5 N* h - el: '#app',1 u. Q2 |' n' K6 ]8 x
- data: {
! F8 D) L0 _; T$ A- P - ok: true,( }2 _% s2 ^9 m0 c/ }8 X
- message: 'RUNOOB',1 S; y0 i$ H+ H& l0 q
- id : 1
' S1 ]5 d8 G. N9 f( S) o- s0 Z' b - }2 n- a! ?0 P) y! f
- })
4 w" K0 O, G) p8 h0 b - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">7 l8 i+ L: ]7 d8 @* j
- <p v-if="seen">现在你看到我了</p>9 d% u& E, h# _- e/ S' N
- </div>" d1 C+ U( g8 @$ z* E. d
- : Y- x( B- X7 p
- <script># ? J% O6 |! A N+ ~
- new Vue({
$ o- }0 g, k' }( B+ K6 R - el: '#app',8 M0 p2 p' ^, K3 D( S- ?
- data: { U0 q5 y& M. I
- seen: true) J9 ~/ V8 F. E6 a |
- }) @% q: V6 x" [& H! V
- })/ G2 }% [$ ~7 R6 _$ B# U
- </script>
复制代码
1 s% N, h! ?5 K( g* a6 Z8 R这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
' e+ Y: F+ e& R" H( p' u) k; } - <pre><a v-bind:href="url">菜鸟教程</a></pre>
% d8 i B' U" Q( i* t n - </div>: h$ l# f0 z5 J! ]% ~4 b& h/ t
-
, t- b. D5 e' M5 M+ p - <script>. J/ Y& x- _2 R: d* t P6 v& l
- new Vue({
& ^) J h7 j. u) W - el: '#app',
1 q# L( o- F5 _8 ?3 }( T - data: {
6 z3 L& S' g" p& \9 s; N# O - url: 'http://www.runoob.com'5 Y1 F. |' \% C; W t0 i
- }
9 u: U8 p, u+ N7 a4 P; ` - })
) \& `/ H8 n& |5 }' \9 `; j6 i - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
$ z$ E. R# o9 J1 E; Q
- <div id="app">
8 ]9 |% X7 W4 l% U - <pre><a v-bind:href="url">Vue参数</a></pre>
- l% Q( p; i4 x; u2 K! g( z
3 T6 j. s+ Y0 ]+ u, w- </div>9 [6 ~( P$ D+ m: d# d6 x
+ M/ T$ ~# E4 k/ c- <div id="app2">
" \* U2 \7 n) J/ M J - <p v-for="val in arr">
# [6 {& d/ B+ f1 D8 V% @$ b& ] - {{val.a}}
/ j8 A; y$ @) X, M+ u- B/ z - </p>
' j. w$ m: f9 @, X o2 I% ` - <a v-on:click="tap">点我</a>; i7 |) i$ K0 h( i
- </div>
/ h/ U; X+ i2 P% N/ x6 q; e3 F" t
. M* ?7 [! u) I) i' l* s! b- . U+ }- k! ?% {- I* i2 h5 O: H1 v
- <script>" d7 B8 E* [( H; x: N
- new Vue({* U# t) j& o+ F# J8 L: A. B
- el: '#app',
1 G) C0 m6 `, V3 j) s* p3 V" _ - data: {; t! U8 {( G5 ?) g
- url: 'http://www.cncml.com'
' F7 O( ^5 X9 G/ x - }
2 t0 d2 A. }3 I, e5 H% J0 G' ] - })
7 ]9 [9 O w3 }' {5 ?/ Z2 u - new Vue({( Q6 p9 R1 }: N
- el: '#app2',/ y; p$ K# _0 B) N$ d* J
- data: {
* i1 y5 y: P8 K) t! Q+ |8 ?( q2 e, ?% E - arr:[ h* A9 ~% w u
- {a:'bb'},% d0 a" {* a8 T! j. a( v6 h- a0 C
- {a:'cc'}
4 t& W* j" h- Q - ] G G- x1 Z) ]- M! [* f- v/ \' a
- },
0 J- ]3 C% {5 Y6 R' F# U - methods:{9 S; Q0 u# H3 g8 H5 t
- tap : function(){
, d7 @: v, P2 e2 o3 B) [ - this.arr.unshift({a:'new'})( T) V& f# l5 ?% ^; @& N
- }
" K- V3 A0 W3 \7 [& l- k - }
- @% Z( B; n8 k4 \" p; W. P - })
; V+ c0 H$ I0 ^& `' |) l7 M2 A - </script>
复制代码 $ S9 h$ S& u9 j8 D( X* N1 g
5 z' A' ?2 _$ j1 C
在这里参数是监听的事件名。
& a: j' M5 c2 T5 `* w; M- c |