![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 58
一个抱抱一首歌
加油鸭
展开
-
Vue2 和 Vue3 的渲染函数和函数式组件
之前习惯React的编程习惯,有时候感觉函数式编程真的好用 , 这章就讲讲Vue怎么实现用渲染函数怎么实现类似的组件渲染函数一般指的是和Vue3的h函数如果你喜欢或者习惯函数式编程, 那可以学习下怎么函数式编程。原创 2023-03-03 11:23:27 · 1083 阅读 · 0 评论 -
Vue3(2):Vue3使用socket.io
今天想使用eggjs和vue3搭建一个简单地聊天平台,发现普遍用的是socket.io(其实是eggjs的websocket在github第一个项目就是socket.io) ,而且socket.io和websocket并不相通socket.io和wesocket有点区别,区别大家可以点击下边连接了解下。原创 2022-11-13 22:28:05 · 2861 阅读 · 3 评论 -
Vue3(1):可读写Computed实现多选全选
Vue3的自定义computed的使用,完成多选原创 2022-10-26 14:11:35 · 518 阅读 · 0 评论 -
Rollup(3): Rollup-plugin-vue 编写我们第一个组件并发布使用
rollup的组件开发原创 2022-08-27 15:14:29 · 2277 阅读 · 0 评论 -
Vuex 以及 Pinia 中模块化以及命名空间的使用
Vuex 和 Pinia 中命名空间以及模块化开发原创 2022-07-03 15:10:23 · 1663 阅读 · 0 评论 -
antd InputNumber 几种正则类型
只能输入正整数 <a-input-number v-model="form.quantity" :initialValue="0" :max="100000" :disabled="inputVisible" :min="0" :parser="value => value.replace(/[^0-9]/g, '')" type="number" step="1">&.原创 2022-02-24 11:39:55 · 768 阅读 · 0 评论 -
Vue2 父子组件挂载顺序
父子组件挂载顺序 父: beforeCreate => 父: created => 父: beforeMount => 子: beforeCreate => 子: created => 子:beforeMount => 子:mounted => 父: mounted更新过程(父组件自己)父:beforeUpdate => 父: updated更新过程(影响子组件)父:beforeUpdate => 子: beforeUpdate =&g.原创 2021-12-15 10:50:24 · 1832 阅读 · 1 评论 -
Vue2中Computed简单讲解以及实现
Computed 简单讲解上一回说了Vue的第二种watch也就是$Watch 接下来讲讲第三种 wachter也就是 computed(计算属性) 计算属性的特点 调用后执行依赖的数据改变会重新计算具有缓存性调用后执行,调用后执行,我们可以想想我们定义data的时候,一样是调用后执行,所以我们联想到老朋友Object.defineProperty(target, key, sharedPropertyDefinition)而且依赖的数据发生改变,我们可以想象到我们可以在每个依赖的数原创 2021-12-08 11:32:21 · 6317 阅读 · 0 评论 -
Vue2 的 Watcher解析以及简单实现
Watcher上回说到,有一个Watcher会一直去相应数据的notify。今天说说Vue的第二个Watcher也就是$watch这个watcher的回调函数不是updateComponent,不会去执行render等相关函数,只会执行自身定义的函数那问题来了,如果是我们设计。我们可以怎么设计这个函数能让在数据变化的时候执行他呢我们想到的就是,如果我也把他丢到数据的Dep的subs中,那么数据相应是Dep中的sub.notify不就可以一起执行updateComponent和$wa原创 2021-12-06 16:59:58 · 1157 阅读 · 0 评论 -
Vue2 中 Observer 一些探究
Observer 简单讲解源码目录 src\core\observer\index.jsexport class Observer { value: any; dep: Dep; vmCount: number; constructor (value: any) { this.value = value // 创建了一个dep实例 // 负责对象变更通知:新增属性或者删除属性,数组7个操作 this.dep = new Dep() this.原创 2021-12-04 17:25:50 · 1639 阅读 · 0 评论 -
Vue2数据发生变化到页面变化基本流程(附简单实现)
Vue的数据改变原理先将数据进行Obj.definedProperty() 进行绑定 , 如果数据为数组或者对象进行绑定当页面开始渲染会定义updateComponent方法,这个方法主要就是为了调用render方法进入render的时候会执行页面使用的值,这时候会触发该数据的get属性开始进行绑定依赖,大概如图示之后通过patch方法将节点进行更新替换或者新增如果数据发生改变,会执行数据的set方法,这时候数据的Dep.notify会调用Dep.notify 回去调用绑定的Wat原创 2021-12-02 14:11:16 · 1814 阅读 · 0 评论 -
vue 中 patchNode和diff的简单讲解
Vue的patchNode函数这个方法在第二次渲染值的时候会调用 patchNode 继续 diff 比较function patchVnode( oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) { // 新老 VNode 相同,直接返回 if (oldVnode === vnode) { return; } if (isDef(vnode.elm) &原创 2021-11-28 20:54:38 · 766 阅读 · 0 评论 -
深度优先遍历和广度优先遍历
最近看手写浅拷贝和深拷贝一直刷到用深度优先遍历和广度优先遍历,想起以前大学也学过东西,老是容易忘,特此记录下写法深度优先遍历var arrResult: Array<string> = []var testArr: Array<any> = [{ name: 'a', children: [{ name: 'a1', children: [{ name: 'a11' }, { .原创 2021-10-15 10:24:07 · 242 阅读 · 0 评论 -
antd a-form-model 动态表单 自定义校验柯里化
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-09-15 16:24:30 · 2539 阅读 · 0 评论 -
antdv实现 tags-Input
Tags-Input实现要求使用input和tags能够输入回车后显示支持校验是否填写代码<template> <div> <template v-for="(tag,index) in tags"> <a-tag :style="TgOptions.tagStyle" :key="index" :closable="closable" @close="(原创 2021-08-30 09:43:00 · 1930 阅读 · 0 评论 -
手写一个Vuex
vuex和redux区别在于vuex 是通过改变响应式的数据改变state的值 state的改变将会直接影响使用他的compoents的改变redux 是通过dispatch进行发布订阅 让使用的组件进行修改vuex.jslet Vue;class Store { constructor(options){ this._mutations = options.mutations; this.__actions = options._actions;原创 2021-06-29 23:38:39 · 80 阅读 · 0 评论 -
手写一个Vue-Router
krouter.jslet Vue;// 实现一个插件 挂载$routerclass VueRouter { constructor(options){ this.$options = options; Vue.util.defineReactive(this,'current','/') window.addEventListener('hashchange',this.onHashChange.bind(this)) win原创 2021-06-28 22:53:26 · 97 阅读 · 2 评论 -
element-ui 输入框无法输入的问题
问题input框的校验规则需要存在该字段才能校验 比如回显编辑的时候需要后台传该字段才能进行校验,这时候需要我们手动添加该字段代码for (let i = 0; i < item.materialsPeApplyDetailsDTOS.length; i++) { //在原本的列表里添加该字段,防止input校验规则不生效 item.materialsPeApplyDetailsDTOS[i].amountIn = 0; item.materi原创 2021-02-22 20:00:17 · 2028 阅读 · 0 评论 -
element-ui 表格树编辑后重新获取数据不刷新解决方法
问题element-ui改变数据后重新getData() 改变tableData的值 但是表格并没出现数据响应改变,需要刷新才显示解决方法添加key字段 key为getData获取数据后需要改变的值 <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading" :key="key" element-loa原创 2021-02-05 15:29:21 · 1751 阅读 · 1 评论 -
Vue3配置路径简写以及组件通过插件形式引入
环境: Vue3+Vite1. 创建vite.config.jsconst path = require("path");console.log(path.resolve(__dirname, "./src"));module.exports = { base: "/", outDir: "target", port: 3001, open: true, https: false, ssr: false, alias: { //路径简写配置 "/@/":原创 2021-01-31 14:32:22 · 896 阅读 · 0 评论 -
echarts一些配置代码以及实例
效果代码<!-- --><template> <div> <div style="height:350px" id="mixBarEcharts"></div> </div></template><script>export default { name: "mixBarEcharts", data() { return { option: {原创 2021-01-09 19:51:54 · 189 阅读 · 0 评论 -
centos+nginx+git部署vue项目
1. 实现要求将代码通过git上传到centos服务器在进行npm run build进行打包通过nginx配置端口实现访问2. 环境centos 7.4nodejs v13.11.03. 准备centos git下载 yum install -y gitcentos nginx下载 https://blog.csdn.net/weixin_42109012/article/details/95194776桌面端命令行我用的是cmd直接访问centos的默认安装软件目原创 2021-01-05 18:44:37 · 200 阅读 · 0 评论 -
vue.extend构造函数组件和插件形式实现一个elementui的message
需求使用 vue.extend使用install方法然后用vue.use引入组件用this.$message调用弹窗效果如下主要代码index.jsimport Vue from "vue";import vueMessage from "./vueMessage.vue";function createComponents(component, props) { // 函数式创建一个Component const componet = Vue.extend({ //原创 2021-01-04 11:32:01 · 570 阅读 · 0 评论 -
vue echarts实现每三秒获取一次数据
需求每三秒获取一次数据如果x轴超出5条数据剔除第一条效果代码:需要引入的插件: echarts momentjsecharts: https://echarts.apache.org/zhmomentjs引入: https://www.cnblogs.com/lxn2/p/10101927.html<!-- --><template> <div> <div id="line" style="width:800px;he原创 2020-12-29 15:40:49 · 1076 阅读 · 6 评论 -
Vue使用mqtt插件
1. 下载插件npm install mqtt2. 注册插件 main.js(可不用)import mqtt from "mqtt";Vue.prototype.$mqtt = mqtt;3. 设计存放mqtt配置的jsimport mqtt from "mqtt";/*使用方法this.client= new initMqtt().connect()*/function initMqtt(options) { const { hostname, port,原创 2020-12-19 19:16:11 · 754 阅读 · 7 评论