Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">+ f' J9 H7 Q+ Z' B
- <p>{{ message }}</p>* \' q+ [0 k. C8 v
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">9 a% u! `8 N8 {) _) B Y
- <div v-html="message"></div>
4 ]7 e& r: D2 R- H, o" p - </div>
, O/ ?9 O3 w. Z' P3 l) m! H - ) f+ Y) L* N9 y% Y% _7 q; J
- <script>0 y$ L, A- H5 E1 Q/ ^$ ]
- new Vue({7 A( u2 X! f j) J% x7 }# u+ \; K
- el: '#app',
) A1 { i6 F) l( e9 w - data: {+ U# j' c0 U! f
- message: '<h1>菜鸟教程</h1>'
. |# e. G1 H+ F& @ - }
0 C" c* I3 A9 G( I0 |2 K - })3 v, u% V2 E& P& [
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">" \$ i$ O2 \* O9 c8 l
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">' x" \2 t" T8 C/ A5 M- _ o. r
- <br><br>
8 c; ~$ ?. S' }6 n. H - <div v-bind:class="{'class1': class1}">2 U; ?0 K v1 g- h% D# O
- directiva v-bind:class
3 ~$ }0 u4 D4 g6 ~1 n0 L. b - </div>
2 {8 k u! X* P' ^* i; u - </div>) |$ ~. K: L0 Y
-
7 D- @! v b2 Q, l& c P# E% B - <script>
2 e B3 ]( `1 S4 e# X7 j6 c - new Vue({4 A% g/ f# V, S2 ?$ w
- el: '#app',
( K7 n2 M* W7 g# P# k - data:{
w6 {' r+ p3 v# Q. ?& L. I - class1: false
6 N% e. F5 |( t: p - }- U9 I0 t- d. P& O- D
- });3 A. A) ?( i. S h
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">0 `$ I+ |" h2 _
- {{5+5}}<br># |0 W9 L+ E6 j( F& X, h8 X
- {{ ok ? 'YES' : 'NO' }}<br>
- s2 h" A( R- I2 h - {{ message.split('').reverse().join('') }}& ~9 m' l% f0 _8 x0 R* K
- <div v-bind:id="'list-' + id">菜鸟教程</div>% L% y3 [9 m3 v) t" R
- </div>
- v+ b. N: r" _& H/ [% A. ` - 7 O& {# e9 C, f! g8 [! |: x `- V5 h" t% Y
- <script>
5 v! R, T4 ]- r& | - new Vue({" |2 q/ t! ^) y
- el: '#app',3 Q2 U9 A7 |1 }+ |) u$ C4 q g
- data: {
- A5 n8 d3 L5 b - ok: true,3 u! Z. S g1 l. _
- message: 'RUNOOB',/ Y4 b1 U0 ?+ ^, d6 }
- id : 1# M5 Y* C- R' E0 ~
- }
- m, ~( C$ [( [' P% o! @ - })
- O$ T ~3 ]: w. [) d - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
9 e" Q; [+ a( U f - <p v-if="seen">现在你看到我了</p>
$ J; l+ X/ Z2 b- I/ g2 Q - </div>
1 C7 T3 u9 u2 `: O5 T - # e; Q1 I7 k( w; Q3 Q
- <script>; o* ]' N: }' \
- new Vue({! M+ B' W. l4 ~ ? F
- el: '#app',
( [1 p: D# {# `0 r4 I& X' r. ^ - data: {
. P6 x4 H0 S- y% K/ S: E - seen: true5 e9 m9 N: y; N6 I! {- D
- }( ?7 K6 n. r! Z u. f( J) n7 S& S* k
- })1 a3 D5 O* z2 W" }, Z4 v
- </script>
复制代码
" d4 F1 b5 ~ U5 k8 y. a: @这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">4 S+ [9 V! ]" ~1 i4 b# [1 b* J
- <pre><a v-bind:href="url">菜鸟教程</a></pre>" e- E. i% A' F$ `6 ^& w. Z7 E
- </div>& l2 H7 A* ]5 t2 h: @, h
-
& B+ Y/ X' N t- b - <script>( D0 {; X3 y' T2 y+ j
- new Vue({
: G4 m5 I. E, i$ q - el: '#app',6 c7 j) i, }. @7 _! R G
- data: {8 _6 w, o, l) k+ p2 s7 g1 N' ?) v) m
- url: 'http://www.runoob.com'
( t, G; i* O' }2 p - }1 M) ~+ _9 L0 t
- })
0 R/ t* F9 x8 E6 Q - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码, u1 ^: u0 B4 d- F+ r( H
- <div id="app">
8 Q, T. K: g9 z& c# v - <pre><a v-bind:href="url">Vue参数</a></pre>
! ^ w2 D2 c: @7 h - : E, R# t4 q |. B1 S& i+ q% l% l
- </div>/ @: w o. B9 U
' I; A/ t6 [9 i# q1 L- <div id="app2">
) j5 B6 { G: L6 } - <p v-for="val in arr">
2 x. W- I5 I9 w. s - {{val.a}}
4 K$ K4 S! S4 ^ - </p>
/ v. C8 _. O3 u3 M9 }$ O2 x - <a v-on:click="tap">点我</a>
3 n. o% r+ ]3 U# |. ~" n; i, Q Y2 { - </div>
1 |5 P7 j8 c- _, x, D0 L8 U. Q9 g0 _; Y - ! v4 z: A6 M z2 Q3 s9 y) M
- ' K6 W) O* j/ ?" N; {
- <script>( J. h0 G# s* p
- new Vue({
8 S$ j( O; I' i' X% F - el: '#app',/ x) f# d! p* `7 \2 u3 l
- data: {
W/ w7 m& v1 u9 E - url: 'http://www.cncml.com'( L- V$ ? d- P- r8 Q
- }
; z% w* _. t5 T `' ?2 X: N - }), j1 t% i/ `" A0 s* W B
- new Vue({
* s* \" K( D- _% s - el: '#app2',
0 i) ^- K( r; Z' ^6 `/ D - data: {; v+ u! @8 i! _! x
- arr:[
T2 ]/ \- _ @5 R& e( d - {a:'bb'},; t. @, z( N$ p, L' N4 R* _
- {a:'cc'}
7 b' @: z; i' y8 }1 O0 I4 u) e - ]
- e8 a: h; n4 L. E) Q* d - },5 z8 e1 d% W5 [0 J- V# c5 _
- methods:{
* e4 X+ \6 e$ } - tap : function(){) ~( z7 u2 O& f
- this.arr.unshift({a:'new'})0 G2 H* B* P) C5 z! T% g
- }
- Z7 n! X4 Z) w) `$ p - }) {) t. k- t8 ?- `
- })
3 j: D0 l$ d6 n% V - </script>
复制代码 ( P% J: R# U5 y; w4 |6 F/ v- q
( t- H( S" c) N! Z; F: z! K6 o
在这里参数是监听的事件名。 8 g! j4 K5 b4 h; W: y% @, m5 {/ Q
|