VueJs中事件修饰符/阻止冒泡/默认行为/自身触发/自定义修饰符/过滤器

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.prevent
.capture
.self
.once
 <div @click='doThis' style="width:100px;height: 100px; background: red;">
    点击父元素
  <a v-on:click.stop="doThis">点击子元素
  </a>
 </div>
/*当点击父元素的时候,执行doThis,当点击子元素a的时候,这个点击动作不单单触发了a标签,同时也触发了div标签,这就是事件冒泡,所以假设上述例子中a标签为v-on:click='doThis',则doThis会被执行两次,父元素和子元素都执行了一次click事件,而.stop则是阻止事件冒泡,再次点击a标签,click事件只会执行一次*/
按键修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

全部的按键别名:

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

按键修饰符

~~~

1. v-on中的修饰符 #

修饰符

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent=”onSubmit”></form> 之后当我们更深入地了解 v-on 与v-model时,会看到更多修饰符的使用。

1.1 阻止冒泡 #

防止子级事件触发时,触发父级的事件

<div id="app">
    <div @click="parent">
        parent
        <div @click.stop="child">child</div>
    </div>
</div>

给子父级增加方法

var vm = new Vue({
    el:'#app',
    methods:{
        parent: function () {
            console.log('parent');
        },
        child: function () {
            console.log('child');
        }
    }
});

1.2 自己身上触发 #

<div id="app">
    <div @clickt.self="parent">
        parent
        <div @click="child">child</div>
    </div>
</div>

1.3 阻止默认事件 #

<a href="http://www.baidu.com" @click.prevent>goBD</a>

1.4 按键修饰符 #

<input type="text" @keyup.13="dosome">
  或
<input type="text" @keyup.enter="dosome">

内置的修饰符

键位 修饰符含义 键位 修饰符含义 键位 修饰符含义
enter 按下回车键 up 按下上键 left 按下左键
tab 按下tab键 down 按下下键 delete 按下删除键
esc 按下ESC键 right 按下右键 space 按下空格键

1.5 自定义修饰符 #

Vue.directive('on').keyCodes.A = 65;

增加指令,后期会在指令篇中详细讲解如何自定义指令

2.绑定样式 #

很多时候我们需要的样式,要根据我们的数据进行绑定

2.1 通过{{}}方式绑定 #

<div class="{{hello}}">直接取data上对象的属性</div>

2.2 优雅的绑定方式 #

<div :class="hello">直接取data上对象的属性</div>

2.3 根据boolean类型增加样式 #

<div v-bind:class="{class1:true,class2:false}">根据数据的boolean类型增加class样式</div>

2.4 绑定数组 #

<div v-bind:class="[class1,class2]">增加class1,和class2两个样式</div>

2.5 根据条件绑定样式 #

<div v-bind:class="[class1,isTrue?'class2':'class3']">三元表达式判断</div>

2.6 数组和对象混用 #

<div v-bind:class="[class1,{class2:isTrue}]">比较常见的增加样式用法</div>

{{className}}和v-bind:class不要混用; class 和v-bind:class可以同时存在

3 绑定行内样式 #

3.1 直接绑定 #

<div v-bind:style="{color:'red',background:'yellow'}">行内</div>

3.2 绑定对象 #

<div v-bind:style="className">行内</div>
data:{
    className:{color:'red'}
}

3.3 数组方式绑定多组对象 #

<div v-bind:style="[hello,world]">2个样式</div>
data:{
    hello:{color:'red'},
    world:{fontSize:'50px'}
}

当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js会自动侦测并添加相应的前缀。

4.过滤器 #

VueJs中的过滤器基础

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 “ | ”, 比如:

{{ msg | capitalize }}
// 'abc' => 'ABC'

uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器。

VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤。接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy + orderBy 过滤器来过滤所有商品products。过滤出来的产品是属于水果类商品。

filterBy过滤器 : 过滤器的值必须是一个数组,filterBy + 过滤条件。过滤条件是:’string || function’+ in ‘optionKeyName’

orderBy过滤器 : 过滤器的值必须是一个数组,orderBy + 过滤条件。过滤条件是:’string || array ||function’ + ‘order ≥ 0 为升序 || order < 0 为降序’

接下来,我们可以看下下面这个例子:我们有一个商品数组products,我们希望遍历这个数组,并把他们打印成一张清单,这个用v-for很容易实现。

<ul class="product">
    <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 1">
        {{product.name}}-{{product.price | currency}}
    </li>
</ul>

上面的例子,就是用filterBy 过滤在 ‘category’中含有’水果’ 关键字的列表,返回的列表就是只含有 ‘水果’ 关键字的列表,而orderBy过滤器是根据价格做了一个升序,如果想要降序,只需要加一个小于0的参数;

4.1 内置过滤器 #

过滤器名字 作用 过滤器名字 作用
capitalize 首字母大写 uppercase 转换成大写
lowercase 转换成小写 currency 货币过滤器
pluralize 根据数量 json 对象过滤器
debounce 延迟数据刷新 limitBy 限制
filterBy 过滤器属性 orderBy 排序过滤器

4.1.1 capitalize #

{{ 'hello' | capitalize }} //Hello

4.1.2 uppercase #

{{ 'hello' | uppercase }} //HELLO

4.1.3 lowercase #

{{ 'HELLO' | lowercase  }} //hello

4.1.4 currency #

{{123.43123 | currency '£' 2}}

传递多个参数的时候,用空格分开

4.1.5 pluralize #

除了1所有的都是复数

{{1 | pluralize 'item'}}

4.1.6 pluralize #

转换不同数字,最大为9不满足的均为最后一项

{{9 | pluralize 'item' 'item2' 'item3' 'item4' 'item5' 'item6' 'item7' 'item8' 'item9' 'item10' 'item11'}}

