vue知识点总结
文章目录
前言
本篇文章主要总结了，自己平时，遇到的细小的知识点，也是对知识的一种巩固记忆学习。
注：本篇文章知识点没有顺序，随学随记，持续更新。。。
一、mixin混入
1、混入就是把你觉得在很多地方需要复用的方法提取出来
2、混入规则：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行合并。
① 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
② 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
③ 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
4、这里我要说的就是，模块化注册方式：（以插件的方式）
export default {
install(Vue) {
Vue.mixin({
created() {
console.log('全局混入的钩子函数');
}
})
}
}
在main.js中通过Vue.use()使用插件
二、vue功能插件v-clipboard
1、使用步骤
1.安装依赖
npm install --save v-clipboard
2.使用
<button
v-clipboard="要复制的值"
v-clipboard:success="复制成功的回调"
v-clipboard:error="复制失败的回调">
一键复制
</button>
三、vue中的[ob:Le]
1、如果你发现你拿到的数据中含有这个不要惊慌。
2、这是vue内部属性
3、如果想要去掉可以使用
JSON.parse(JSON.stringify())
之后使用的数组或者数组中的对象也不会再带有这个属性了
百度所有的答案：[ob:Observer]都说是vue设置的监控，如果删除将失去了vue的意义。
四、解决常常遇到的报错undefined
相信没有一个前端程序员没见过这个错误，这个错误再熟悉不过了
TypeError:Cannot read property 'xxxx' of undefined
但这个错误到底是什么导致的呢，其实不难看出，就是没定义吗。有没有发现这个错误通常都是我们在使用xxx1.xxx2或者xxx1.xxx2.xxx3等等这样点方法的时候报的错，这我们又会想到使用对象获取元素的时候也会是这样，如果对象中没有这个属性的话就会返回undefined。
所以就是说前面这个对象是没有后面这个属性或者方法的，才会出现undefined，那就要找到你前面的对象为什么没有了。
我真实开发中遇到的问题：
如果我直接这样写的话就会遇到上面的问题，而导致上面问题出现的原因就是，在数据还没有加载的时候就执行了substring的方法当然会报错。
<div>
{
{
idCardData.certDate.substring(0,1)}}-{
{
idCardData.expDate.substring(0,2)}}
</div>
所以改进的办法就是,加入v-if判断，当有值的时候就不会有问题了
<div v-if="idCardData.certDate && idCardData.expDate">
{
{
idCardData.certDate.substring(0,1)}}-{
{
idCardData.expDate.substring(0,2)}}
</div>
五、。。。持续跟新
总结
如有问题，评论互相讨论