|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app"># Z* ~+ R7 g% ?
- <p>{{ message }}</p>) q6 D. U( U1 b$ |
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">' _. W% E4 D4 f) [
- <div v-html="message"></div>
, {6 i* ~4 }% } - </div>
5 ~1 {3 D6 d* w% F: o# |2 k6 L, G - 9 e9 r$ U! y" T" y1 q: T) w
- <script>. W; O8 r4 X. k+ l; @0 ?
- new Vue({9 x( V* u6 z5 v! g8 m; F! i1 F2 h
- el: '#app',
0 b6 {# _6 j- M/ ]! W; a - data: {4 Y2 _( J2 ?: U! @' T( f& B7 C' f
- message: '<h1>菜鸟教程</h1>'
) s' E/ N# z2 P' A H - }! o, |+ h0 O1 [! j3 G
- })
: w y1 {. _2 m1 j& L - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
$ I6 D6 h+ N. U - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
: H( r1 D Z' |/ [* Q - <br><br>0 }7 Q6 {4 I# D0 _0 c) }- ?( J5 P
- <div v-bind:class="{'class1': class1}">
' I9 i, [- D _* b - directiva v-bind:class; ~! N+ Q) p" ^2 u1 y
- </div>) T. l$ a" I: f5 V2 |
- </div>
" {& g. S- y+ }! F; c- X -
, R2 o1 K7 {$ H" v9 v - <script>8 M6 x y$ l' B" w% g [8 X1 a/ ^
- new Vue({
: S+ E. O" J+ V$ |6 V+ X9 A6 @ - el: '#app',) w. F. n! W, E- t5 ~
- data:{
3 c$ k: _4 e3 q) f' r - class1: false
2 G9 D- n$ C# V - }
( u1 R- j/ J! D - });
# f2 O& L; l' Q3 S9 u - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
$ j! P8 M! h- z - {{5+5}}<br>! ]) S( O& n+ S) [) i- a' p2 J% k8 Y: ?
- {{ ok ? 'YES' : 'NO' }}<br> W6 Y3 `( [: F4 M4 d. I8 m! T
- {{ message.split('').reverse().join('') }}+ ]1 E6 X8 g( d3 P) H
- <div v-bind:id="'list-' + id">菜鸟教程</div>; @/ E' @; Z/ |5 s8 F: |0 \
- </div>
" [( I5 V |2 c6 t# e - % X- y* \+ a, Y+ {# c% ?
- <script>4 ]( Q& a0 s! h; Q, g" c+ N/ m3 i
- new Vue({
' X0 R8 W" T4 Q" X2 v - el: '#app',5 u! s+ w, r- y: @+ M
- data: {5 j& G7 `+ C% d+ q/ e4 T
- ok: true,
: _3 m0 I. R. I0 z - message: 'RUNOOB',
9 S3 V" }2 A9 y+ p" e - id : 1
+ D7 Q! f4 u c0 d - }1 D, ^# g; ~% ^8 Y4 ~
- })
4 a" ~9 `8 O9 e- |$ e3 m% k - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
) \: S: d7 j5 L3 f! T5 J - <p v-if="seen">现在你看到我了</p>) Q! q( m( Y6 E% W+ `! a+ B
- </div>
) j" o7 c/ c" g( y+ u: E9 ] - , q8 H4 ^# u3 J
- <script>
/ ^$ y4 k) P; p4 @: N - new Vue({2 I( ]7 L- Z- m0 W4 F# ]! ]3 W) f
- el: '#app',! w1 l/ D* z/ A' ]
- data: {7 c4 }3 F' w y! J! E! C9 O9 j
- seen: true
+ z$ e, T, v& W* ~$ z - }
: S) C6 r) u+ \' k1 v( j5 } - })
. v% R/ w8 |6 m& e! b3 w% H4 ~ - </script>
复制代码 & ?( g) G4 t0 H7 J9 r0 E8 m
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">+ U S2 l- {) w- H# ~' s
- <pre><a v-bind:href="url">菜鸟教程</a></pre>. j7 T3 \# h7 I6 `& Z
- </div>/ a( [3 w& t2 K4 Z, h$ N
-
$ `4 p6 m% ~- b3 w5 j t2 H$ |- y- y - <script>
7 y+ v" T" _8 K" X" _5 ~ - new Vue({
3 z- [& o" W3 t0 c) d - el: '#app',
W$ X7 z$ j4 e; r ]5 L - data: {
" K. W- ]6 {, J/ o8 p+ W% Y - url: 'http://www.runoob.com'
* g! P Z7 n7 W% N8 X - }' P8 O$ R/ b1 d; w9 M
- })# [1 G( W* Y8 d! h% a0 y) F8 I3 e' N
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
1 `; e+ h l; D8 o0 R: ` [) J
- <div id="app">
- P) X6 H0 `3 j7 s/ y - <pre><a v-bind:href="url">Vue参数</a></pre>* q2 l: n5 G0 W: Z) Y$ E, c: Q
- 1 i4 @8 v3 j/ }9 J7 `( ~
- </div>
7 j2 E7 _5 P+ v6 u - P# E' {: I1 Z; l" D3 T6 d
- <div id="app2">
5 ~/ @, B, G, e7 g0 \) C- [0 M# n4 [9 d - <p v-for="val in arr">
1 h D! m( |1 [7 c+ Q - {{val.a}}
' [" H1 F: G2 G) m( G$ T. d - </p>& k9 N8 s* i0 p% Z! |
- <a v-on:click="tap">点我</a>
x% ~/ @5 |$ m A7 [ - </div>$ @- Z1 Z; d# p8 x# ~* [& g
& X5 v" G; h l6 r3 f" Z- ! {% W$ g" U8 W* |! e' M
- <script>
" G9 C: b; P; C) u- d - new Vue({
8 A* Q2 E$ Z: b9 Y - el: '#app',0 q3 e- B$ t {6 T& [
- data: {
% E$ ^% ~& u" g& p+ X, T$ q) v - url: 'http://www.cncml.com'1 ^- | E' ?' ~" V
- }
; h$ d1 |$ A6 h) D1 j - })
- p/ ?6 ?( v# y0 p - new Vue({( ]+ `7 @! ^2 `3 A5 i+ @& M+ N
- el: '#app2',
6 ]: @7 H4 ]+ }. N' H - data: {
5 o* ]2 C* E7 z - arr:[
6 A# R+ Y: ~' W- F, t( g - {a:'bb'},/ T0 Y5 [; l/ [0 t$ m5 ~/ i
- {a:'cc'}
$ m( s. x1 ^7 g9 W - ]. ?6 r8 X# v0 ~% ?- f4 \
- },- g6 d- T( y2 H, E, o: Q) a
- methods:{+ W) A, u- I4 {/ Y
- tap : function(){' g# b# W! Z+ |1 ~- o6 Q' J
- this.arr.unshift({a:'new'})
% l' x' i9 s6 u, U+ k: d( H! W - }3 d6 {5 c* m7 }* K& O* Q
- }3 S0 L, R1 X3 y
- })
O( Q, n ?+ R - </script>
复制代码 / ?$ s B2 y& m0 j/ [4 x" T
6 V# s, q* |, T5 X
在这里参数是监听的事件名。 " C! e) |# n$ k$ o7 I1 l
|