cncml手绘网
标题: Vue.js 模板语法 [打印本页]
作者: admin 时间: 2018-7-1 23:16
标题: Vue.js 模板语法
Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
- <div id="app">
5 Q1 O |4 i9 Q1 o - <p>{{ message }}</p>
& n' b9 F# m4 w$ y0 q/ m% w - </div>
复制代码 Html使用 v-html 指令用于输出 html 代码:
- <div id="app">' L# }% `. ?3 n/ [& D9 f% o! |
- <div v-html="message"></div># K7 M( e5 Q/ K/ T0 q1 @
- </div>
9 b9 z. t% `% I7 B6 N5 P) f -
- k. x2 D9 Q; d/ @ - <script>
" { Z/ T3 U* a8 E- r0 e+ b - new Vue({
- ^6 P+ |" Y1 A' k5 w - el: '#app',5 `7 T" I8 t9 Y" H7 I
- data: {& F+ L7 c& ]4 F! ?) I6 H
- message: '<h1>菜鸟教程</h1>'+ U8 l% r3 ^4 Z( J* o8 s
- }3 k- q& I8 j3 x R* X
- })- K+ _. l$ J9 n5 R9 S& C6 Z6 Y4 e
- </script>
复制代码 属性HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
- <div id="app">
4 t3 m |- L8 p5 G - <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">& W' v9 l6 ?* ~! n) e# u+ ]: i* |
- <br><br>
2 h/ I8 P8 V$ g4 M0 l1 E - <div v-bind:class="{'class1': class1}">* I1 S& W& m4 L% P
- directiva v-bind:class
, R# M4 I) L8 I7 ?) P - </div>
4 F% R! C7 q; q1 ?1 E - </div>
1 ^. V7 A& ]8 {. c- x - + j. _ p0 ~) b8 n
- <script>
% E! |' g& Q" S% |9 z' M - new Vue({
9 D$ s& K6 L4 M7 c' z) x* r - el: '#app',# J7 W. Y* V" H) e F' |
- data:{& w( ?/ U, c9 K1 Q4 g" X
- class1: false; [; ~6 `- x- q2 U4 L6 d
- }
3 r4 G U1 z+ f2 c# ] - });" w6 f' V f q' I; P- K
- </script>
复制代码 表达式Vue.js 都提供了完全的 JavaScript 表达式支持。
- <div id="app">1 T& O% J3 s; K1 Y8 k4 h4 R) m
- {{5+5}}<br>; I/ `5 f- o% C7 i
- {{ ok ? 'YES' : 'NO' }}<br>2 D- h! F/ M+ ^; U
- {{ message.split('').reverse().join('') }}
* c% c" q- `- y$ R - <div v-bind:id="'list-' + id">菜鸟教程</div>+ Y2 T( Q/ p2 S7 N! \$ \( W5 |
- </div>& _4 f. W8 A* U8 Y8 e
- & |/ G& `+ ]# z! n) G( g
- <script>
& d% ?, ^4 x3 g - new Vue({1 g! y! s6 D6 h h9 C# D, ~! t3 `
- el: '#app',
1 p6 ^/ u- b) I; S5 Y7 g0 Q1 X+ \ - data: {: `( k: u, T6 |* h
- ok: true,3 [0 N0 l- V. j* n4 s, M- F7 p6 x
- message: 'RUNOOB',5 H6 ]6 |; u: O* U4 j q8 j/ m& E
- id : 1
$ l4 f) A. O, T% F - }- A2 r) B! @+ I
- })
& X2 @% K4 d1 r3 z+ ? - </script>
复制代码 指令指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
- <div id="app"># |' _& T( ~7 o9 x% i
- <p v-if="seen">现在你看到我了</p># [" c. W; o7 ?
- </div>
( s2 H) u) y/ l: H; K4 z( z - * ^- W' }8 m4 `% U- e2 @: m# U. I
- <script>
4 [4 I* w) \8 J2 [0 v+ P2 x2 x - new Vue({
. B: d2 Z6 q* `+ Q( }$ ` - el: '#app',3 V7 `' W/ M! ~: n
- data: {
, D) [9 D& H2 x# } - seen: true8 Q' Y4 d- `- }+ O; F" X7 `( ?
- }, K0 ~1 {6 S) ^. a' V
- })
5 u, z) k. ~" Q# K0 G2 R/ F" h - </script>
复制代码
9 u. P8 e- O' n& M这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
- <div id="app">
- _: e9 s; Q& f - <pre><a v-bind:href="url">菜鸟教程</a></pre>1 z( r8 w: b8 _ {/ H
- </div># z! W0 s! h+ {; w4 s
-
8 h; `' d$ y; @& K. P1 L2 t" }. a& f - <script>
% }4 s+ P) g$ r - new Vue({( q7 e2 ? Y0 o" S# S n% D
- el: '#app',; H- ~! u3 W2 t F+ y4 d9 r w
- data: {
; A) y5 n4 I" B7 e& [4 G" I% `0 M - url: 'http://www.runoob.com'
5 Z0 }; N+ X7 r - }
; C% q+ y/ M+ c, P8 o% q - })! K1 E7 E8 t' {! d
- </script>
复制代码在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
- <a v-on:click="doSomething">
复制代码
$ d) o5 C& v t8 N& m f( i
- <div id="app">
% I7 O+ }8 f" P! p6 @ - <pre><a v-bind:href="url">Vue参数</a></pre>
5 g$ R' b4 Z4 V
$ k; R* ^1 o- i9 P9 g& h- </div> q# N' p' g V& z# r( C
- 1 j" t" p8 ^# o+ K% t
- <div id="app2">
) K |; q1 s5 B* s5 d0 X* J7 y* {+ ] - <p v-for="val in arr">
, @ j7 C* V! ~8 B4 U I! X% H - {{val.a}}
, T0 z) ` D1 D2 B5 M - </p> \ `+ v {7 A6 A5 b& U
- <a v-on:click="tap">点我</a>6 ]* d3 S0 }( c: h0 W; d
- </div>
e- H" @- @- G+ `" @ - / N! W, @2 q2 N/ y1 U" @. @ k
" n! G8 _; Q- a' V( `- <script>$ r) x" W1 [2 L7 \6 ]: E
- new Vue({
) G& d. L! e" P T& S# v - el: '#app',, N, C9 Z( t% c. L
- data: {
" S* z2 ]! H& S& o1 t - url: 'http://www.cncml.com') o6 k2 o4 x& _$ k
- }
; q: u6 c; u3 R& @% I1 S - })
9 }9 g- L9 f3 |8 I7 ~ - new Vue({2 v) C/ B+ ?) ^& _) p
- el: '#app2',) ?% t/ p; I7 C* N. w
- data: {
f8 P2 U# B) K, I, ^ - arr:[
$ a( ~% V% b; j& A3 J - {a:'bb'},
7 L. q0 \9 U4 p) [. i' f& R! K7 ] - {a:'cc'}
* k( Q* N; W4 s - ]
4 L/ j! |. g- |: Q9 ] - },
9 M5 I" k4 H7 ?# k% A- _ - methods:{
: f H$ [4 S$ g0 a+ L - tap : function(){
* t% B9 x- }7 g1 k2 E* u1 Y1 u - this.arr.unshift({a:'new'})
5 D+ O4 e6 |/ A9 `# V( N4 [ - }
" p, R+ N, j! v. H. \ - }
9 D7 ]5 x: N o: B - })
! J" g2 z5 |2 X$ E5 w& r* y. I- ? - </script>
复制代码 * z g& N4 u) n7 |4 ?
. x9 S. U% s# o0 O4 k5 d
在这里参数是监听的事件名。
# z' c6 _- d$ J/ @( j, r0 @
修饰符修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
- <form v-on:submit.prevent="onSubmit"></form>
复制代码 & y6 w& j5 b% O: T R' T6 q2 ]
用户输入在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:
- <div id="app">1 t. ?7 K' o( E0 I
- <p>{{ message }}</p>; r8 D- a* @- p: f0 U
- <input v-model="message">
$ V0 m. Y7 f# c" r - </div>' \3 b' Y+ i' ^* n6 ^" y
- : I2 G$ y5 f& r. S P% P9 T! G
- <script>7 j' z$ g9 O6 X; @1 b) z
- new Vue({
/ C$ ?; a( ?" u! f; n - el: '#app',$ {8 x3 Z y0 z0 O& ]1 |
- data: {
- I5 J- i+ ]6 e: C0 o* N- d - message: 'Runoob!'
, G, M* A* \: @5 v - }
8 P D7 \( r+ D" q2 Q$ n y) P l - })2 a6 r7 I8 w: v4 N+ i0 G" X+ x5 ^" n
- </script>
复制代码按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作:
- <div id="app">
1 r) h5 N* N& U2 Y' u9 d - <p>{{ message }}</p>
- k: r/ V" D. P1 M! S - <button v-on:click="reverseMessage">反转字符串</button>
# N% c: R5 y* a - </div>
& y4 Q0 z: }, E+ J3 [ -
2 D% E6 R, P0 K! t; F% y - <script>/ V& f1 @$ J) u' C9 D% y4 z# Y6 x3 f
- new Vue({
% K' h; v/ S5 `9 Z; K$ R - el: '#app',8 O9 o3 M# i) H
- data: {% {& Q% Y3 M% M5 _, c5 \9 A5 z" ^
- message: 'Runoob!'
! f. m/ u, J! q: ~ - },( L5 B$ X1 @+ V
- methods: {! L* ^% V! c6 w2 O( m
- reverseMessage: function () {$ Q, q9 ^+ s1 U! G6 s
- this.message = this.message.split('').reverse().join('')
' G2 K* u# s' ^1 H. r+ Q) e) N$ k1 j - }
! F2 @' X, Q# q# W - }) ?+ X, }4 M% ^: ]
- })
t& D5 O$ |) t. \6 o2 J1 M - </script>
复制代码 , H3 d! T1 H" U$ x% R
过滤器Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:
- <!-- 在两个大括号中 -->! f" _/ ?4 k' V
- {{ message | capitalize }}, n) k9 w+ X! y: g3 s
$ g# d! F- L3 [- <!-- 在 v-bind 指令中 -->
$ _! g0 V$ @# Z3 ~ C9 d' w7 R8 \7 ] - <div v-bind:id="rawId | formatId"></div>
复制代码过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写:
- <div id="app">
3 F Y+ R9 x( u; V- \: W# t7 G - {{ message | capitalize }}
. o' _+ N" P- Z$ K - </div>
" a5 J1 E9 u5 g3 q+ c& ~ [! i -
r2 ?/ \. G- J8 G0 j- A - <script>) B0 z# m, O0 u; A
- new Vue({
6 {/ C5 g# q+ j( R# U - el: '#app',
2 y0 O' P# W$ n& [1 B - data: {" D* m: U) g7 {, ?1 c' I& I4 G S
- message: 'runoob'
5 y& u& u3 C0 ]+ R+ m( z, l - },# D1 a3 Z0 D4 r, I
- filters: {# Q' e% ?- F+ L8 u6 ?/ E
- capitalize: function (value) {
, J1 o x6 ?) Z* [ - if (!value) return ''$ B# |% r3 k7 m: |/ o
- value = value.toString()6 v7 e3 Z) ~( C3 ^
- return value.charAt(0).toUpperCase() + value.slice(1)
3 T5 v, |( L; P! F; u3 x - }! Y6 c' }) k$ C6 u. g; z8 q5 ^
- }( G- O$ u0 [. x; c& n0 k; m
- })
1 ?- z' ^/ B( |; B - </script>
复制代码过滤器可以串联:
- {{ message | filterA | filterB }}
复制代码过滤器是 JavaScript 函数,因此可以接受参数:
- {{ message | filterA('arg1', arg2) }}
复制代码这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
7 `+ `% B9 J) S. V
7 a. k' A. o& s- f缩写v-bind 缩写Vue.js 为两个最为常用的指令提供了特别的缩写:
- <!-- 完整语法 -->
; n* T0 W B8 g - <a v-bind:href="url"></a>
6 Z% e* U+ m% h - <!-- 缩写 --> T/ P( d0 O: R2 \
- <a :href="url"></a>
复制代码 v-on 缩写- <!-- 完整语法 -->
8 e- i' ?. }+ Q - <a v-on:click="doSomething"></a>
" l9 v/ w7 z; K3 p) D - <!-- 缩写 -->+ {# [2 W2 m; G- E: q
- <a @click="doSomething"></a>
复制代码 笔记
/ U" j. O! Z1 l5 g" ?9 d给元素绑定href时可以也绑一个target,新窗口打开页面。
6 {) A1 p) {& r* n [5 l- new Vue({ N. k( G8 ^2 l8 y. P# r0 k) Y
- el: '#app',8 c* K' ?7 A5 |0 {7 I
- data: {
( z. d& M) B0 s" y5 M - url: 'http://www.runoob.com',- N g1 j: U: v# _+ ^
- target:'_blank'" \# n) Z3 D5 B H' E1 v, ~( y
- }$ Y$ N: R# w, O
- })
复制代码当我们给一个比如 props 中,或者 data 中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用 Vue.set 方法。
Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新
. s0 r- q. z4 O% i这里本来 food 对象是没有 count 属性的,我们要给其添加 count 属性就必须使用 Vue.set 方法,而不能写成 this.food.count = 1
$ D' J1 } H$ |/ k. I- f2 S
2 W' M+ k+ j! K$ b# v- m$ E
8 K4 i. a' K( F7 u, r, |" H( {
# j- f) g1 |4 v$ W$ |2 D* s* s+ H; [- A) z) k* u* ?
! Y. m) G# J- _* A' Q6 h; z" ~
8 Y9 o6 N/ ?$ _6 A e. t$ P
! f: [9 T% F- W2 ~, u) R4 _0 S, R6 e: s% e1 o6 e
欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |