Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">0 S& y0 ?" A/ i' v: |
- <p>{{ message }}</p>
# g% P+ V! Z2 c) o' d - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">0 a8 z8 X8 N7 N2 x
- <div v-html="message"></div>
- U& m* k+ C. ?+ }# z8 B' j - </div>$ ^* J" ^) i8 I# l
- 2 f& @% d5 ]/ i% Z
- <script>
* U8 B7 V0 }4 e9 s, M - new Vue({
7 m+ W1 B! z2 [4 G5 G1 s - el: '#app',
8 a& C, `" B6 z. Y - data: {% b3 {+ F' R" c" Y$ A1 F! Y! V
- message: '<h1>菜鸟教程</h1>'
+ B$ g9 e2 R! p/ { C" s - }
- b- Z0 M; j# A, l3 v7 t - })
2 J2 m2 y+ w! k% m/ Y' | - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
! b8 o/ s8 l# l3 P - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">7 |1 \. Q+ J% I1 e2 Y [
- <br><br>: e1 i, C2 b9 ]) [% g+ _3 M5 j- d
- <div v-bind:class="{'class1': class1}">
0 }& Q6 H8 o& P' C - directiva v-bind:class
; u& D/ V m P* D. j - </div>5 L& ?; c7 Z4 ~) P0 m( I
- </div>
1 I; m" l' ^! J0 ] E4 @. | -
/ z& d. r0 ~! r! _! ~ - <script>3 [2 x* W9 p8 W( q4 _0 w9 _* ]# G
- new Vue({3 a. H$ W5 ]9 {
- el: '#app',
- b' q8 ]/ Q- v- F1 ] - data:{
5 D3 i) R9 o2 W! |8 L1 s - class1: false/ W; V; ^8 y' ^0 s" g t, @1 m3 i% Z
- }! x3 I" c: D$ v/ L* b
- });
7 d; B0 T( x5 B. A' W/ n- m - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">/ D2 f5 z/ L1 f+ p( V# k- B# Q% H
- {{5+5}}<br>
" @3 z! i9 j& ]% r0 G - {{ ok ? 'YES' : 'NO' }}<br>
" J9 a, a3 b7 m- N/ h! f - {{ message.split('').reverse().join('') }}
y, ~, T5 f/ X. L - <div v-bind:id="'list-' + id">菜鸟教程</div>/ I/ k J: ~! e& A
- </div>. M/ d- g3 w1 T) I9 Q% t
-
' w. `9 U) H C2 d - <script>
/ T q X$ M; G3 n - new Vue({
8 t1 E' V" B* j' O) j - el: '#app'," h* N. T- R. g. V
- data: {7 M+ T8 u& W. b8 _% ?! @
- ok: true,8 B8 Y. C: K: Q7 Z$ j* ?8 a2 I
- message: 'RUNOOB', e% j1 ?/ q# d. B& K
- id : 13 Z! K0 R: X$ d' ^1 B
- }
0 d9 J% I6 ?) M* H* @ - })
* f& s: f6 a2 `+ ~$ z( J" \/ L - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">& ^/ _- o7 G4 X6 F7 }+ x/ T- n
- <p v-if="seen">现在你看到我了</p>
, x4 r) u+ ~% v0 w: s7 H& l7 j% ? - </div>+ F$ o. I6 m5 y' W. a: w& h- U6 o
- ' M, b( V5 i6 K0 g1 R( H
- <script>: f: u/ i8 V- r3 r
- new Vue({
, c) q5 L2 v- g- x; n - el: '#app',8 q2 ?5 ]" a, f1 \6 _& k8 `
- data: {
$ h! W4 {! Y- B, U* F) k - seen: true( }6 [/ z* C, m m' C
- }
" M+ K. q& {" P: N: j( a6 J - })
; @2 E1 f. {7 I9 g8 H- [+ T - </script>
复制代码 ; V' _" J6 m! W" g s1 b
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">. e2 `! z, l0 \7 X0 T$ a2 S
- <pre><a v-bind:href="url">菜鸟教程</a></pre>
, n7 d# L3 b; R+ K6 l$ L - </div>
& ?$ m& ?; v" } -
% J# f; f9 _! A - <script># e x' w, K' H8 N" w2 A8 w
- new Vue({( q5 n6 v* ~8 P6 V0 ?/ n
- el: '#app',
) m) Y8 z6 r0 Y8 V6 i - data: {
; F8 j5 G/ m; P4 g! w7 g% l( o - url: 'http://www.runoob.com'
5 _. _6 W6 w) h; L% D - }) J1 a+ D k3 m D
- })/ `2 M) h: V, Y
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
7 G% L3 f" t N0 r' F% w9 x3 d
- <div id="app">5 M8 D' e' |$ Q! S! i0 v; D, H0 X
- <pre><a v-bind:href="url">Vue参数</a></pre>
5 z- _8 m8 H% k% b( V8 m8 T/ C) e
: Z% R$ J' m' K- </div>
! A9 Z1 J2 `+ c# _
+ w- W+ y" l& T$ l5 l( _/ t$ r6 p- <div id="app2">4 _" \: `7 a+ _4 N" c* o
- <p v-for="val in arr">
8 I" P+ A* ^* R - {{val.a}}% X( z' {+ X' o* t$ K+ F' Z7 d
- </p>4 M5 F9 u4 T. G6 I0 ~
- <a v-on:click="tap">点我</a>
2 |- h7 M; ^2 w+ P* l8 n. y - </div>: d% g; S( Y) F8 a% ]
- 3 h3 w! g! j* ~0 x. [% | {
6 c- y- s3 Q. x8 e. w1 O- <script>
6 V0 t$ }/ g9 A( P7 y: r8 B - new Vue({
( Z5 K& C5 a3 O n - el: '#app',
# g6 {% d% R$ n8 }) O& n2 k* e - data: {
$ Q) M" Y: W. t/ H% V& a - url: 'http://www.cncml.com'; w' u2 P u/ s6 l* C; M
- }' I' L& K# }0 H2 {
- })2 X/ t; ], V* X8 L8 E8 L
- new Vue({ r7 {. d* K3 P; d5 m" I
- el: '#app2',
$ g3 A9 X/ X+ g6 H9 Q/ q - data: {# U7 f" E& E0 }0 ^' {- c9 n9 k
- arr:[
: Q+ Q# ~% J f. P3 q% X0 {$ w - {a:'bb'},
+ u6 U1 I9 b! y; R0 N - {a:'cc'}9 z/ Z8 L- B0 Z6 F; k; C4 Y
- ]
- c$ W5 V& K y" N& k T - },7 ], J2 h/ I( z; U" |1 [6 y; \
- methods:{" r+ J0 z: [* K% D5 @
- tap : function(){- ^/ f* ]) E# r
- this.arr.unshift({a:'new'})
l1 n: _; {/ h$ a8 D* S - }
$ l2 m7 d x$ X/ Y9 `3 Q - }
; j/ y+ c+ C' i k; u+ t - })* |: o! X/ z. h" U8 b* R0 B! f
- </script>
复制代码 ' p2 e, q6 S. V3 c
. q" w: y8 P2 z4 y" m) m
在这里参数是监听的事件名。 + B6 e6 w. T- M; D& u7 i% N( k
|