Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">/ j C& F4 n1 J! f
- <p>{{ message }}</p>4 ]: F! T* |0 N2 \! c* j! v
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">
7 B* z, \* e* A/ p3 x Z- o - <div v-html="message"></div>
$ F& `8 w( z$ w& F0 T# u/ i# W - </div> u6 ?% u# t: S, T
- ; h/ S2 |6 o* Y
- <script>& w) M2 o" P9 a" n+ z3 x
- new Vue({
% i8 k' D. `5 C) b6 N7 e - el: '#app',
* o" `- P ~( ] - data: {, ^9 _" A8 Z, ?/ b2 G R- [
- message: '<h1>菜鸟教程</h1>'
/ s# y: X2 m% l - }
. M* Q( R7 G5 Q( a - }), S% l4 S$ r+ ?) H k) H/ Q2 Y
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">2 i2 h$ O4 U9 h( ?
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
8 k' y% e: f4 H# U - <br><br>8 }; ~" f, X8 F
- <div v-bind:class="{'class1': class1}">
! C1 L5 d+ _0 n4 ^. w3 e - directiva v-bind:class
9 M# J1 H! G7 \1 n' I - </div>
/ u4 f" a5 b# H3 a. Y - </div>1 f' {( S8 t* v* k% A
- : {6 F2 p0 C( L* i6 F5 V. G
- <script>
' v+ K( T- K5 t: p - new Vue({* t6 E, V' k8 o( i& Z( R
- el: '#app',) `; _; H: p: c5 x% D9 W
- data:{
2 q9 p H* H a. n6 p - class1: false
$ ]0 w. Q& }1 z# L- H2 v' g5 L4 s; S - }% O6 i5 o4 }) v7 P$ R9 n
- });! ?8 X r2 z: i
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">* M& i& ~$ N. G; [3 w) y3 r
- {{5+5}}<br>
4 }$ ]& V4 C0 w! R! O - {{ ok ? 'YES' : 'NO' }}<br>
2 I5 }; p1 d. G& z& [' } - {{ message.split('').reverse().join('') }}
" h5 T' H3 B) |: k - <div v-bind:id="'list-' + id">菜鸟教程</div>
5 P; ^3 X4 Q( E - </div>
; s' b- Y5 h7 R9 x# ^+ _ - $ t, T5 \6 C% L! r/ f/ ~" j* X
- <script>
0 t& ^; l% T N; h7 a8 L - new Vue({* ^- H9 ^- a m2 S- a0 [
- el: '#app',
|% \6 h0 s J) `, L - data: {* B; m R7 y( k- Q# m8 m S) ~( E; Q7 W
- ok: true,$ q1 d' t- G" \( d( Z
- message: 'RUNOOB',& H, F7 d9 u; l7 ^3 f
- id : 1
}- b% a0 {) H8 w - }. F" k/ y: m+ D
- })+ e5 {2 ] z& t- i" t
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
2 F* s* n' Z+ j$ f' F6 e7 S - <p v-if="seen">现在你看到我了</p>
' j& V/ y. S6 P( X! v! A" W% ? - </div>+ e% t% B& _& j( |, ^8 N2 S
- , X; t6 C- w. E% v% `
- <script>) e3 ]: d& s9 z6 k
- new Vue({: J0 y3 N9 h4 w% K
- el: '#app',
/ R% B+ b" Y7 l# H: ^/ r7 ~+ o - data: {7 P1 a8 C6 @. s; k
- seen: true
; Z9 y/ j1 F/ B - }8 O4 a+ o8 g( W6 Y9 ^
- })2 V2 f) l% f* x# n$ l, @" O4 }0 K
- </script>
复制代码 3 O1 Y; v; u8 ]
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">; C: n, L# H$ H0 x8 i
- <pre><a v-bind:href="url">菜鸟教程</a></pre>) \2 `* a3 e. S( {2 o
- </div>, X: x' [: `: {7 a
-
; a6 p2 ^3 U/ z6 q& K - <script>6 i$ f& O3 R2 j% E/ p
- new Vue({
. m, p, S* a" T% t' ? - el: '#app',
$ L6 U3 D1 J, U - data: {6 s0 D5 f5 ^( [$ v& [
- url: 'http://www.runoob.com'
4 o# h. |# b8 O" w6 x! q - }
. [# v* v( Z/ V8 r7 w6 M - }) p8 l% E- |4 g) m/ p
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
8 u4 q9 b- u& L) k' ^9 I
- <div id="app">
; ^ e( Z9 g/ ~3 A- H! U- e - <pre><a v-bind:href="url">Vue参数</a></pre>& a3 i5 U* r, I8 G5 P5 W* ?. Z" h; X2 @
* I$ G( Z! g/ T3 m/ l8 ^- </div>7 x# S" T& _; c% N- c( ~' W
0 H: {* z0 g# ~. U7 {$ h* V; _/ D; U- <div id="app2">- g* G9 g$ ~% ~) _* b
- <p v-for="val in arr">
2 f$ L+ B; I1 c9 G4 |' _$ F) | - {{val.a}}1 ]) C) C% K4 _+ u
- </p>$ O$ T8 |& r& g& u* [: d9 w
- <a v-on:click="tap">点我</a>; _8 j7 o7 C1 |1 W
- </div>
8 {! t, o( S5 u
; I3 c- m( l; F' q1 I
4 ~7 U+ W* `$ V- i8 b5 n4 S- <script>
9 c: M# c, }( C) f2 V - new Vue({
; T/ D) P, A4 w6 k# r - el: '#app',
) m( W' q; {: |/ r - data: {1 ~6 |3 U6 t4 E# a
- url: 'http://www.cncml.com'
8 t& f1 ?3 z. _, Q - }8 \0 N5 r9 E3 q t/ O
- })! u4 b+ t2 m$ F8 M, u$ c" D
- new Vue({& @; C5 R/ j! s+ D7 }
- el: '#app2',: z- m! y+ b$ O5 V8 o
- data: {
L+ i5 j2 T1 ?/ N' p3 Z0 J - arr:[
2 G* T4 o6 f& H8 m+ H - {a:'bb'},1 J$ s" p1 l E1 A1 n
- {a:'cc'}* k/ V; O: f! k
- ]) I; e5 b/ D; N& F3 t
- },
" |9 L/ c' J" x. ?( \3 ]4 S - methods:{ A7 k3 U) k' A" O7 D! |# e& y3 b
- tap : function(){
' S5 Z( u& y4 ?1 v4 u - this.arr.unshift({a:'new'})+ V4 X, J; u9 ^/ a2 q; T, G. L
- }
r! g" b- L4 W5 p$ W0 |5 ^ - }$ z; \9 r+ {0 p. f) y8 N1 n' W
- })
6 n; P; K+ _/ P - </script>
复制代码 % q6 U* u+ O H6 B: z
5 s! N! m/ w7 `% l
在这里参数是监听的事件名。 9 b0 a& u/ j2 S) c/ y5 j
|