Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
1 B- E3 N: a" d - <p>{{ message }}</p>
. i( |% @$ t5 V Q# f - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app"> ?% t. L$ D, F/ r( X# M- G
- <div v-html="message"></div>9 S1 M r( L5 G
- </div>( V8 v5 u- X) L
- + g) b8 w7 x) M" \
- <script>/ [1 G4 R1 Z7 _. }
- new Vue({) C$ Z. X( w8 s* h) s, \/ x; p
- el: '#app',. y" V2 F# v' d6 h o
- data: {' H( v0 ^) E% h
- message: '<h1>菜鸟教程</h1>'
8 z9 R' b; I! L3 }0 D) E6 C) y - }
, m9 v: y; b( q5 h4 { - })2 b' {* [0 w- d" K' P* A6 x$ _/ i
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
& t2 X7 j% o5 K) ]5 {5 i - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
; `5 C" j, [2 @/ Q8 R" F% K - <br><br>" `! A7 c1 H& x; e4 G, Z& D
- <div v-bind:class="{'class1': class1}">
9 @/ F; z. M7 [. G! Z+ J$ @ - directiva v-bind:class
" a+ k0 v* C2 Z y- J - </div>0 Y) P" H$ i8 U6 W N+ G, Z" }
- </div>
8 c* G# @$ I5 j- r0 b; m: ] - 2 `. q- @4 J$ l& k, D V
- <script>
% Y2 {1 a0 L+ @3 p+ K$ ~2 @6 A - new Vue({
Q& r7 M1 X; P6 O - el: '#app',1 A2 h2 }6 t2 A! _: s+ \3 I
- data:{
; X9 a0 |0 M/ A! [1 n$ U# u9 i - class1: false7 s9 j, j0 |% {, k
- }% L8 Y$ b `& }# _: g( a1 S. j
- });
5 c. K0 R- i4 r - </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">* I. ]' i/ L8 J! x# N/ _0 D8 b7 M
- {{5+5}}<br>2 t6 j4 s$ [: T0 G6 P
- {{ ok ? 'YES' : 'NO' }}<br>) o# S6 H! L* O$ d3 K3 q
- {{ message.split('').reverse().join('') }}
" k9 f I& ?8 O- l8 U0 `9 b O - <div v-bind:id="'list-' + id">菜鸟教程</div>7 c6 ^# F1 J5 w2 o8 s, F
- </div>& ~4 J8 Q9 N3 ^6 K; m( a
-
7 ~( n% ?/ Q, O M# y - <script>
0 h5 O8 _8 J w; U0 z# z, i+ Q - new Vue({
7 P7 a1 b8 d( U$ U3 l' O6 K7 E - el: '#app',
6 u& x' u8 o: M! F* c - data: {
7 L1 }) W* x2 { - ok: true,
$ d: w+ A! L% r& [" z! G! r - message: 'RUNOOB',& Q* [ _& K8 k. e e _; F8 G; `
- id : 1, V4 y3 t+ ^9 C2 n9 X! y# d' S. y$ E% x
- }
# F' I( z, X- Y8 s+ `1 R x - })
5 }; F& i# O5 B3 d- M - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">; {5 J! X2 R# S# P/ p
- <p v-if="seen">现在你看到我了</p>( d, E4 |9 j) h/ Q& R3 w
- </div>$ @; G( T. o2 y& i6 ?) B
- . r3 g# Y* I$ n- K/ ?4 g/ I: u5 i
- <script>
6 `; { x* Z2 i. z( e - new Vue({
" [" w, e* ^: l6 ?, n - el: '#app',. ?. w0 U; N8 z5 Q l0 o6 J7 o; Y/ J
- data: {
( N0 g+ z* g0 T# O: { M; X - seen: true& l4 Z" x# o' \% C* Z, q) D
- }9 X3 V, G, o2 @
- })
* }6 J) S& r4 n3 ]1 r - </script>
复制代码 : f" f* b& `% s( T: H* J& B9 m
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
( ?. T! K" \" K3 f. G. J - <pre><a v-bind:href="url">菜鸟教程</a></pre>0 @5 t, @9 N# |" F
- </div>
: ^% ~% [9 C9 |: N$ F- f0 S - - T% P! d3 u1 J
- <script>3 V a$ n; j# ^+ @& Q
- new Vue({
^5 C8 x/ U- U0 S. N. u b - el: '#app',
0 P6 y- C( w% l - data: {8 p: [7 a6 \5 ~ g: L' T
- url: 'http://www.runoob.com'5 f2 C. E8 `1 Q( k
- }
' K5 u" m) A P5 U- k: Y# {, _ - })
$ \: z' b5 [9 o - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
- \: D) i1 }" e8 N
- <div id="app">+ R5 R# q# Q4 \0 O: [6 g
- <pre><a v-bind:href="url">Vue参数</a></pre>+ i1 i9 b/ n: m8 i2 ^# k
- : I2 h* j+ N. f; J
- </div>$ ?$ O2 d" x/ G6 W
z5 T. U% K8 c# i( n; U2 } Q- <div id="app2"> q6 I6 Q; L. i7 I4 ~
- <p v-for="val in arr">
) K6 t$ j5 B( d; b - {{val.a}}! G1 n" `' C4 f6 ^: B
- </p>' }) H; Q/ p2 L9 z
- <a v-on:click="tap">点我</a>" a4 \. T2 k2 t8 b! O; o. q
- </div>
, D& ~" P* w7 P: N
0 C/ Q) I5 p1 `. {% n9 G- ( a, O4 K' I0 v
- <script>( V" u$ q8 y' ]# U
- new Vue({
8 F$ v! g; u% r6 a - el: '#app',) f# {* c3 }% D5 K- `, P2 T
- data: {+ K- o& v' o- |7 z
- url: 'http://www.cncml.com'4 B; C5 S% d4 f* p% l
- }
G" `3 O4 x" J' ^+ h4 `/ t - })
' d& B% i. ~9 E' I- Z, F - new Vue({1 h- z3 F J5 n X$ ~: D2 W
- el: '#app2',
+ H' X. E/ [8 b7 k- I) i5 g - data: {) v$ ^. e% u4 l
- arr:[* v7 U0 G! B$ R: v/ ^$ q
- {a:'bb'},- F. c( J9 u* U. z/ V
- {a:'cc'}& d6 i2 u R6 Z1 g2 k
- ]! R" Z% O$ R0 d; r& O
- },9 E3 G1 Q8 H7 \2 z
- methods:{: b# O6 ^% e- I% j/ |' K2 d
- tap : function(){7 u# A& E6 R$ c) d' S
- this.arr.unshift({a:'new'})* g+ Y, l8 q/ A! i
- }
; i, g; H! n2 w# ^3 k0 W% i - }
" v0 I: c e5 n - })" |9 ^& W/ c; m8 r0 w" F
- </script>
复制代码
1 j$ r6 O9 D" O; h6 k7 Y6 k1 j( e* X+ g
在这里参数是监听的事件名。
- @, U$ i% h, l& l$ v |