VUE事件绑定和过滤器

v-on指令 简写@ 无需获取DOM 直接在模板中绑定 v-on:事件名 绑定事件

• 事件函数写在methods中 methods中是一个函数fn
  • 绑定时 若fn不带小括号 那么函数默认接收一个事件对象 作为参数
  • 绑定时 带有小括号 默认不接受事件对象
  • 既要事件对象 又要传递参数 需要在小括号中写哟个 $event用来标识事件对象 后面吗才是真正的参数
• 事件修饰符 v-on:事件名 修饰符

常见事件修饰符

• 事件修饰符
  • .prevent 阻止元素的默认行为
  • .stop 阻止事件冒泡
  • .capture 事件在捕获阶段触发
  • .once 事件只执行一次
  • .self 只有触发自身事件才会触发
• 键盘事件修饰符
  • .enter 回车
  • .esc 退出
  • .delete 退格
  • .space 空格
  • .tab tab键
  • .left 左
  • .right 右
  • .up 上
  • .down 下

过滤器 用于处理数据 但并不改变原来的数据的一种处理方式

全局过滤器 Vue.filter(过滤器名字，函数) 在任何地方都可以使用

Vue.filter('toDollar',val=>'$' + val)

局部过滤器 filters:{} 只能在当前组件中使用

let obj = {
    el:'app',
    filters:{
        toFixed(val,num = 2){
            return val.toFixed(num)
        },
        toRMB(val){
            return '￥' + val;
        }
    }
}
let vm = new Vue(obj);

过滤器的使用

{{1.222 | toFixed | toRMB}}
{{1.222 | toFixed(3)}}

| 称为管道符 管道符的值会把前面的值传给过滤器函数的第一个参数 可以连续使用 后面过滤器的第一个参数是前面过滤器处理后的结果