Vue之表单操作，自定义指令，计算属性，侦听器，过滤器

1. Vue常用特性

1.1 表单操作

1. 基于Vue的表单操作

⚫ Input 单行文本
⚫ textarea 多行文本
⚫ select 下拉多选
⚫ radio 单选框
⚫ checkbox 多选框

2. 表单域修饰符

⚫ number：转化为数值
⚫ trim：去掉开始和结尾的空格
⚫ lazy : 将input事件切换为change事件

<input v-model.number="age" type="number">

1.2自定义指令

1. 为何需要自定义指令？

内置指令不满足需求

2. 自定义指令的语法规则（获取元素焦点）

Vue.directive('focus' {
inserted: function(el) {
// 获取元素的焦点
el.focus();
}
}) 

3. 自定义指令用法

<input type="text" v-focus>

3. 带参数的自定义指令（改变元素背景色）

Vue.directive(‘color', {
inserted: function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
})

4. 指令的用法

<input type="text" v-color='{color:"orange"}'>

5. 局部指令

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
} }
}

1.3 计算属性

1. 为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

2. 计算属性的用法

computed: {
reversedMessage: function () {
return this.msg.split('').reverse().join('')
	} 
}

3. 计算属性与方法的区别

⚫ 计算属性是基于它们的依赖进行缓存的
⚫ 方法不存在缓存

1.4 侦听器

1. 侦听器的应用场景

数据变化时执行异步或开销较大的操作

2. 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：

3. 使用 watch 检测用户名是否可用

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

watch: {
// 监听 username 值的变化
async username(newVal) {
if (newVal === '') return
// 使用 axios 发起请求，判断用户名是否可用
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
} }

4. immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使
用 immediate 选项。示例代码如下：

watch: {
username: {
// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
handler: async function (newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
// 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
immediate: true
} }

5. deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选 项，代码示例如下：

1.5 过滤器

1. 过滤器的作用是什么？

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

2. 自定义过滤器

Vue.filter(‘过滤器名称’, function(value){
// 过滤器业务逻辑
})

3. 过滤器的使用

<div>{{msg | upper}}</div> 
<div>{{msg | upper | lower}}</div> 
<div v-bind:id=“id | formatId"></div> 

4. 局部过滤器

filters:{
capitalize: function(){}
}

5. 带参数的过滤器

Vue.filter(‘format’, function(value, arg1){
// value就是过滤器传递过来的参数
})

6. 过滤器的使用

<div>{{date | format(‘yyyy-MM-dd')}}</div>

1.6 生命周期

1. 主要阶段

⚫ 挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted
⚫ 更新（元素或组件的变更操作）
① beforeUpdate
② updated
⚫ 销毁（销毁相关属性）
① beforeDestroy
② destroyed