1.表单域修饰符
number:转化为数值 用法:v-model.number
trime:去掉开始和结尾的空格
layZy:将input事件切换为change事件
2.自定义指令
1.为什么需要自定义指令？
内置指令不满足需求
Vue允许我们自定义指令
2.自定义指令的语法规则(获取元素焦点)
Vue.directive('focus',{
inserted:function(el){
//获取元素焦点 el表示指令所绑定的元素
el.focus();
}
})
3.自定义指令用法
<input type="text" v-focus>
4.v-bind:class 语法
一个对象，对象中的key表示要作用的css类名
对象中的value 要计算出布尔值
true,则作用该类名
false，不作用类名
5.input事件处理函数
v-model:实现原理
@input事件 和 v-bind共同实现的：
$event事件参数
v-model="value1"; 相当于以下两句代码:
@input="value1=$event";
:value="value1";
6.封装axios请求:
请求头:
request.interceptors.request.use(
config => {
// Do something before request is sent
if (store.getters.token) {
config.headers.Authorization = `Bearer ${getToken()}` // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
}
//注意:这里务必要返回config配置对象，否则请求就停在这里出不去了
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
响应头:request.interceptors.response.use(callback,errCallback);
callback中务必要返回config配置对象，否则就停在这里不出去了
7.template
<template> 只是一个包裹作用的容器，并不真正渲染
通常用于多节点的渲染
8.防抖:
防抖优化：将高频事件函数的调用限制为低频
防抖效果：高频事件触发一段时间后，才能调用对应的事件处理函数
1.延迟处理(setTimeout)
2.在固定时间内，只触发一次
clearTimeout(this.tick)
this.tick=setTimeout(()=>{
this.loadSearchSuggestions(value);
}，1000)
9.响应式数据:
什么是响应式数据？数据变化了，会驱动视图更新
问题:如果数据不初始化，直接修改，那么该数据不是响应式数据!
解决方案:
1.请初始化数据
2.直接给父级响应式数据赋值
3.通过$set 给响应式数据添加属性后，该属性自动具有响应式的特性
4.调用this.$forceUpdate() 强制更新方法
