Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">6 \* i: g( X( h: T+ k
- <p>{{ message }}</p>
6 h7 i' ~: Q; s" }' o* G - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">3 C F1 G9 f0 ]9 x2 q3 I( ^4 z
- <div v-html="message"></div>
% W* g. _! b* {6 ]! _! M9 v - </div>
& K5 m* u4 ?, t$ Y: p8 o -
6 |% R3 H: J I- [6 ^5 H - <script>
) `+ X3 M- g: X! {. b" i - new Vue({* N( `. i4 {5 O2 X0 x: _8 U( x
- el: '#app',0 [ ^3 f0 {2 k7 ]
- data: {
& }( N5 X% u4 c2 o& C8 R - message: '<h1>菜鸟教程</h1>'
# N+ J/ E5 t! v% Z& X* _/ a' U - }
4 L& [: ?9 q4 l - }) {3 r5 Y. F, \. Y$ @
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">4 `/ ^& x) W. m0 j; w( O. v
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">% M1 g' \% M* ^9 J1 J0 |
- <br><br>
% S7 X$ s. p0 s - <div v-bind:class="{'class1': class1}">
) I9 G, u/ K" ]3 [ @6 | - directiva v-bind:class% o: O# C- O4 F& a* K4 q) D0 h
- </div>
7 u) \, u8 P; b. b. \$ i4 i! G - </div>
/ z8 b- K- @1 J: @) J1 W* S -
1 t. y- s% O# W" \1 P - <script>
5 U0 N- `2 X; ?0 g! Z s/ \ - new Vue({& g& @6 @& U# i- j
- el: '#app',
# Q. h: h8 `, h; x& {; \: {; ^ - data:{
& Y3 o5 R/ y( l8 Q0 l6 ^: R; G8 Z - class1: false7 P& x/ _! ?2 |* ^: x% f, g
- }
. g) y% X( f3 U3 K - });& w$ s5 g9 _9 M" D5 ?7 ~! S+ l
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">+ w. Z6 H3 S5 ]% x& r9 v7 O# j
- {{5+5}}<br>
* d- ~' X4 s' M4 {$ H" o - {{ ok ? 'YES' : 'NO' }}<br>9 l% i5 R( t/ F! Z
- {{ message.split('').reverse().join('') }}) v1 b& C+ |! x2 A( r( ~- b: k9 H( V3 C
- <div v-bind:id="'list-' + id">菜鸟教程</div>
U; w$ _2 y$ Z! {' ^( f - </div>
) u% D6 }& v w$ P* H( s2 a* { - 4 Q6 t% E, ^6 H/ v9 v5 ^
- <script>3 f' O6 ?. L) `9 z6 G
- new Vue({- @0 d' k% v2 Y& ~$ t7 e
- el: '#app',
* ]1 X9 Z8 \2 ]% D9 t7 C6 j6 h( @ - data: {
2 l0 X* V8 `9 c: j/ U/ _ - ok: true,+ i: W1 c7 }# ~. D
- message: 'RUNOOB',
. F m' v, h" p4 G6 _7 V - id : 1
# e5 \! j$ W/ a4 l - }& r: u; A1 o. }$ ?# n9 Q M# g
- })
2 Q o5 u( {2 d3 j% p- x - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">+ Q- H8 r: a, U; P5 ]% f3 B
- <p v-if="seen">现在你看到我了</p>
& V0 ^6 t; ^. z- `. f - </div>) J4 G" A3 ~) ^# i( l
- 2 W2 K5 L+ ?4 {* D
- <script>
( \8 O0 E1 B2 M; y) q" R - new Vue({
( t7 Q" d {. B W3 ~ - el: '#app',7 H' u8 P4 A# v6 C/ i
- data: {2 p% T8 k+ p( U6 b
- seen: true8 H( U/ S2 ?+ x* B% K& }
- }
- O; q; ~! O4 b, U- x* E7 |: S3 f - })
, i5 _* H5 C" n/ h! S6 M/ o+ E - </script>
复制代码
8 u$ p' n4 Y7 z; {这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
( Z' A' W5 J! B( c* n! A) R+ p6 ? - <pre><a v-bind:href="url">菜鸟教程</a></pre>
: }9 w& U$ P9 v - </div>* v9 i1 H/ q6 n& G
-
M, J3 J' ~$ B" e, a6 D+ {$ M O! N - <script>
3 u* ]$ s1 n1 t0 \6 h8 q - new Vue({4 v2 f3 l( e: s- h
- el: '#app',& ]3 _2 j/ V1 Q# Q$ I
- data: {
/ a1 X5 z0 B& U9 P/ y m# K0 W& G - url: 'http://www.runoob.com'
% j2 e, D# W- l* g5 m# g' b0 Q - }
% @+ c- K1 G ^5 B. p8 }2 \8 | - })0 i8 z* n0 B7 d% J$ G; ]
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
: @3 c( @1 G& {% \: D' b
- <div id="app"> [% C/ ~1 R5 u2 e8 V
- <pre><a v-bind:href="url">Vue参数</a></pre>
# s: w( o* M8 f2 }) x - 7 d9 ?* ~# |+ I+ b6 |
- </div>
3 z8 C9 J. C6 r$ q+ ~ - - D3 ?" A/ p$ w ~ u
- <div id="app2">( V. y% D' ]- Q) [) K) U3 ~
- <p v-for="val in arr">- s2 d" o0 E2 N# N1 q" M2 c2 g
- {{val.a}}' v: ?) B) F! ^# ?" V; o( D c
- </p>5 [6 L' z- w: N" W8 ~
- <a v-on:click="tap">点我</a>
- {: U9 |. A: X, B - </div>; C( }: B1 E/ K0 y/ {
3 E: a' ^6 P8 l q
3 Y9 g3 T2 @! J, j) l! u1 K& F- <script>' B" x5 x; |# V6 _$ A: c8 D0 e b
- new Vue({
& r+ m9 I9 Y0 t5 C. i, _: Q - el: '#app',
; o' \) ]! x0 Q$ \) f - data: {
$ v6 e& e6 ^+ K! s$ _$ g - url: 'http://www.cncml.com'
. d. J! Q1 s9 O% L. E6 U; a - }" \& e" d8 K4 g3 `+ s* M8 ~ M
- })
8 N% i% f5 C) F6 O! b9 ^ - new Vue({! @% @4 g' v) o1 A
- el: '#app2',; |4 \; Q5 y7 {& r+ A
- data: {: ~( M9 | Y# F: O/ q! R# n& _
- arr:[" d3 D8 a* Y. ^) ~- j3 v
- {a:'bb'},7 l+ r5 c. A/ O2 D' ]9 a: x
- {a:'cc'}! d3 c: H7 ]$ I, v! j
- ]( X4 v+ E+ E8 @, y0 n
- },& j* ]' Q. e# J( b
- methods:{, y) [, `4 g6 t
- tap : function(){
/ O) X7 T+ {5 D& C0 x - this.arr.unshift({a:'new'})
* h' x( Z! h, w6 E% e - }
4 Q- R- X5 V& t. O: }# { - }
- h8 j; W Z( n& N3 ]9 L3 ^ - }); ~3 t. ~& ~& {; k$ ?% W+ v7 m
- </script>
复制代码
5 }; b& l( G3 T* T" M& J* F5 _
" @, J+ Y# o+ O9 L3 ]+ S+ T# m
在这里参数是监听的事件名。 # S5 A% Z" J z6 c( U! T/ u9 H
|