|
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: - <div id="app">7 f, Z1 _' v7 b: S" F( N
- <p>{{ message }}</p>' U: N* O5 q4 Q1 [4 n
- </div>
复制代码 Html使用 v-html 指令用于输出 html 代码: - <div id="app">7 R# Q+ \: Y. x7 I5 ]6 M
- <div v-html="message"></div>) c$ W4 N& H) e% ?4 N& _
- </div>$ w3 |: n: c6 |7 _
-
6 w9 W1 K6 g! E/ v - <script>2 v* V2 F3 G7 y6 G/ j/ G; Q* e
- new Vue({
2 n' K, B" b9 q# V6 m5 Z - el: '#app',3 s& C' b! u0 r( h( v
- data: {
! U7 d% W. k8 K ]! P f& ^& e" v - message: '<h1>菜鸟教程</h1>'
+ |: ]% P9 i* [; F - }# t) S9 e! d/ D& |0 o$ r
- }). C1 n. c+ s3 j D
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: - <div id="app">
4 f4 X( z, j8 B& i x - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">& A' _3 A- S: R0 a
- <br><br>1 R4 h6 Z% u2 I$ G/ i) |' ]
- <div v-bind:class="{'class1': class1}">
( M( W. V) }% o; r - directiva v-bind:class$ E7 g2 p' {2 p+ b
- </div>6 w ^7 J$ F$ S2 E* l' k1 Q
- </div>0 e' y- T8 x4 ?6 J
-
1 S" z( S; P* w: _4 I' s - <script>8 m' Q6 e. i7 l; n! v) Z' W
- new Vue({: I4 \% P6 Q2 H- h# W. Q
- el: '#app',
4 o) g/ p: K$ H8 j" q B7 ? - data:{
7 t( z6 R: k8 a7 N$ d; ` - class1: false
/ z$ p* C8 V8 E% }" D - }! J' F0 f" m1 L$ _2 V8 n g5 r
- });# o9 L! D- L6 Z: v9 Q0 a/ T
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。 - <div id="app">
$ c8 A# y3 j# L6 ?5 n - {{5+5}}<br>) y Z9 c4 F% n; D: I! G1 E! E
- {{ ok ? 'YES' : 'NO' }}<br>
9 C6 B! V2 C* C7 C5 F9 x - {{ message.split('').reverse().join('') }}
2 |% z4 R0 g. w$ \6 j3 {: K: a+ W - <div v-bind:id="'list-' + id">菜鸟教程</div>
5 w6 ^! x% N1 F3 O - </div>
' y' y. [1 a4 c: s7 f( K- J -
% {5 G* t. ~# C' x - <script>
. a) W2 [/ ?+ @* v: l, V1 n - new Vue({: a* o8 H! g) s5 f; u- u. O
- el: '#app',& b. y% g, f4 s7 G3 q g' i
- data: {6 g+ V% v& i/ N: [2 U8 k/ P
- ok: true,4 g! j; n8 U& l
- message: 'RUNOOB',+ D# ^- c$ O% m9 J" ^
- id : 18 |3 k: n0 i4 o: ]3 i
- }/ b, b6 m4 k9 U1 t) _3 P0 P1 `: ~
- })" s0 w9 O [; F* v `/ i
- </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: - <div id="app">
( s. @, s1 d' G - <p v-if="seen">现在你看到我了</p>% n( d* k* f' ~8 T6 z( E, ?& T; v
- </div>5 g1 `) Y/ t2 O) ~0 o% \, V. R N
- 2 m* {8 @/ W- M1 A
- <script>
9 V! f4 Y" _6 d/ C3 Y - new Vue({6 T* G; f2 r( }) j, F, K: D9 h. h
- el: '#app',
& s) `+ t- V% z6 Y7 f2 r - data: {
. A% J/ o) }& x& q; C$ P - seen: true* p( v% ?. X; L1 y
- }; k* ?; x. G5 Z& ^/ k
- })
' \* Q `$ K, d - </script>
复制代码
- n& E, L+ x6 q这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: - <div id="app">2 l0 t: ~. [8 _" e
- <pre><a v-bind:href="url">菜鸟教程</a></pre>/ a$ |: Z. _, Q( p& {9 u
- </div>! Y' p/ q6 y4 n" W
- 1 e. c* O( H! f) j$ N
- <script>
; w) B* s8 v' a3 d* k% t. c8 Q - new Vue({
; b9 u5 {5 _( t3 g- q: l) A+ r - el: '#app',
" r* D! O& [/ b' g$ y - data: {
' ]$ ^$ ]4 ], _* c8 |: Y" g! r2 Z) { - url: 'http://www.runoob.com'
+ N& q$ U" [8 X+ g- P7 s - }
) j9 l& A7 ^9 N- e( _5 ^ - })% I4 e9 _5 z+ U8 r
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件: - <a v-on:click="doSomething">
复制代码
" k8 U- o% j6 _& a3 \0 Y( u! F
- <div id="app">
0 a0 j8 ~5 B5 y6 i - <pre><a v-bind:href="url">Vue参数</a></pre>
u& V/ i4 V, b - 2 L& |5 u' Q: Y* h
- </div>0 }# q/ ~/ Y; D$ B
3 O3 c9 I# J" |( N- <div id="app2">* }3 D: A$ T& v/ [
- <p v-for="val in arr">
& S; p: J; P6 G# C* { - {{val.a}}, G4 d' w5 `) w1 \. f% t! M
- </p>
" V! k5 B% I& a2 h" p0 N' N - <a v-on:click="tap">点我</a>* v+ m M# x: r/ Y# D
- </div> s; y5 {0 |, t' z
* T- C* N. Z; Z5 i: Q* Z
0 ?; O0 n; u. r9 X4 K0 V- <script>7 ^' h ~: e8 r `$ P. m8 @$ K$ H
- new Vue({
4 M/ b+ _! N. u: A6 B' [ - el: '#app',4 v, t! Z2 x' `6 W6 C; d z$ Z
- data: {
B9 R2 }5 S, y7 l- Z - url: 'http://www.cncml.com'
/ V! z9 O/ b6 m( \2 B - }6 H. d! ?7 k: T0 ^8 N! t$ X
- })
5 G( Q" z* |) S! L2 Y; U( p - new Vue({( Y* x% W; ~+ h
- el: '#app2',
$ u0 ?* t9 h9 K; Z- y. z, n - data: { r6 E: E1 R7 t0 F
- arr:[" R4 b6 d' g7 _. v( e+ y" D
- {a:'bb'},
4 B, o3 k) i. b5 } Y# k0 G2 ? - {a:'cc'}
4 q( A9 s4 i3 W% D - ]/ Z A: I( ]# ? P9 I
- },2 s% H6 C0 D9 a( ?
- methods:{
$ K- }( Q$ ]! N! T* I% P: k - tap : function(){
8 S8 G3 S3 ?5 j4 J2 h+ V3 }. O - this.arr.unshift({a:'new'})
- @* j& G! a$ K4 N5 B: i7 d - }
5 I. Q+ S# j( V) U; D& r - }6 `" S$ g' i! I8 w' ?% l) J
- })4 G3 l- d5 @! W- }. L
- </script>
复制代码
9 j. O& b6 P+ S: |
: i* r6 Z' @8 }2 K* x) V& M
在这里参数是监听的事件名。 3 O1 g0 X2 \+ t
|