Vue.js 事件处理和过滤器

事件处理

        上篇文章，介绍了Vue的几个常用指令。其中说到了v-bind指令，v-bind指令不仅可以单向绑定数据，而且还可以绑定方法。不仅如此，他还可以绑定监听事件。v-bind可以通过绑定click、submit等事件，为事件绑定提供处理事件的方法。先看一个示例：
        <button v-on:click="greet">Greet</button>
        这段代码为button按钮添加了一个点击事件，并且通过v-bind指令为点击事件绑定了一个事件处理的方法greet，方法定义在vue示例的methods属性中。methods是vue示例中的一个属性，在该属性中可以定义一些js方法。上边代码直接写了方法名，如果我们需要传入参数，只需在绑定时写成 ： 方法名（参数） 即可。这种写法
        完整代码示例（该代码是我从vue官网拷贝的一段代码）：

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

        一般事件处理时会用到事件修饰符。下边介绍一个常用的事件修饰符。

.stop事件修饰符

        .stop用于组织事件冒泡，有时候我们在为元素添加事件之后，元素的点击事件会向上影响到父级元素，这就是所谓的时间冒泡。.stop可以阻止这种时间冒泡。

    <!-- 使用  .stop  阻止冒泡 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div> 

.prevent事件修饰符

        .prevent可以组织元素的默认行为。我们在为a标签添加点击事件时，a标签默认会跳转href属性指向的地址，这就是a标签的默认行为这是我们为a标签绑定点击事件时无效的，而我们为它添加事件修饰符.prevent后就可以组织它的默认跳转行为，改为执行我们绑定的事件处理方法。

    <!-- 使用 .prevent 阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="linkClick">戳他</a> 

.capture事件修饰符

        .capture是用来修改冒泡顺序的，刚才的.stop是阻止冒泡事件，而这个事件修饰符可以改变冒泡事件的冒泡顺序，被.capture修饰的元素会被优先执行。如下代码，本来的冒泡顺序为：input—>div,加上修饰符之后变成div—>input

    <!-- 使用  .capture 实现捕获触发事件的机制 -->
    <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> 

.self事件修饰符

        .self修饰符很好理解，被.self修饰的事件，只有点击被修饰元素时事件才会触发，点击父级元素或者子级元素都无法触发事件。

    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> 

.once事件修饰符

        使用.once修饰的事件，只会触发一次。

    <!-- 使用 .once 只触发一次事件处理函数 -->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">戳他</a> 

过滤器

        Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在插值表达式和 v-bind 表达式中，不过v-bind在vue.js2.1.0之后才开始支持。过滤器需要被添加在 JavaScript 表达式的尾部。如下：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

定义方法

全局定义：

        可以再Vue实例创建之前就定义好过滤器如下，我自定义了一个日期过滤器用于日期格式化显示。

// 全局的过滤器， 进行时间的格式化
      Vue.filter('dateFormat', function (dateStr, pattern = "") {
         // 根据给定的时间字符串，得到特定的时间
         var dt = new Date(dateStr)
         //   yyyy-mm-dd
         var y = dt.getFullYear()
         var m = dt.getMonth() + 1
         var d = dt.getDate()
         // return y + '-' + m + '-' + d
         if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
         } else {
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
         }
      });

new Vue({
  // ...
})

组件定义：

        可以再组件中通过filters属性来定义自己的过滤器，filters属性和data属性平级，其中可以定义过滤方法。如下代码：capitalize是方法名，后边是对应的过滤方法，使用时直接通过方法名使用即可。

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}