Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">/ q! B$ r( E/ p5 u
- <p>{{ message }}</p>
* d6 @! M- @6 Y1 @$ x% {# |: s& L2 D - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">. R; o. e1 r4 ^" V3 T
- <div v-html="message"></div>0 `) S/ D7 W* O5 X; o$ S% Z
- </div>0 Q+ b C) x" S& E2 r# G7 V8 P
-
4 ^# i' f/ A; s7 O - <script>
9 `$ U9 @4 @) j5 U3 y( b- D - new Vue({
- I& V1 ~, L. `) u$ C - el: '#app',1 i4 R6 [" d3 V; [' w+ V4 B% G4 P
- data: {* \" `6 Z( ]0 h0 F# p& q
- message: '<h1>菜鸟教程</h1>'
, n9 H3 B/ U: D3 ` - }8 U/ a6 T$ ]$ V) a2 ?
- })
, F% e6 j t7 }- Y, X1 d7 H9 ] - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
" w1 m# `8 \. l9 t" ?- N: Q; S: X - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">7 Z- X' Y, \& X6 X/ x5 k
- <br><br>
# T, M6 b1 r; ~( c/ P - <div v-bind:class="{'class1': class1}"># ]8 j0 [& I9 |* C' U& C8 ?2 {
- directiva v-bind:class
( i# h. A5 X z3 @ s - </div>" i) J0 Z# D& B$ I
- </div>
+ @" @0 h N# @8 s5 p - . ~3 l) O; b% {1 ~5 C& Q
- <script>( k6 S4 x; Q3 S) C! y6 h
- new Vue({
, q% _. J; s; M) t' e1 @ - el: '#app',5 a8 m2 O' ~( [3 v( P- b# S
- data:{
5 `3 j e8 P: W& |# c, l - class1: false% ]* u7 `( F7 W I! }
- }
3 j1 A7 M" H, i - });7 V9 T8 H& F: m. h
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
9 ~6 G2 U9 S& E - {{5+5}}<br>
7 Y7 a7 O6 K. {! w* J - {{ ok ? 'YES' : 'NO' }}<br>
4 d/ A0 Y4 e1 l2 \5 O - {{ message.split('').reverse().join('') }}% H0 s/ R) V2 {8 C5 `
- <div v-bind:id="'list-' + id">菜鸟教程</div>: }* E3 L6 u; e& r: D
- </div>
' v4 L8 {) L8 Y% D L* m - ! y0 k+ W+ w1 F4 p! H0 i
- <script>
' b7 Q3 P: ~7 W4 N - new Vue({- t$ C" z4 |$ ]& K2 |: p1 O
- el: '#app',, j2 p& r. z6 ]3 l8 Z+ R
- data: {6 T) W; ^7 c( ]( e$ a Q+ T4 \
- ok: true,
m6 Q' g2 y% M, ^0 g" k - message: 'RUNOOB',2 x2 m, t- K+ N; ?' Y' \0 ~
- id : 12 Y2 k( U/ y8 S+ Z- ~. `" J
- }
1 @6 J$ Y( i! U7 w' @/ b - })' ~0 ~+ ~: T# |2 y/ N
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
; M4 w# E. ?4 P( r/ c - <p v-if="seen">现在你看到我了</p>
5 M$ M1 n! r+ `. m V- |9 @& C) [* r - </div>
6 | D* G* U# r" ?& j0 G3 L -
, w' N+ r; m; K- q/ O - <script>! k, Y7 P! x; u$ k3 J0 W- P
- new Vue({: X$ e1 ^! ?7 n5 L
- el: '#app',
$ ~/ ~! D$ {, V/ ` - data: {2 k2 a" @" l/ B7 k
- seen: true7 m1 {& h4 h4 J! W9 p* a J- i
- }
9 m2 h# k3 c2 ?2 _* { - })
3 X3 Z8 e7 X7 ~ H% D/ |$ n - </script>
复制代码
2 f; H7 E2 ^( N+ [" k这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
1 \! U' M" w& { - <pre><a v-bind:href="url">菜鸟教程</a></pre>7 w- x+ G, ^$ o3 B
- </div>+ l: t9 `; a' M9 n# F0 e
-
0 Z, |. Y. g7 O5 F% p3 n4 u - <script>
8 p* J. s+ l' O2 [ - new Vue({
" |: m% u2 c* C) B. _2 u* k- ^ - el: '#app',; a7 A0 D* {7 U: A
- data: {2 L/ n$ M% d3 K3 }& P% Y
- url: 'http://www.runoob.com'
' t: E! P. l8 s7 @) Q7 {0 ? - }
& `0 Z# f4 N* t4 ~ - })
0 m+ Q" B m' g' ?) t - </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码. w; a K' G3 w' T' h
- <div id="app">0 q( {/ u' S" W& `2 Q r
- <pre><a v-bind:href="url">Vue参数</a></pre>; D1 s) ~4 c! {
- $ o$ x& B& W- B7 t! r! M: Y
- </div>
8 G5 N/ g8 t0 T9 ~$ F/ W6 C
( u; o/ d6 B- a( p' s- <div id="app2">
( x( U" \& p" [+ ` - <p v-for="val in arr">, y/ C& z, E @0 b/ Q& t/ d) |
- {{val.a}}) {% r |- c: U: J: d4 ~
- </p>
% @8 E8 t. [, ~) V$ m1 @% P9 } - <a v-on:click="tap">点我</a>* h0 P/ E0 m! G- _
- </div>4 K3 c1 ?2 t. K- M O; E
- 2 F2 a( S) S' \- z
: s- ?8 ?+ g. E" P- <script>$ J) U( Y( }3 |. a) W+ {! T
- new Vue({/ x& q6 y, \% \3 n
- el: '#app',
5 ?" Q# ]+ u) W - data: {
! \8 C U) I+ }% u - url: 'http://www.cncml.com'! p }. W0 `4 p: L( [1 C4 q: K' J5 ~
- }" B+ A0 w/ h7 A5 r6 D' f
- })
5 ~. @6 ?" H q+ A6 i$ D0 G - new Vue({0 X* k' ]! n- ~; y5 z
- el: '#app2',+ D* j6 A/ Z7 Z& l8 g+ ^
- data: {! ]6 Q& P, |% Y* C. A& A
- arr:[% z5 ^0 c* h( w/ E7 \, F# c
- {a:'bb'},0 S% d `2 K4 ^' r- v! W
- {a:'cc'}! @6 I# s5 a! W+ [# }! ]
- ]) r% Y: H7 K: d& X" ~
- },1 U6 V- ^/ m/ a8 A
- methods:{0 B0 A) [$ C- ?" M! k" d
- tap : function(){ U9 n+ L. }! m# Q6 c% j' h E
- this.arr.unshift({a:'new'})
3 h- @ L+ ^$ h j, W1 X6 { - }4 G& |( k; h6 v" O8 u0 E
- }" G ~3 U* N5 w( Y
- })
' ?( e. w: z( o1 c - </script>
复制代码 + y# T3 B, j8 ~! {
* h! U- _8 K* B1 _
在这里参数是监听的事件名。 / @# L5 g6 S3 g- M/ v* e$ H [
|