Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">" H% k% ?% ^6 A- r2 }4 d
- <p>{{ message }}</p>
4 F6 R& @ M5 o8 S2 t6 K - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
2 r7 E( W3 f. L/ m( Q9 G1 y - <div v-html="message"></div>
6 u4 Y: T5 \6 }! M i - </div>
1 e) @( B4 f/ e% P6 `+ j/ i - / x4 p" W5 ]9 \. h+ h( P+ a8 ?
- <script>
' y; v' u, V5 R/ d; W9 z K& k - new Vue({
- T( ?' | t. d% ~( q - el: '#app',, D4 o$ a0 T( @0 D$ O2 ~
- data: {
( I$ G$ C6 ]* e; I+ c; O - message: '<h1>菜鸟教程</h1>'
# A6 R8 Y+ k! u5 O! j# w - }
3 O! {; z3 |$ Z! i - }). {+ @1 O$ J9 X- ]7 r- M
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
2 {3 ]( l* @' {5 e - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
* K4 l; x* i9 U& h7 @) p - <br><br>0 E( S r9 c! i8 h8 x' H6 {
- <div v-bind:class="{'class1': class1}">
6 Z5 L' L) o* w+ _9 Q0 e" G - directiva v-bind:class
# t* ?# x+ o9 i: d) x - </div>; P6 C2 g/ b6 p9 E$ Y0 m0 J
- </div>
) ^3 m. F2 u. I5 v; H" d - ) I4 T; {6 o( y! J! h
- <script>5 L3 t1 K) W d
- new Vue({
& q j0 h* D6 |1 q# U2 d! T - el: '#app',. Q* h% q2 @5 s+ [
- data:{
' E+ L7 s/ u8 j( { - class1: false
" z% ~, W8 ^1 ?4 m; _, s. n1 u - }, T( Q1 a8 G7 R" o: U9 h$ e$ ]
- });2 l' e: g& O8 j$ g* @5 W; J I
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">3 t* \0 W7 B6 J$ S! Y. ~: H4 H6 K8 I
- {{5+5}}<br>
& g& q3 i/ m1 j1 s0 |# I% p: h - {{ ok ? 'YES' : 'NO' }}<br>" q+ n6 t2 w3 P
- {{ message.split('').reverse().join('') }} p6 ?5 H6 g. r1 M8 @
- <div v-bind:id="'list-' + id">菜鸟教程</div>8 R" b5 z( ^# X1 ~, q) @8 P
- </div>& O1 X/ z5 K% e! Q( m
- 4 h) O. {7 R- F. d) S) \$ y5 B
- <script>
. x% M4 B: D5 z5 K) \ - new Vue({/ i( x0 U% r$ C0 b
- el: '#app',. G) ~- M; ~0 }1 A0 w
- data: {
% O" U6 `4 S9 Y+ _0 d5 [) [ - ok: true,# }: t) q5 S3 N( o8 x2 M
- message: 'RUNOOB',: M J& K v- k+ f8 T
- id : 1
: k+ O' U/ }/ G9 c* x3 { - }! E5 f" _+ x% i; W* V
- })
2 J/ ~3 I8 _. Y Z( i, w- U* d7 | - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">4 H3 Z7 V1 o Y9 v7 l
- <p v-if="seen">现在你看到我了</p>- }3 B4 \, U1 D' t8 \7 E) }
- </div>2 d1 p& y* b. d1 H, |6 W9 d
- 8 L h" a7 d" @) o" w: ~
- <script>
* Z& V. N7 s, a# V M - new Vue({6 ?: R% C4 ^$ y: p( j. l
- el: '#app',0 V$ B1 H* g' n: |1 n
- data: {
/ `& F4 z) C$ y. o - seen: true
9 o5 g+ X, n h% b; r. z; C - }0 \1 Z; R* O& J! p, v
- })
7 |. v6 p( H6 X0 j1 s1 l - </script>
复制代码
1 V& v3 A& W# } E+ |这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">- l9 K6 V% \4 I1 v0 P% W; T
- <pre><a v-bind:href="url">菜鸟教程</a></pre>
! L i( b) |1 Y( ^/ M$ [ - </div>3 M% R0 N, _/ h9 j
-
4 K6 s. P0 K# f3 L5 y/ W' M# \ - <script>& G1 v. T& A" b" T! r6 Y( ]! P( e
- new Vue({
) h, f& j. x, _4 K9 o2 A7 o - el: '#app',
9 P+ o7 d, r# L! d - data: {
: f4 T) R3 U; B o) A7 u - url: 'http://www.runoob.com'
9 N' W8 I/ }/ f4 o6 v/ B - }
2 Y( x0 H: r: y& P1 V - })
( B4 A. ]2 V+ ]- j( R# R7 F+ N - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码0 ?1 k8 k- W6 e3 g5 l( f. Q" n
- <div id="app">
5 f, ]0 b8 ~7 D8 o$ z. T' T - <pre><a v-bind:href="url">Vue参数</a></pre>
6 y& i; K! v, P4 |! H
! ]8 g7 j# ? q, x2 G# D- </div>
6 L1 g2 p0 R: Z5 X( _" t) F - : U: ` G# `4 u' i
- <div id="app2">
. n" H' r3 P5 h4 R" w9 G5 ~ - <p v-for="val in arr">3 X3 f# ~5 r# U4 Y* Z& H
- {{val.a}}. t0 ~: j1 l" \+ J7 u& V2 U: m7 G
- </p>
7 h4 F! M6 D% ?/ J - <a v-on:click="tap">点我</a>% `9 L2 I. c3 J- b0 `, z
- </div>% ]# \0 B1 Z: {+ @. i1 {3 o
+ r4 \# v9 k; v7 K% r- ( D( V W7 X& A% |1 c! E
- <script>1 ^9 c: R, Z9 ^, a
- new Vue({5 ]* I; t0 z# E7 l
- el: '#app',' p+ N; [- f, K! `4 m2 Y$ O$ m
- data: {4 e, Q+ z$ @3 O' x. b6 H7 `3 j
- url: 'http://www.cncml.com'
9 L9 p' P* T: c# H - }2 G7 P$ E- X; g* F1 N1 M
- })4 u) n e& p& X
- new Vue({
|- R/ A) f4 J2 K5 Y4 {0 s! z - el: '#app2',
# J! Y/ g$ E$ `7 E8 d G. ? - data: {
+ u$ x. a) J' N3 p! y - arr:[
/ c" W5 h2 l0 L9 k - {a:'bb'},2 j% `6 s/ v9 O2 I& U. R5 U0 k2 D
- {a:'cc'}
f/ C6 `1 p' z/ f- U* b# @ - ]' m' e+ M1 n# F
- },
) D: S8 j( ?; L k - methods:{6 ^' V: S4 J( s6 E' r+ A* ?
- tap : function(){7 b, E; Y% f; Q
- this.arr.unshift({a:'new'})
6 B! f; F! C5 B$ E9 i' ^ - }# v' U9 T+ t$ J. \
- }, U) K, V2 ?- K
- })' ?, q+ n8 s; d+ g) d+ I; D( C& \6 `
- </script>
复制代码
& j; C! a3 }9 S2 f" n
$ z# o8 R0 |; @$ F. K
在这里参数是监听的事件名。
7 `: X1 \. S& V- d( A |