推荐阅读： 怎样使用 Vue 3 的＜script setup＞语法糖功能_南北极之间的博客-CSDN博客 在 Vue 3 中，它引入了一个 功能。它是编译时语法糖，用于在单个文件组件中使用组合 API。此语法允许开发人员定义组件，而无需从 JavaScript 代码块中导出任何内容。它向模板公开其所有顶级绑定。长话短说，这种语法使单文件组件更简单，让你觉得你正在使用原生JavaScript代码。…
vue2迁移vue3之setup选项：快速入门 单文件组件*.vue中,script标签的内容 <script> import childrenCom from './childrenCom.vue' export default { name: "componentName", components: { childrenCom, }, props: { titleProps: { …
引入组件 const modules = import.meta.glob('./components-new/*.vue'); const components: any = ref({}); Object.entries(modules).forEach(([path, asyncCom]) => { const name = path.replace(/\.\/components-n…
先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。 1、vue的生命周期图 在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue…
form-create和UI框架配合使用，目前支持3个常用的UI：Ant-design-vue、ElementUI、iview、 以ant-design-vue为例 form-create官网地址 form-create表单生成器说明文档 一、ant-design-vue 和form-create的安装 cnpm install ant-design-vue --save cnpm i @form…
vue-router 跳转页面时，主路由还显示，解决方法 主要问题是你把路由引入成了公共底部 { path:'/home', name:'home', component:home }, 将其改成 { path:'/home', name:'home', component:home, meta:{ index:0, showFooter:true } } 然后在app.vue里加上 v-show…
文章目录 1-1 vue-code-diff 业务需求 ： 思考： 对比两个json字符串，维护增删改的三个数组 遍历，进行三四五次if判断进入不同数组，渲染页面 不对呀，数据展示，怎么根据json对应键展示字段呢？？？ mt指示：做成git的json做成diff效果即可? 1-1 vue-code-diff npm install vue-code-diff -S <template>…
1.基本使用 1.1安装 利用 npm 安装 npm install axios --save 1.2在main.js中引入 1.3在组件中使用 created: function () { this.$http.get('./goods/goods.json').then((res) => { this.goods = res.data; }) }, 2.axios请求方法 get：多用来…
效果演示： 一、组件： 组件内部实现支持多选、单选能力；多选情况支持全选、反选、清空。 思路： 1、数据： selectedArr 存储当前选中的数据。 单选：如果selectedArr[0] 等于当前选择数据，清空selectedArr ，否则赋值给 selectedArr[0] 。数组长度为0或1 多选：当前选择数据不在selectedArr 中，则push，否则splice。 2、样式：动态…
转载：http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度条库是前端中常见的库之一，bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。轩枫阁用过Nprogress，用于页面刚打开时的页…