4.1.7 debounce #

延迟事件执行时间

<input @keyup="onKeyup | debounce 500">

4.1.8 limitBy #

显示几条,从哪条开始显示

<button @click="count+=2">下一页</button>
<div v-for="a in arr | limitBy 2 count">
    {{a}}
</div>

4.1.9 filterBy #

在所用数据中过滤

<div v-for="item in items | filterBy 'hello'">

在指定的数据中过滤,节约性能

<div v-for="item in items | filterBy 'Tom' in 'name' 'phone'">

4.1.10 orderBy #

<button @click="order = order * -1">排序反</button>
<div v-for="item in items | orderBy 'name' -1">

5.自定义过滤器 #

虽然VueJs给我们提供了很多强有力的过滤器,但有时候还是不够。值得庆幸的,Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器,之后我们就可以利用管道 “ | ” 来完成过滤。

定义一个全局的自定义过滤器,需要使用Vue.filter()构造器。这个构造器需要两个参数。

Vue.filter() Constructor Parameters:

1.filterId: 过滤器ID,用来做为你的过滤器的唯一标识;

2.filter function: 过滤器函数,用一个function来接收一个参数,之后再将接收到的参数格式化为想要的数据结果。

回到之前的例子:现在设想我们有一个网上商城,并给我们的所有商品打五折。

为了完成这个例子,我们需要完成的是

  • 使用Vue.filter()构造器创建一个过滤器叫做discount

  • 输入商品的原价,能够返回其打五折之后的折扣价

  Vue.filter( 'discount' , function(value) {
        return value  * .5 ;
  });

  new Vue({
        el : 'body',
        data : {
              products : [
                    {name: 'microphone', price: 25, category: 'electronics'},
                    {name: 'laptop case', price: 15, category: 'accessories'},
                    {name: 'screen cleaner', price: 17, category: 'accessories'},
                    {name: 'laptop charger', price: 70, category: 'electronics'},
                    {name: 'mouse', price: 40, category: 'electronics'},
                    {name: 'earphones', price: 20, category: 'electronics'},
                    {name: 'monitor', price: 120, category: 'electronics'}
              ]
        }
  });

现在就可以像使用Vue自带的过滤器一样使用自定义过滤器了

<ul>
      <li v-for="product in products">
           {{ product.name | capitalize }} - {{ product.price | discount | currency }}
      </li>
</ul>

上面的html代码将会输出打了五折之后的所有商品的清单列表。

那如果我们想要的是任意折扣呢?我们应该在discount过滤器里增加一个折扣数值参数,改造一下我们的过滤器。

  Vue.filter( 'discount' , function(value,discount) {
        return value  * ( discount / 100 ) ;
  });

然后重新调用我们的过滤器

<ul>
      <li v-for="product in products">
           {{ product.name | capitalize }} - {{ product.price | discount 25 | currency }}
      </li>
</ul>

我们也可以在我们Vue实例里构造我们的过滤器,这样构造的好处是,这样就不会影响到其他不需要用到这个过滤器的Vue实例。

  new Vue({
        el : 'body',
        data : {
              products : [
                    {name: 'microphone', price: 25, category: 'electronics'},
                    {name: 'laptop case', price: 15, category: 'accessories'},
                    {name: 'screen cleaner', price: 17, category: 'accessories'},
                    {name: 'laptop charger', price: 70, category: 'electronics'},
                    {name: 'mouse', price: 40, category: 'electronics'},
                    {name: 'earphones', price: 20, category: 'electronics'},
                    {name: 'monitor', price: 120, category: 'electronics'}
              ]
        },
        filters: {
              discount : function(value, discount){
                    return value * ( discount / 100 );
              }
        }
  });


定义在全局就能在所有的实例中调用过滤器,如果定义在了实例里就在实例里调用过滤器。

通过Vue.filter()方法注册过滤器

Vue.filter('capitalize', function (value,begin,end) {
        return value.slice(0,begin)+value.slice(begin,end).toUpperCase()+value.slice(end);
});

将数据写回model,对写入的内容进行过滤,当失去焦点时候继续过滤

<input type="text" v-model="hello | write 2">
{{hello}}
Vue.filter('write',{
    read: function (value,key) {
        return value[key]
    },
    write: function (val) {
        return val+'zfpx'
    }
});

6.表单元素 #

6.1 checkbox #

获取checkbox值为当前value值,并且数据要为数组类型

<input checked type="checkbox" value="点击" v-model="name" >
<input type="checkbox" value="点击1" v-model="name" >
<input type="checkbox" value="点击2" v-model="name" >
{{name}}
var vm = new Vue({
    el:"#app",
    data:{
       name:[],
    }
})

6.2 radio #

<input type="radio" value="first" v-model="radio">
<input type="radio" value="second" v-model="radio">
{{radio}}

6.3 select #

单选时类型为字符串,多选时类型为数组

<select v-model="selected" multiple >
    <option value="4" selected>A</option>
    <option value="5">b</option>
    <option value="6">c</option>
</select>
{{selected}}

动态绑定数据

<select v-model="name">
  <!--绑定value 到 Vue 实例的一个动态属性-->
  <option v-for="a in ary" :value="a.value">{{a.name}}</option>
</select>

6.4 表单元素参数特性 #

6.4.1 lazy #

将input改变为change

<input type="text" v-model="data" lazy>
{{data}}

6.4.2 debounce #

延时数据改变时间

<input type="text" v-model="data" debounce="3000">
{{data}}

~~~

未经允许不得转载:WEB前端开发 » VueJs中事件修饰符/阻止冒泡/默认行为/自身触发/自定义修饰符/过滤器

赞 (0)