|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">
- S0 m7 T' A g* _- r" ? - <p>{{ message }}</p>
: K7 z3 F" R% b) x% Y, a9 p3 l0 Y# s - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
$ V6 S7 d/ \, D$ m! t; X3 O - <div v-html="message"></div>6 V0 T, m$ R; P. |: h1 i
- </div>
: v0 e% S9 W' G5 y1 ^7 F; _' K. z -
3 g! o! `- r# {: v/ M" | - <script>( e: F: ?/ B {: Y' Y
- new Vue({- k! R( H8 T: }+ w3 x( ?
- el: '#app',
3 ?4 w' x) H. A6 y) d2 W0 v - data: {
' ?, u3 z- ]. S! l% @ - message: '<h1>菜鸟教程</h1>'
# x% X! I: N/ [4 F$ s3 { - }
8 \3 h: `6 j7 {% F" R! y/ R - })
0 I$ Y* ]$ E6 @* M, N# T - </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">* l, ~# |: D. Q" ~
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
6 }. G" x# H) |, {" i# I+ W - <br><br>
' @" b3 S Q1 g7 ]5 X& T) Q( i - <div v-bind:class="{'class1': class1}">/ Y' A1 H# u2 m* S( ?5 R! v
- directiva v-bind:class
# u- x# I- o. O7 c - </div>( {* B. O) S# s( s4 Z0 K6 H+ ~) f
- </div>! Z6 Q5 N" a4 L' L6 j
-
0 Q6 n" w+ ^/ P - <script>
$ _( s3 }4 ?- a/ V% Z, P - new Vue({
8 r# s, Z3 j* P - el: '#app',
% m, s6 W! p' {4 [8 x1 v4 n - data:{
; g( O- | V. c( E, k - class1: false" H* j, T- B: r1 m. ?. Y1 V v! ?
- }
4 G# v4 f' X( e# |# Z! J* r+ I - });5 H* @- p+ C: E
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
+ p3 l9 r; a% M7 E# P; d0 l - {{5+5}}<br>2 X1 K5 x- O$ P: n' M6 Q
- {{ ok ? 'YES' : 'NO' }}<br>- c$ g0 t7 y. ~5 v! j* C; [" _- [
- {{ message.split('').reverse().join('') }}, _0 J3 w! E: d0 Y
- <div v-bind:id="'list-' + id">菜鸟教程</div>
3 Z4 w5 D- O: b0 e+ x1 Z( y! v, V, t - </div>$ C6 c7 q( t: P* F, X5 J
-
$ I9 m, R- d6 V% E; t - <script>. K: |- j& u9 P3 [% z8 I
- new Vue({" w8 \% y4 `$ J0 }% Y! a
- el: '#app',1 x$ ^& h! z+ a- E: z) q; ]
- data: {
2 T" T: L& p/ h6 E i - ok: true,
! X# C8 m- I. t% d* H - message: 'RUNOOB',- }) Z) C, n0 d* K- C* J' y
- id : 1& h/ P! M: l- ?& `! a2 S
- }* \1 v- Y3 M' C5 o1 q9 p! A0 W- x6 X
- })
* I7 D. L9 ?8 ^9 t" Q X - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
' V$ \! {! f) H5 U2 n* f' P - <p v-if="seen">现在你看到我了</p>
7 F/ H2 j4 i% x; O5 Y5 D7 H8 [ - </div>2 G% i' w4 Y3 M' l* Y
-
0 F# `* L0 Y* I7 R+ o% t3 D - <script>! R h0 d* |0 k# E) B
- new Vue({
1 n- P& J* N) |5 |6 C k$ A* ` - el: '#app',
" r" S# L+ k) y0 p - data: {
% o) ?8 M% U8 N# a& u" Y - seen: true9 ^% Q- k; y' Q$ [; v
- }
8 y# m) ]& C# b' @: U7 x - })7 n% ^! {' \' P# V& f3 Y
- </script>
复制代码
4 ?" n5 E9 \' g这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">
/ s9 f- h; b* W d# H9 j - <pre><a v-bind:href="url">菜鸟教程</a></pre>1 @7 m1 ?. T W1 m- A ~( Q
- </div>7 F% Q2 c9 f! M) |
-
5 O! e8 [/ X6 f' `& A - <script>0 D; Y& B8 F3 o( P$ w: t, V
- new Vue({& }' H2 ~( `! |3 q) W6 ^6 u
- el: '#app',
) k5 Q5 p) z* L) p, Z; D - data: {) Z p5 Y* M# r7 O1 S+ G
- url: 'http://www.runoob.com'2 @6 Y" a. e7 s1 d
- }- s# p$ Z6 T# P! B) [3 |! v% l
- }); i! j& P, O7 {( {( [! Z. ~# k
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
" d+ g& q) I8 {' C
- <div id="app">4 }2 F: c o9 }2 y& o p% C
- <pre><a v-bind:href="url">Vue参数</a></pre>
8 m. k5 a7 R; A$ N8 v
" z: }9 x& J# m1 X- </div>' V" w: G' h( }5 \3 H1 J
* }: U- |/ l6 F- {; @# d- <div id="app2">
, ~" W e: x l" q2 g" N - <p v-for="val in arr">
0 z; ?0 @4 c8 [7 \0 o# M - {{val.a}}2 t; l4 J b4 z) G; p; R
- </p># b0 i( Y; t$ ]3 j
- <a v-on:click="tap">点我</a>
% m5 y, Q0 l2 L" y0 |& X - </div>
3 v+ _4 c$ l2 {& s- D- I: D/ C; Z
$ |3 N% ]; z ?( b! O1 \0 ^- ( Y8 @8 K8 g% g1 k6 c$ N
- <script>6 @+ a0 P% U k. k
- new Vue({1 n& O5 g5 u( w2 {0 Y* Q
- el: '#app',
; f/ T4 I* e% F2 v, a( ^: |! t A - data: {
$ J2 P$ a" J$ D+ p$ t; X3 Y - url: 'http://www.cncml.com'
) b P3 ?6 i& R, G/ d/ x1 ?0 F - }
) R/ Y% m- ^( J0 I - })4 K* C' v( M' n! x* L
- new Vue({$ H: {% d' f& r/ k; L3 c; Q
- el: '#app2',# P7 a$ j* f& C! h
- data: {
) ?' }# ~* n$ O3 U2 k1 F7 D - arr:[
, [/ `, }( a$ f" ` - {a:'bb'},
$ K9 Q2 D7 l- F, \4 o - {a:'cc'}$ C: v0 |2 x z. v
- ]
7 K. B2 k- h k; A* H0 z - },
. ]9 ]- t* \' O) ] K - methods:{/ g+ x/ `$ K3 O; q% D4 l, B) V
- tap : function(){' G1 _1 h8 `8 M, Y1 f2 u
- this.arr.unshift({a:'new'})& n: A" _( |4 P$ B e7 y7 y
- }
9 Z2 F# ~& b! w- {) U - }- I8 F7 f; l: m# @
- })
1 R( Y3 a7 l) {$ i+ H8 Z) d: D6 @ - </script>
复制代码 6 ?& X, S( E& u8 Z! j; h# s
% j8 c8 F; Q: r8 Z b
在这里参数是监听的事件名。 ! Q+ U( ^/ Z8 ]9 o% A9 g' Z
|