阳阳的博客

轮播图在我们平时开发的时候，需要用到的地方有很多，现在大部分都是引入第三库来实现的，以至于我们都忘了怎么能自己封装一个组件，今天我们自己来封装一个轮播图。通过这种方式，父组件可以将数据传递给Carousel组件，Carousel组件可以使用这些属性来展示轮播图。你可以在父组件中动态更新。这只是一个简单的轮播图封装，具体各位小伙伴在项目中遇到需要这种的话，小伙伴可以自行提取，并且添加一些样式即可！数组或其他prop，Carousel组件会响应式地刷新渲染。

vuex的基本使用

目录生命周期的变化多根节点异步组件Teleport组合式API响应式原理虚拟DOM事件缓存Diff 优化打包优化自定义渲染APITypeScript 支持生命周期的变化整体来看，变化不大，只是名字大部分需要 +on，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，如下所示。//vue3<scriptsetup>import{onMounted}from...

背景在浏览列表类型的数据的时候，如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题，那么此时分页组件就起到了关键作用，它可以只请求一部分数据，也不会占用太多的页面空间，想看别的数据可以通过页码的改变来发起请求，刷新页面数据。为什么要封装分页组件分页功能使用场景较多，故考虑封装为全局组件 自己封装成本较低，需要什么功能就添加什么功能 相对使用现成组件库，自己封装代码体积可控如何封装分页组件第一步组件所需参数：total 属性 ：用来传递数据总条数pagesize 属性

按需自动引入elementUI首先需要插件unplugin-vue-components 和 unplugin-auto-importnpm i unplugin-vue-components unplugin-auto-import根据elementUI plus 官网说明快速开始.需要在vite.config.js中加入如下代码复制代码// vite.config.tsimport AutoImport from 'unplugin-auto-import/vite.

1.父传子：在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:["属性名"] props:{属性名:数据类型}2.子传父：在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数3.兄弟组件传值：通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”，传递的参数信息)发送.

vue图片裁剪插件：vue-img-cuttervue-img-cutter 是一个简单易用的 vue 图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求特点：兼容IE9+，MSEdge，Chrome，Firefox 两种展现形式，行内或弹窗 可旋转、缩放图片 任意比例、大小裁剪 固定比例、大小裁剪 支持远程图片裁剪、跨域设置使用：安装 vue-img-cutternpm inst

对vuex的简单理解：每一个 Vuex 应用的核心就是 store，里面又包括:（1）state（数据）：用来存放数据源，就是公共状态;（2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据；（3）actions（事件）：要执行的操作，可以进行同步或者异步事件（4）mutations（执行）：操作结束之后，actions通过commit更新state数据源（5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，所以把每个模块的局部状态分装使每一个模块

创建vue项目时文件夹内容要为空不然无法创建cmd切换盘符：E：回车。切换淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org更新npm版本：npm install -g npm1、安装vue2脚手架（1）、在cmd命令行中输入脚手架安装命令；（2）、全局安装vue脚手架：npm install -g vue-cli 或者指定版本：npm i vue-cli@2.9.6 -g；（3）、安装以后，输入：vu

计算属性和函数通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据那么计算属性和函数有什么区别呢?1、函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值2、计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值计算属性特点只要返回的结果没有发生变化, 那么计算属性就只会被执行一次计算属性应用场景计算属性:比较适合用于计算不会频繁发生变化的的数据代码片段：<div id="app"> <!--<

不要光看，你不妨试试，千里之行，始于足下。

一步一步带你配置环境变量。

Vue最详细的生命周期讲解，以及案例演示

使用vue实现拖拽效果

我们在平常写项目的时候，发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作如果是页面同时只发送一个请求，那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到但是，当一个页面同时要发送多个请求的时候，这么做显然就不行了因为最先完成的请求会把所有请求的 loading 都给关闭举个例子，第一个请求的响应时间为 3s ，第二个请求的响应时间为 1s ，两个同时请求的时候，loading 会开始但是当 1s 后第二个请求完成后，会直接关闭

vue的组件传值分为三种方式：父传子、子传父、非父子组件传值(兄弟传值)引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。官网地址：https://cn.vuejs.org/v2/guide/index.html父传子:父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用v-bind 将子组件中预留的变量名绑定为data里面的数据.