首页 > 代码库 > 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事件与属性