![](https://img-blog.csdnimg.cn/0264c2bdd563406b9edee7ceee5c42ed.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue 笔记
文章平均质量分 57
vue 学习笔记
凉爽爽爽爽爽爽爽爽爽
这个作者很懒,什么都没留下…
展开
-
渲染器 render
最近在看《vue.js 设计与实现》,看到了虚拟 DOM 这里,做了个笔记文章目录1、VNode虚拟DOM节点2、render工作原理3、代码实现1、VNode虚拟DOM节点虚拟DOM节点如下:const vnode = { tag: 'h2', props: { class: 'active', data: 'text', onClick: () => alert('Hello Render!') }, children: 'Click Me!.原创 2022-03-17 19:26:53 · 1230 阅读 · 0 评论 -
vue3 源码的 diff 算法
我看的是 vue3.2.31 版本的源码,diff 算法具体的位置在 packages/runtime-core/src/render.ts 文件中,源码中一些部分我已经做了注释文章目录1、Vue源码对于key的判断① 没有key的操作(源码)Ⅰ. 没有key的过程如下② 有key执行操作(源码)Ⅰ. 有key的diff算法如下1、Vue源码对于key的判断下面是patchChildren方法(进行新旧VNode节点比对)的源码,其位置在vue3源码(我看的源码是vue3.2.31版本)的:p.原创 2022-03-17 16:46:19 · 1648 阅读 · 0 评论 -
vue2 与 vue3 虚拟列表实现
文章目录1、概述2、计时3、JavaScript线程4、分片加载5、vue-virtual-scroll-list6、自己实现vue虚拟列表① vue2Ⅰ. 项目搭建Ⅱ. 虚拟列表制作② vue3Ⅰ. 项目搭建Ⅱ. 虚拟列表制作1、概述一般长列表用在后端传递大量数据,要求前端进行展示的情况先来看看原生的一个加载大量数据的一个情况:<div id="container"></div><script> // 演示大量 DOM 加载时的缓慢问题,也就是“原创 2022-03-16 16:50:27 · 5463 阅读 · 4 评论 -
pinia 的使用(四)—— getters
文章目录1、Getters① getter 声明与使用② 将参数传递给 getters (回调函数)③ getter中的this④ 访问其它getters⑤ 访问其它容器的actions 或getter1、Getters① getter 声明与使用Getter 完全等同于 Store 状态的计算属性;Getters 函数的第一个参数是 state 对象;在src/store/index.ts文件中去写一个getters,来体验一下:import { defineStore } from原创 2022-03-15 19:03:55 · 13622 阅读 · 0 评论 -
pinia 的使用(三)—— actions
文章目录1、状态操作 actions① 状态更新② 重置状态 $reset③ 跨容器调用④ actions 的操作⑤ 注意点1、状态操作 actionsactions 可以通过完全输入(和自动完成 ✨)支持访问整个容器实例。actions 是异步的,可以在其中等待任何 API 调用甚至其他 actions 。① 状态更新首先在src/store/index.ts文件中的pinia实例中,创建一个actions方法:import { defineStore } from 'pinia' //原创 2022-03-15 19:01:33 · 13719 阅读 · 1 评论 -
pinia 的使用(二)—— state
文章目录1、Pinia 基础应用① 项目搭建② 安装③ 初始化配置2、定义和使用 Store① 定义Store② 使用 Store③ 解构 state 数据1、Pinia 基础应用① 项目搭建使用vite初始化项目:npm create vite@latest创建项目名:vue3-ts-pinia选择项目框架:vue选择项目语言:vue-ts进入到创建的项目目录下,安装依赖:npm install启动项目:npm run dev② 安装使用yarn安装:yarn add pini原创 2022-03-15 18:02:46 · 2881 阅读 · 0 评论 -
pinia 的使用(一)—— 基本介绍
官网地址:https://pinia.vuejs.org/文章目录1、Pinia 介绍① 核心特性② 核心概念Ⅰ. stateⅡ. gettersⅢ. actionsⅣ. **提示:Pinia 中没有 mutations。**③ 基本示例④ Pinia vs Vuex⑤ 关于名字⑥ 关于作者2、Pinia 基础应用① 项目搭建② 安装③ 初始化配置1、Pinia 介绍一个全新的用于 Vue 的状态管理库。下一个版本的 Vuex,也就是 Vuex 5.0。Pinia最初是一个实验,目的是在.原创 2022-03-15 17:56:35 · 3448 阅读 · 0 评论 -
vue2 与 vue3 之组件间数据双向绑定的区别
下面的文章中我对 vue2 和 vue3 中组件间数据双向绑定显示做了简单的说明,如果感觉看理论太枯燥的话,可以直接看代码实践,没有什么是比动手实践更有奇效的了。文章目录1、vue2 中的组件间数据双向绑定① 对 vue2 组件间数据双向绑定进行简单的说明② v-bind.sync③ 上代码实践④ 效果图2、vue3 中的组件间数据双向绑定① 对 vue3 中的变动做一下简单的说明② 上代码实践③ 效果图3、总结1、vue2 中的组件间数据双向绑定① 对 vue2 组件间数据双向绑定进行简单的说.原创 2021-11-17 14:52:09 · 660 阅读 · 1 评论 -
vue下载后台传来的文件地址
npm install axios在main.js中引入import axios from "axios";import VueAxios from "vue-axios";Vue.prototype.$axios = axios;Vue.use(VueAxios, axios);import axios from 'axios'; download(){ var self = this axios({ method: 'get',原创 2021-06-19 20:31:01 · 780 阅读 · 0 评论 -
在vue中使用websocket
在vue中使用websocket安装第一个包npm install sockjs-client@1.4.0安装第二个包npm install stompjs@2.3.3在页面中引入import SockJS from "sockjs-client";import Stomp from "stompjs";import { baseURL } from "../config/index.js"; // 在config下的index.js中的接口地址在页面中使用websoc原创 2021-06-24 19:24:48 · 723 阅读 · 3 评论 -
关于Vue中在data里面调用method方法
关于Vue中data里面调用method方法功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 今天我用到了Element的一个组件(如下):&n原创 2021-06-05 13:44:47 · 9213 阅读 · 0 评论 -
关于Vue组件踩的坑
关于Vue组件踩的坑1、在声明组件时,如果在外部声明的子组件是用 var 声明的,就不用考虑书写先后问题,但是用 const 或者 let 进行声明的话,就要考虑书写顺序 const child = { template: '#child', components: { grandChild, } }; const grandChild = { template: '#grandChild', }原创 2021-07-17 14:12:27 · 163 阅读 · 0 评论 -
Vuex 报错之 [vuex] unknown mutation type: handlePower
这里我才坑半天!!!如果你有设置一个类型常量,如下那么你在 index.js 里面导入这个这个类型常量的时候,注意我红色框框里面,不能用 {} 将 mutations、actions、getters 包裹起来原创 2021-08-06 10:19:06 · 357 阅读 · 0 评论 -
Vue接口调用
Vue接口调用 api文件夹下的api.js里面的内容:import axios from "./index";/** * 设备连接 * @param userId * @param deviceIp */// 登录export const getLogin = (userName, password) => { return axios.request({ url: "/admin/l原创 2021-06-06 09:34:54 · 797 阅读 · 0 评论 -
在 vue3 使用 Ant Design
先安装:npm i --save ant-design-vue@next然后在 main.js 文件中引入之后去官网找自己想要的组件:Ant Design Vue下面知识我的一个小例子,用法和 element-ui 是一样的,找到自己想要的组件,直接放入页面中就可以...原创 2021-08-03 15:17:20 · 503 阅读 · 0 评论 -
Vue 脚手架
1. Vue 脚手架的基本用法 Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/打开选择命令提示符,安装 3.x 版本的 Vue 脚手架:// 安装最新版本的脚手架npm install -g @vue/cli// 最新的脚手架是4.x的,有很多之前的组件不适用,所以自定义安装脚手架版本npm install -g @vue/cli@版本号npm install -g原创 2021-06-15 13:38:54 · 1492 阅读 · 0 评论 -
Element-UI 的基本使用
Element-UI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官网地址为:http://element-cn.eleme.io/#/zh-CN1. 基于命令行方式手动安装① 安装依赖包 npm i element-ui –S② 在main.js里面导入 Element-UI 相关资源// 导入组件库import ElementUI from 'element-ui';// 导入组件相关样式import 'element-ui/lib/theme-chalk转载 2021-06-15 15:57:01 · 97 阅读 · 0 评论 -
vue 项目中 base.css + normalize.css
这两个 css 样式文件,放在同一个文件夹下base.css@import "./normalize.css";/*:root -> 获取根元素html*/:root { --color-text: #666; --color-high-text: #ff5777; --color-tint: #ff8198; --color-background: #fff; --font-size: 14px; --line-height: 1.5;}*,*::befor原创 2021-08-03 12:14:36 · 700 阅读 · 0 评论 -
vue 程序执行的过程
首先是 vue 在 runtime-compiler 模式下进行执行的过程通过 runtime-compiler 创建的项目,会经过上述图片中的 vue 程序运行过程,但是用 runtime-only 创建的项目,会直接从 render 函数 将 挂载的 App 变成 virtual dom(虚拟dom),性能更加高效!而且 vue 的代码量更少!因此 runtime-only 小的 6KB 就是少了执行前两个步骤的代码。让我们看下一下这两种不同的方法创建的 vue 项目中 main.js 文件的区别吧原创 2021-08-10 13:33:55 · 1979 阅读 · 2 评论 -
vue 的响应式原理浅谈
对学习到的 vue 的响应式原理做了一些简单的总结,还需继续学习vue 的响应式原理就是数据劫持 + 发布者订阅者模式创建一个 vue 的时候,最开始是从 new Vue 开始执行,在 new Vue 里面有 el 挂载实例对象和 data 响应式数据。当创建好 vue 实例之后,他会在整个响应式流程里面,走不同的流程。如下图,vue 实例中的 el 会走下面的流程,data 会走上面的流程,下面是 vue2 的一个响应式原理的流程, vue3 的响应式主要是基于 ES6 的新特性 Proxy 实现原创 2021-08-10 13:14:19 · 80 阅读 · 0 评论 -
Vue如何使用ECharts
Vue如何使用ECharts安装echarts依赖 npm install echarts --save新建两个vue文件第一个文件:父文件(用来展示ECharts图)原创 2021-06-06 09:12:47 · 2492 阅读 · 0 评论 -
vue 使用 keep-alive
vue3 使用 keep-alive踩坑踩了半天!!!我这里的小 DEMO 是,首先打开主页是新闻的界面然后我点击跳转到消息界面之后我想要做的效果,是跳转到其他的页面之后,我再次回到首页,那么他的页面还是保持在消息的界面这里注意,是要给哪个页面进行缓存就给哪个页面添加 keepAlive:true!!!第二步!!!,在 App.vue 界面中添加 keep-alive,注意下面这种写法是 vue3 的新写法,之前都是 keep-alive将 router-view 包裹住的!!!第三步!!原创 2021-07-28 18:28:21 · 15943 阅读 · 4 评论 -
vue-cli4 手动给文件起别名
第一种:找到 vue.config.js 在该文件中配置,没有这个文件的话,就在根目录下创建一个 vue.config.js 文件,然后配置如下需要引入 path 模块,没有引入的话安装一下: npm install path --save以后找文件就可以这么找:当然配置完成后要重新运行下项目第二种:找到 node_module 文件夹,找到下面的 @vue 文件夹,找到下面的 cli-service 文件夹,找到下面的 lib 文件夹,找到下面的 config 文件夹,找到下面的 base.js原创 2021-07-30 11:07:27 · 253 阅读 · 0 评论 -
vue3 用 v-slot 做一个导航
效果图如下首先看我的目录结构(用的是 vue3)路由的配置:import { createRouter, createWebHistory } from "vue-router";const Home = () => import("@/views/Home/Home");const Category = () => import("@/views/Category/Category");const ShopCart = () => import("@/views/Sho原创 2021-07-30 09:22:17 · 681 阅读 · 0 评论 -
vue父组件给子组件传值
父组件showRadar: function() { let name = this.stuName; getRadarScore(name) .then((res) => { if (res.data.flag) { // 下面这块是传参的 this.$refs.msg.getMsg({ stuName: this.stuName, // 传给子原创 2021-06-19 19:03:17 · 50 阅读 · 0 评论