随笔分类 - Vue3/Vue2框架生态链
摘要：上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。” 今天我们将着重介绍slot和父子组件之间的访问和通信。slot是一
阅读全文
摘要：组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。 那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。 一、组件的创建和注册基本步骤 Vue
阅读全文
摘要：每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。 首先贴一张Vue文档给出的生命周期图示，并添加了一些注释： Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表 （除了beforeCreate和created钩子之外，其他钩子均在服务器端渲染期间不
阅读全文
摘要：首先，参考之前一篇vue生命周期的总结：Vue生命周期总结 接下来我们来分析下官方文档经典流程图，每个阶段到底发生了什么事情。 1、在beforeCreate和created钩子函数之间的生命周期 在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属
阅读全文
摘要：问题背景 页面刷新后报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME t
阅读全文
摘要：一、问题场景： 想把本地的项目访问localhost:3000访问修改成某个域名，比如a.baidu.com来访问。通过配置host：127.0.0.1 a.baidu.com，但是访问的时候报错：显示invalid host header 原因：这句话的意思是：无效的Host请求头； 因为vue
阅读全文
摘要：MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定
阅读全文
摘要：一、项目场景： 技术：Vue3 + TS + CompositionAPI 系统：无关 场景：在一个vue页面引用一个vue组件 二、问题描述： 1、问题现象：重复引用 首先出现警告如下： [Vue warn]: Unhandled error during execution of schedul
阅读全文
摘要：一、问题背景 在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。 1、问题描述及触发条件： 当 el-form 中 有且只存在一个input时，在这个input中回车会触发默认提交事件，可能会改
阅读全文
摘要：一、$route.matched的作用 官方解释： 与给定路由地址匹配的标准化的路由记录数组。 个人觉得就是当有多级路由的时候，记录每一级路由，并生成数组。如： const router = new VueRouter({ routes: [ // 下面的对象就是路由记录 { path: '/foo
阅读全文
摘要：官方关于<router-link> 的 v-slot的相关介绍，并给出了一个例子 <router-view v-slot="{ Component, route }"> <transition :name="route.meta.transition || 'fade'" mode="out-in"
阅读全文
摘要：1、files.associations 配置文件关联： 任何 vue 后缀的文件会被认为是 html 文件 ，(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示等。 任何 wxss 后缀的文件被认为是 css 文件 ，然后 vscode 会用 c
阅读全文
摘要：一、2 个配套插件 Auto Close Tag：用于自动补全HTML结束标签 Auto Rename Tag：自动完成另一侧标签的同步修改（使用该插件，可以在重命名一个 HTML 标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、
阅读全文
摘要：一、利用iframe实现pdf预览 1、实现过程：将pdf路径设置给iframe的src属性 <iframe :src="pdfUrl" frameBorder="0"></iframe> 2、遇到的问题 电脑上测试正常，但是安卓端会出现空白页和直接跳转下载的现象，解决思路：想着用pdf.js，然后
阅读全文
摘要：一、axios的 onDownloadProgress 和 onUploadProgress 配置进度条 axios({ url: 'https://www.***.com/***.png', method: 'get', onDownloadProgress (progress) { consol
阅读全文
摘要：一、Vue packages version mismatch: 版本始终不对的解决方案 1、npm run dev 的时候报错： Vue packages version mismatch: - vue@2.6.1 - vue-template-compiler@2.7.8 This may ca
阅读全文
摘要：1、问题背景 路由加了全局守卫之后，报错： 2、原因：内部判断，导致路由产生了死循环 错误代码 router.beforeEach((to, from, next) => { if (store.getters.token) { if (to.path '/login') { next('/') }
阅读全文
