|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
5 V* Y, ?5 U" {' { - <p>{{ message }}</p>7 ~9 ~8 o0 B% x2 f9 k
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
. T" h3 v) v/ D8 d5 G* r7 x: l - <div v-html="message"></div>' P& O% k. K- [
- </div>
* ^, c& K5 q! H& ^. C- |4 M9 p - - a. r+ J6 t7 r: I2 U5 C; F6 ]4 ]4 p
- <script>
0 V* ~' b6 Q+ x - new Vue({, K. h/ q4 e/ T0 v) A" |5 L2 |
- el: '#app',
# A1 R7 T- }% v' S7 `; z4 @4 ` - data: {
. |9 Z6 [3 {2 t* Y6 U, r/ P - message: '<h1>菜鸟教程</h1>'- _. Y" m/ q% \4 I8 i: O+ X& Q
- }2 M/ G! V/ S* e$ `8 x
- })
L) G2 m' f1 {( p - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
% E' ~7 z& g1 J - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">3 J% V2 X' M" r8 J
- <br><br>6 V$ v9 k% m( @9 k
- <div v-bind:class="{'class1': class1}">) g$ y4 u$ i. C/ r
- directiva v-bind:class
2 H( [8 w/ {- @7 |, ` s$ p I0 }9 S - </div>0 c( c* x0 Z+ a" }% U4 Z$ F$ G
- </div>% u L- E, K }. g9 }; n7 O0 v
-
. h! q4 C( u8 R# Z: h, X - <script>' P) a4 D j' l, U
- new Vue({4 D$ }( t& f j
- el: '#app',
: a w' ^- x# M& B- _6 V* s - data:{
5 ?% e. z5 N% B/ ?9 Y* l - class1: false+ G" r. f' l1 P9 M- E& V
- }* j7 y, z3 o7 @0 Q2 A! o2 @
- });5 e9 {6 V: _4 ?2 r% ~
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
7 u8 e/ t1 l1 e/ Y - {{5+5}}<br>
& @, \0 N5 T7 K* i2 _5 L - {{ ok ? 'YES' : 'NO' }}<br>
! s7 `, M3 h: K5 h, C9 |8 B8 q" b: B7 r - {{ message.split('').reverse().join('') }}3 ~% T2 { g, n8 q9 b( H- p
- <div v-bind:id="'list-' + id">菜鸟教程</div>
9 d% I. f& r) b - </div>
7 O$ y( n$ I7 x+ S+ K9 R - ; }# s( e# P8 k9 o2 E" K0 `
- <script>* N% ] U U4 O+ q
- new Vue({
+ Z+ g/ @# H* p2 }0 u4 ?# k( U2 o - el: '#app',
7 H: T% H4 L& y2 |6 \! [ - data: {
. k$ f6 l2 Y) L' l - ok: true,
7 a0 r7 G, n) Z3 e( l) J1 Y3 `0 H - message: 'RUNOOB',% \2 |7 |( ^/ r. G9 v9 ~ f
- id : 15 j1 z l6 o' z3 x% W
- }" I* n& g6 Y. D" Y, \
- })
( @7 J! m5 r/ l0 k s - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
' w: G5 j/ q- z/ c2 V+ F - <p v-if="seen">现在你看到我了</p>
e- b9 g" X) r - </div>
" z* E. ]+ x: T+ M( [' m -
8 F! g7 q0 C' y# Z, a - <script>
$ u; e2 {! }' Q! v - new Vue({
' X% `/ {5 V5 i# T3 n - el: '#app',
4 C. Y1 p$ s3 V7 D* t0 {. c6 j - data: {
+ z( u: F. k- c7 I1 J - seen: true
! f4 U5 p9 r/ b' c - }
0 i ?1 Q/ A- S I- E }% a! b( M- x - })% {7 Y' O: F! `. ~3 Y
- </script>
复制代码
7 K: Y$ h9 Q7 ^0 @这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">* ?& F3 K) m3 Q
- <pre><a v-bind:href="url">菜鸟教程</a></pre> f8 D# ]9 w( K! Z" s/ }
- </div>
; w2 B9 [+ q# c; ]. H& A: r - & m# Z! V! c- c4 D" h& v! \
- <script>
& B, Y1 ]5 M; l2 ` - new Vue({% W/ v- k1 w9 J7 n$ X) W
- el: '#app',) G! P8 Y8 _/ l8 l
- data: {: B9 ~$ t1 Y4 q% w
- url: 'http://www.runoob.com'7 H( }( |; d) i( |9 K
- }
( Y0 | j' G/ J' o- l7 {4 H+ l - })
: w/ L9 V9 n2 Y" G) ]3 N, X, i: v - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
4 \* W& G/ M8 Q, d$ G$ F
- <div id="app">
h$ j, J6 m9 m - <pre><a v-bind:href="url">Vue参数</a></pre>
& ~* G1 j7 h, V# p4 q% j
4 F/ P( Z3 z* a" |" H# H! D- </div>- ^! W0 R, H$ u: R B; ]& O
- " f% A3 b' m/ k
- <div id="app2">/ u8 T8 n9 s" C8 e! v
- <p v-for="val in arr">
0 ~2 A- K/ ?4 A6 [+ x. } - {{val.a}}, h+ h- D: B( l- t
- </p>/ ]2 R. x: V* ?/ Q2 @1 `
- <a v-on:click="tap">点我</a>/ k3 u0 j% L: u1 R: S: T( U% s
- </div>
+ y U3 A) s3 x8 j
# O; H& \. F5 M) d- 5 _3 ~" l; e1 W3 G
- <script>
5 [" J- r# `! b* v - new Vue({
8 G% C6 F2 Q) h# I% r q - el: '#app',
8 y$ C+ N( I& ]0 s, h0 c - data: {
1 i8 L2 F: d* c% A( m' E% C1 D - url: 'http://www.cncml.com'5 R5 I) Q3 A+ z
- }9 f# G* F; J( B* {
- })0 ]1 p5 ~( `7 T; v
- new Vue({5 Y! C8 N" |3 j" r
- el: '#app2',
" \: R1 S6 Z# [ - data: {
9 t. T( h% T! T/ J& f' r - arr:[0 P j. n* D6 ?1 T. U3 F
- {a:'bb'},6 Y8 B3 x$ @9 Z
- {a:'cc'}
1 f( ~2 x X. g. f( S% j: N - ]/ y& f' P) D& m5 `$ ^
- },
. c1 G% e5 q+ b& U( A - methods:{- u3 U, K1 v; J8 ~ _
- tap : function(){0 c# ~) y7 m8 ?3 o- h+ B- X
- this.arr.unshift({a:'new'})
& R) v* S3 J) b6 j, H: c1 ^5 U: t - }
( w5 H2 v! h1 {" J9 ] f - }) Z% h" @( F( }
- }), V/ t5 |) Q1 K0 K% H7 R P+ @
- </script>
复制代码
. B: Q9 O! C2 p. L6 Z, Q: @ e7 f9 L
在这里参数是监听的事件名。
, p8 \5 [8 `; U8 s j$ G1 }0 M5 o |