2021-10-25 vue常用特性

vue表单操作

点击submit按钮的时候，把表单中填充的信息，通过网络发送给服务器，服务器对信息进行处理然后把内容返回给对方

1.常用的表单控件

input、radio、checkbox、select、textarea

通过v-model进行双向数据绑定

input可以绑定多种数据类型，默认都是key=“value”,这个key加：
但是radio、checkbox的不同选项都需要绑定一个value来区分一下，注意单选radio的值是其中一个value，复选checkbox的值是一个数组
下拉列表select可以单选，也可以多选（加一个属性multiple），单选的值是其中一个value,多选的值是一个数组,要想获取具体的值可以加一个.toString()方法

一个属性的值如果是true，可以省略不写
表单提交：用js的逻辑控制提交，而不是用默认的表单提交，阻止事件的默认行为

2.表单域修饰符

input当输入内容的时候触发，change当失去焦点的时候触发（触发的时机更晚一些）

自定义指令

vue内置api directive，内置钩子函数inserted。先定义（不加v-），再使用(加v-)
定义：指令名，对象
参数el是固定的，表示当前元素

定义时参数binding是固定的，能拿到当前对象下的属性value；使用时用=“ ”进行参数传递

局部指令只在本组件中有效

计算属性

使用的时候必须和定义计算属性中的函数名字中的一致

定义的时候必须要return出去，他实际操作的是data中的数据，用this. 访问
使用的时候直接用函数名，不必要加（）

计算属性基于依赖的数据，依赖的数据变了才会重新计算，不变的话就只使用第一次缓存的计算结果，当处理逻辑比较复杂的时候减小计算开销
方法每次调用都会重新执行这个方法，不存在缓存

过滤器

vue.filter( , )用来格式化数据或者日期

定义
第一个参数是过滤器的名字
第二个参数是个函数要return出去，return后面用原生的js来写，是对字符串的一些操作，value是要处理的数据

.charAt(0)是拿到第一个字符，
.toUpperCase()是转成大写字母，
.slice(1)是从第二个字符到最后做切片

使用时
在要操作的数据后面，加一条|，后面写上过滤器的名字，支持级联操作，对上一次的过滤结果进行过滤操作
场景：

1.插值表达式
2.属性绑定：在绑定属性的时候对绑定的属性值进行过滤

带参数的过滤器

使用时通过括号传递参数
接收的时候从第二个参数进行接收

案例

侦听器

watch属性，监听data属性中指定数据的变化，一旦数据有变化就触发侦听器绑定的同名函数方法

watch属性中定义的所有函数要和上面data中的属性名一致
异步：ajax、定时任务
开销较大：计算逻辑复杂、耗时

对比computed属性

案例

setTimeout(函数，时延)这个方法中的this是window,所以要在setTimeout方法外面缓存一下this,即var that=this
watch属性中的同名data数据属性侦听器实际被触发的时候，语句的执行顺序是顺序执行，但是返回执行结果的时候不会顺序返回。
由于this.checkname（）是个异步任务，不会立马出来运行结果，因此先返回this.tip=“正在验证…”，再返回异步任务的结果
this.checkname（）异步任务实际返回结果的过程是先等待2s,再去执行setTimeout()里第一个参数（这个参数是个函数）的语句

v-model.lazy表单域修饰符来修改事件，使其变为失去焦点的时候触发

生命周期

vue实例对象的生命周期

• 挂载：完成初始化，初始化是针对属性的。例如，watch属性、methods属性
• 更新：dom元素或者组件
• 销毁：释放一些资源

最关注mounted：这个函数一旦被触发，初始化就完成了，页面的模板内容就已经存在了 存在以后我们就可以向里面填充数据
应用场景：调用后台接口获取数据，把数据填充到模板里面

综合案例

变异方法：vue把原始的数组方法处理成了响应式的方法，都会影响原始的数组数据
替换数组：产生一个新数组

通过vue实例调用的方法，首字母一般是$美元符号
既可以处理data中数组的索引，又可以处理data中对象的属性

添加功能分两步实现：

把表单的数据添加到一个对象中
再把对象push到一个数组中

修改功能分3步实现：

传递参数

step1：点击修改按钮时将条目信息填充到表单

step2：修改后重新提交表单

修改操作的时候，添加一行禁止修改id的操作

step3：重用添加和修改的方法

普通方法的this是window 当前的id是this中的id,这里的this是window 解决this问题，把普通函数改成箭头函数
箭头函数的this：是定义箭头函数的的父级作用域中的this，父级作用域是handle中的作用域，handle中的this指的是vue实例本身，通过vue实例就可获取到当前表单中的id

根据当前的id更新数组中的数据，.some（）方法

删除功能实现

常用特性应用场景

some()方法作用是判断数组中有没有满足条件的数据，有一个就返回true

调用后台接口，拿到数据后，在做模板的渲染