|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
$ o3 @' A) L9 O: l" ?9 q - <p>{{ message }}</p>
& q5 T0 \: z* u - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">) [% i; |. N( q5 o
- <div v-html="message"></div>
: t: \% Y H$ C2 ? - </div>
3 k( N) ^2 E: E- C# s: S- i - # T f; R: @2 F3 g: F8 |# H
- <script>
6 j" w# L, k! j$ I* C3 l - new Vue({4 d) B! P0 [, R5 ]+ p. ^1 e) i
- el: '#app',; y. o7 V2 s" i- R0 Y6 ?& j
- data: {. |% l8 P$ d8 ?( R
- message: '<h1>菜鸟教程</h1>'
3 E9 S: \7 L% o& U - }( h' w5 e# \. O) t
- })+ O* L0 A2 x7 |* ]) d' \$ H$ t
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
4 k* D- L( G- z9 b3 \( ~, B/ L - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">% x2 V/ ^4 C3 T
- <br><br>& C7 V+ d% }: W5 W7 D
- <div v-bind:class="{'class1': class1}">
$ b4 R7 s G& N# X - directiva v-bind:class6 n8 u) l# h) M7 ]( d4 J6 H
- </div>- S8 ?2 p. }1 g! d6 y$ Z
- </div>
~/ y+ ~1 {0 |, G2 I% d3 h: c - ! m% I% l( W3 h) J) F9 w5 ]
- <script>% w9 `2 R) l [3 o, P4 m- }; r
- new Vue({' N8 d2 w: C3 ^9 c7 s, |
- el: '#app',
: L) Z: ^8 K/ O4 C - data:{
. I4 O x' N( C, P6 C - class1: false/ _% n5 S6 A5 D
- }
8 J6 G1 `, e5 d2 Z) X V, r" ~ - });
( U' Y) J. R9 b* k" T - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">2 R# a* F& b( L3 s! g0 ?
- {{5+5}}<br>: N# k1 H3 j. h( c, [4 C: {
- {{ ok ? 'YES' : 'NO' }}<br>
. H: Z+ D, K" u5 L4 r/ L - {{ message.split('').reverse().join('') }}
" W- S8 Z& e4 g% C - <div v-bind:id="'list-' + id">菜鸟教程</div>8 {) v6 D# F# K
- </div>7 k# n- L8 \4 i
- : k( n$ ^( k) v9 A' J; ^
- <script>
2 Z( D d5 n8 c) a3 X4 y& i - new Vue({
! F' N+ P7 M5 i* ~ - el: '#app',
: Y0 }& ? k( W- A - data: {- i0 m r2 q8 h) f( u2 n
- ok: true,- }3 k* h" O/ n2 l2 W$ e
- message: 'RUNOOB',
+ B$ z. v; y3 w- @ - id : 1! E9 F$ ]! I! S$ [" S0 D% x" H
- }
3 G8 K( C0 u5 s4 t Z0 d# | - })/ _- J" c* |' e6 [7 o& B; M; V' K- y
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
4 Z5 C3 a' p) D$ s/ k$ ?. [6 m - <p v-if="seen">现在你看到我了</p>
1 j; M. c' ]3 C! l - </div>+ W2 t9 I x$ ~( [- j( a: G
-
) i- D% Y* H+ p - <script>' _# o) d; x: q, V
- new Vue({
9 J/ i2 J6 W. @# \. @' Z - el: '#app',
- ^ F) N1 v! g. e5 Z0 G( N - data: {2 |6 ? K8 X+ y, j& c- o0 u
- seen: true
/ \& W! @6 V- o- H: v - }# ~% N3 K( |9 Z1 W9 ^8 p0 C* {0 O
- })
+ A4 q0 u2 a( _- ~! Z6 } - </script>
复制代码
' D4 R" @! r( y) r! J/ W这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">% x& h) s: e9 k: n, @" \7 w
- <pre><a v-bind:href="url">菜鸟教程</a></pre>/ g, n U1 S4 S2 j; H$ c6 r# r
- </div>" ]0 T) O$ t/ x7 X
-
0 {# }. z% X: L5 g, J - <script>
1 _ z: C3 v+ |6 m7 [- Q) \. { - new Vue({
8 w M3 p" f+ s# y% f - el: '#app',
! n: K s' R3 v9 A3 t0 b( a6 R - data: {
; r l4 x9 O" {. O' |5 V; m0 b) a( ~1 D( z - url: 'http://www.runoob.com') R3 r0 q& e r8 A
- }
7 k- T8 x- T* ~1 M - })/ b$ f7 {2 K; x8 s
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码+ [( O( ^! H; _2 j2 A% F* o+ x
- <div id="app">7 e( P! K* D+ v# E9 C/ r$ m
- <pre><a v-bind:href="url">Vue参数</a></pre>4 x% B/ P. \0 T( I0 b
) m/ H% S# ?. J8 X$ d- </div>
. n* o; y. c5 J0 {0 W7 v - 5 K/ S: t# G% X2 x# _, ]/ v+ H
- <div id="app2">
& e. L2 j/ f1 G6 I& t) T# C - <p v-for="val in arr">
) A* y- c$ e4 m; ~# K" D - {{val.a}}
6 u: _- r& b4 m - </p>$ b( X/ `* T) O$ ^6 t9 i
- <a v-on:click="tap">点我</a>/ r4 C7 N+ {1 t* o
- </div>
. A5 M* e) N% U) O/ @ - : c7 U+ q# b1 J5 S( g# @* Q/ F/ Y
- - a: }# i; P2 b+ Z* I! R& V
- <script>) \2 _9 K7 b) v1 V# {3 Z4 K
- new Vue({; n7 ~% l" H9 Y7 b7 F
- el: '#app',+ K* g" h2 |# h( R2 W2 u! B
- data: {
1 | h G2 Q. ~, j$ V( r0 f, q J" H- [ - url: 'http://www.cncml.com'
0 ^ A$ @/ j3 _/ f' @( P+ }$ r$ h - }
3 | d0 y1 Z# V- k; p; a+ H% C$ R - })
- b6 i' l+ J% p. `+ W - new Vue({
; c" s* x( ^) B. I - el: '#app2',
- U" T& _3 K; o7 M+ w* [- U( ~# ] - data: {! d: o+ K: l! E& t9 E
- arr:[: c3 o& c% j, b6 M3 V. e
- {a:'bb'},
6 k" U2 ^: i$ ^5 s6 r0 s - {a:'cc'}- z5 h" N' [- j2 h$ B7 J5 j
- ]6 U4 J# y% ]8 U. A# P
- },0 ?; { H( K, \9 o6 G6 G. Q
- methods:{
: h# w5 `* J9 P: h! h1 o - tap : function(){0 l& m$ @# E6 u) ?3 Z
- this.arr.unshift({a:'new'})
& C6 _, }: @/ P - }& V% K0 [ y" G( _1 Z- }
- }
* @; Z& }' F) p# `: } - })
3 A0 h) C o6 M$ v - </script>
复制代码 7 Z' i4 F& f! B" M8 |
$ d# Z- G( a- v
在这里参数是监听的事件名。
) G( R! R+ @# k; ]3 b% i2 \ |