详解Vue2基本语法第三弹

事件处理

事件的基本使用

1、使用v-on:xxx或@xxx绑定事件,其中xxx是事件名

2、事件的回调需要配置在methods对象中，最终会在vm上

3、methods中配置的函数不要使用箭头函数，否则this就不是vm了

4、methods中配置的函数，都是被vue管理的函数，this的指向是vm或组件实例对象

5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参

事件修饰符

1、prevent:阻止默认事件

2、stop：阻止事件冒泡事件

3、once：事件只触发一次

4、capture：使用事件的捕获模式

5、self：只有event.target是当前操作的元素时才触发事件

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

vue中常用的按键别名

• 回车=>center

• 删除=>delete(捕获“删除”和“退格”键)

• 退出=>esc

• 空格=>space

• 换行=>tab(特殊，必须配合keydown使用)

• 上=>up

• 下=>down

• 左=>left

• 右=>right

vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意组件中使用camelCased（驼峰式）命名，在html中应改为kebab-case（短横线）命名方式。

系统修饰键（用法特殊）：ctrl、alt、shift、meta

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键事件才触发

（2）配合keydown使用：正常触发事件，也可以使用keycode去指定具体的按键（不推荐）

vue.config.keyCodes.自定义键名 = 键码，可以定制按键别名

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

1、注册过滤器

Vue.filter(name,callback)或new Vue{filters:{}}

2、使用过滤器

{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注

1、过滤器也可以接收额外参数，多个过滤器也可以串联

2、并没有改变原本的数据，是产生新的数据

自定义指令

定义语法

（1）局部指令

new Vue({
    directives:{
        指令名：配置对象       
    }
})

或

new Vue({
    directives:{
        指令名：回调函数     
    }
})

（2）全局指令vue

Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)

配置对象中常用的三个回调函数

（1）bind：指令与元素成功绑定时调用

（2）inserted：指令所在元素被插入页面时调用

（3）update：指令所在模板结构被重新解析时调用

备注

1、指令定义时不加v-，但使用时要加v-

2、指令名如果是多个单词，要使用kebab-case命名方式，不要使用camelCase命名

生命周期

• 又名：生命周期回调函数，生命周期函数，生命周期构子
• 是什么：Vue在关键时候帮我们调用的一些特殊名称的函数
• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
• 生命周期函数中的this指向的是vm或组件实例对象

常用的生命周期构子：

• mounted：发送Ajax请求，启动定时器，绑定自定义事件，订阅消息等初始工作
• beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等收尾工作

关于销毁Vue实例

• 销毁后借助Vue开发者工具看不到任何消息
• 销毁后自定义事件会失效，但原生DOM事件依然有效
• 一般不会在beforeDestroy操作数据，因为即使操作了数据也不会再触发更新流程了

vue生命周期分析

（1）初始化显示

• beforeCreate()

• created()

• beforeMount()

• mounted()

（2）更新状态

• beforeUpdate()

• updated()

（3）销毁vue实例:vm.$destroy()

• beforeDestroy()

• destroyed()