vue.js事件与属性

Posted 2020-09-20 Heroine.z

事件：

　　事件冒泡行为：

　　　　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="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

交互：