首页 > 代码库 > vue.js事件与属性
vue.js事件与属性
事件:
事件冒泡行为:
1、@click="show($event)"
show:function (ev) {
ev.cancelBubble=true;
}
2、@click.stop="show()"
事件捕获行为:
<div v-on:click.capture="doThis">...</div>
连用:<a v-on:click.stop.prevent="doThat"></a>
事件默认行为:
1、ev.preventDefault();
2、@contextmenu.prevent
键盘事件行为:
1、@keydown 可以有 $event ev.keycode
2、@keyup
3、回车键@keyup.13或者@keyup.enter;@keydown.13,@keydown.enter
同理有上下左右键up,down,left,right.还有space,esc,delete,tab
属性:
v-bind:src="" width/height/title等
简写::src=""
<img :src="http://www.mamicode.com/url" alt=">
class与style:
:class v-bind:class=""
:style v-bind:style=""
:class="[r,b,c]" r,b,c是data中的数据
:class="[r]"
:class="{r:true}"添加上class
:class="{r:false,b:true}"没添加上class r,只添加了b
模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转义输出
过滤器:
系统提供一些过滤器:
例: {{‘welcome‘|capitalize}} {{‘welcome‘|uppercase}} {{‘WELCOME‘|lowercase|capitalize}}
{{ message | filterA }}
{{ message | filterA | filterB }}
{{msg|currency ‘参数‘ }}
例: {{12|currency ‘¥‘}} 结果 ¥12
交互:
vue.js事件与属性