![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
RxnNing
我本非凡
展开
-
vue源码模拟02-生成虚拟dom、渲染数据、虚拟dom转真实dom
【代码】vue源码模拟02-生成虚拟dom、渲染数据、虚拟dom转真实dom。原创 2023-08-15 09:36:43 · 164 阅读 · 0 评论 -
vue3学习-Pinia状态管理
vue3的状态管理插件Pinia原创 2023-08-07 16:05:57 · 281 阅读 · 0 评论 -
vue3学习-应用规模化(额,没怎么看)
必须由 编译为标准的 javascript 和 cssSFC中的 标签会在开发时注入成原生的,支持热更新,在生成环境瞎,他们会被额抽取、合并成单独的 css 文件前端工程化的最终目的为了更好的维护代码。关注点分离不应该完全基于文件类型的区别和分离。在一个组件中,其模板、逻辑和样式本就是有内在联系的、是耦合的,将它们放在一起,实际上使组件更有内聚性和可维护性。Vite 官方文档配合 TypeScript 使用 Vue。Vue 团队维护着 eslint-plugin-vue 项目,它是一个 ESLint 插原创 2023-08-04 11:01:58 · 97 阅读 · 0 评论 -
vue3学习-自定义指令 和 插件 plugins
/ 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el , binding , vnode , prevVnode) {// 下面会介绍各个参数的细节 } , // 在元素被插入到 DOM 前调用 beforeMount(el , binding , vnode , prevVnode) {} , // 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 mounted(el , binding , vnode , prevVnode) {原创 2023-08-04 09:29:00 · 339 阅读 · 0 评论 -
vue3学习-组合式函数
如果参数是 ref,它会返回 ref 的值;如果参数是函数,它会调用函数并返回其返回值。从组合式函数返回一个响应式对象会导致在对象解构过程中丢失与组合式函数内状态的响应性连接。时一个利用vue的组件合适Api来封装和服用有状态逻辑的函数。, 这样该对象在组件中被结构为 ref之后仍可以保持响应性。组合式函数约定用驼峰命名法,并以“use”作为开头。将可能的ref 或 getter 函数 解包。在这些上下文中,它们也只能被。这样的生命周期钩子中调用它们。组合式函数只能在 `` 或。组合式函数始终返回一个。原创 2023-08-04 09:27:17 · 266 阅读 · 0 评论 -
vue3学习-组件基础、深入组件
注册、名称格式、props、emit、v-model、$attrs、slot、provied/inject、异步组件原创 2023-08-02 15:48:55 · 398 阅读 · 0 评论 -
vue3学习-侦听器watch
语句创建:如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。相比之下,返回对象getter函数,只有再返回不同的对象时,才会触发回调。默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新。传入一个响应对象,会隐式的创建一个深层侦听器。如果想在侦听器回调中能访问被 Vue 更新。或 `` 中用同步语句创建的侦听器)再创建侦听器时,立即执行一遍回调。的 DOM,你需要指明。原创 2023-08-02 10:18:15 · 219 阅读 · 0 评论 -
vue: dev-tools控制台不显示问题
1.查看public/index.html中引用的vue是否为压缩版本(vue.min.js)。2.1 设置-扩展程序-管理扩展程序-找到Vue.js devtools。2.4 有权访问的网站:设置成再在所有网站上。2.3 打开-允许访问文件网址。需要把压缩版换成vue.js。原创 2023-08-01 11:21:11 · 2371 阅读 · 0 评论 -
d3真实数据---实例
【代码】d3真实数据---实例。原创 2023-06-05 17:42:52 · 152 阅读 · 0 评论 -
Vue项目开发中使用到的插件
vue项目可能会用到的插件原创 2023-04-17 16:44:20 · 57 阅读 · 0 评论 -
vue项目 二维码生成|转连接|转文件
vue 二维码生成方法原创 2023-03-06 11:09:37 · 461 阅读 · 0 评论 -
element ui el-checkbox 全选 半选 组件分装
el-checkbox原创 2022-05-24 16:43:25 · 977 阅读 · 0 评论 -
vue学习
vuev-model原创 2022-05-24 11:04:59 · 115 阅读 · 0 评论 -
兼容小程序和app安卓 录音功能uniapp
这是一个按钮录音弹窗:你也可你自己换成别的!点击保存会返回 录音的 路径 通过 v-model 绑定的!(你也可以自己写个emit 返回方法,)我代码中有 我项目录音转文字的接口,使用者注意吧这些删除了就行# 要删除的(就这俩) import { usualUploadFileOne, removeFile, usualGetFileList, getSpeech } from '@/common/api/ip'try{ let res = await getSpeech({原创 2022-02-25 14:31:49 · 3947 阅读 · 0 评论 -
uniapp app应用 h5plus写文件和读文件 vue
!写文件好像只能写 文本!其他不知道没找到浏览文件的话 可以先把本地文件转换成对象,在通过 uni.openDocument 打开uniapp文档 和 plus 文旦https://uniapp.dcloud.io/api/file/file?id=opendocumenthttps://www.html5plus.org/doc/zh_cn/io.html#plus.io.resolveLocalFileSystemURLhttps://www.html5plus.org/doc/zh_cn/i原创 2022-02-10 18:35:42 · 2290 阅读 · 0 评论 -
uniapp分装 uview1.0x 中的多组件的分装
uniapp分装 uview1.0x 中的 u-checkbox<!-- 多选组件分装 --><template> <view> <u-checkbox-group @change="handleChangeCheckbox" :wrap="wrap"> <u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in formatLi原创 2021-12-01 10:45:32 · 1597 阅读 · 0 评论 -
table列合并
:span-method="objectSpanMethod"//表格跨列设置 objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行 if (columnIndex === 0) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return {原创 2021-08-20 09:16:35 · 1218 阅读 · 0 评论 -
vue脚手架2 和 3 的配置区别
https://blog.csdn.net/yinge0508/article/details/112509720转载 2021-07-10 10:10:50 · 353 阅读 · 0 评论 -
require.context
vue/cli2中/config/dev.env.js/config/prod.env.js配置 开发环境名NODE_ENV: '"development"'配置 开发环境后台接口地址BASE_API: '"http://123.57.71.29:8080"'调用配置好的参数axios.default.baseURL = process.env.BASE_APIrequire.context函数接受三个参数directory {String} -读取文件的路径useSubdir原创 2021-05-18 16:52:57 · 340 阅读 · 0 评论 -
node版本控制工具 nvm
nvm install v7.9.0nvm list 查看已经安装的版本nvm list installed 查看已经安装的版本nvm list available 查看网络可以安装的版本nvm version 查看当前的版本nvm install 安装最新版本nvmnvm use ## 切换使用指定的版本nodenvm ls 列出所有版本nvm current显示当前版本nvm alias ## 给不同的版本号添加别名nvm unalias ## 删除已定义的别名nvm re转载 2021-03-26 17:09:25 · 206 阅读 · 0 评论 -
el-scrollbar显示横向滚动条
让横向滚动条出现,同时不显示默认的滚动条,需要在 el-scrollbar__wrap 添加.el-scrollbar__wrap{ overflow-x: auto; height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式}1234在el-scrollbar 是 overflow: hidden; el-scrollbar__view必须是浮动或 display: inline-block 才能出现滚动条.el-scrollbar .原创 2021-03-16 17:13:58 · 4595 阅读 · 5 评论 -
手写简单的promise
export class newPromise { constructor(executor) { executor(this.resolve, this.reject) } status = PENDING res = undefined result = undefined resolve = (value) => { if(this.status !== PENDING) return this.st原创 2021-03-03 17:04:32 · 96 阅读 · 1 评论 -
设置别名alias和 @ 引用注意
# vue/cli2 webpack.base.config.js 中resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'components': resolve('src/components') } },配置好后必须重新启动项目才可以生效# 使用import defaultBread原创 2021-02-26 17:57:18 · 340 阅读 · 0 评论 -
vuex小知识
mutations 和 active中 方法名 定义在 constant.js 常量中mutations 映射(方法名为常量时)使用# 导入import { mapmutations } from 'vuex'import {CHANGINDEXPATH,CHANGASIDENAVCOLLAPSESTATUS} from '@/store/constant'# 注册...mapMutations([CHANGINDEXPATH,CHANGASIDENAVCOLLAPSESTATUS]),#.原创 2021-02-26 16:42:48 · 75 阅读 · 0 评论 -
vuex中state存放的东西
侧边栏展开收缩 条件默认刷新浏览器 侧边栏默认展开的 :default-active = “currentIndexPath”原创 2021-02-26 16:35:48 · 393 阅读 · 0 评论 -
webpack配置别名alias
vue/cli2# build/webpack.base.conf.js 中resolve: { alias: { "pages": "@/pages" }, extensions: ['.js','.vue', '.json']}vue/cli3resolve: { alias: { '@': resolve('src'), '_c': resolve('src/components') } }原创 2021-02-24 10:59:40 · 498 阅读 · 0 评论 -
axios如何取消重复请求cancelToken
原文链接通过axios.CancelToken.source生成取消令牌token和取消方法cancelconst CancelToken = axios.CancelToken;const source = CancelToken.source();axios.CancelToken通过axios.CancelToken构造函数生成取消函数const CancelToken = axios.CancelToken;let cancel;axios.get('/user/12345',原创 2021-02-23 10:37:09 · 382 阅读 · 0 评论 -
loading
https://blog.csdn.net/Seven71111/article/details/112944173转载 2021-02-22 16:51:15 · 310 阅读 · 0 评论 -
swiper
vue zhong 使用 swiper安装 (注意版本)全局引入import 'swiper/dist/css/swiper.min.css'import 'swiper/dist/js/swiper.min'使用<template> <div class="swiper1"> <el-row> <el-col :span="14"> <div class="swiper-container"&原创 2021-02-19 15:59:39 · 78 阅读 · 0 评论 -
关于element-ui 中的upload详情使用
Upload怎么说Upload中可以放元素标签(这里由<i class="el-icon-plus avatar-uploader-icon"></i> 为例)可以设置该标签的大小,也就说通过点击该标签来进行上传的类名为 el-upload 的盒子 宽高 由上面的 <i class="el-icon-plus avatar-uploader-icon"></i> 撑开...原创 2021-02-18 16:24:40 · 901 阅读 · 0 评论 -
Vue家谱视图结构- vue-tree-chart
文档: https://github.com/tower1229/Vue-Tree-Chartnpm i vue-tree-chart --saveUsage<TreeChart :json="treeData" />in script:import TreeChart from "vue-tree-chart";export default { components: { TreeChart }, data() { return { treeData原创 2021-02-18 14:56:25 · 1653 阅读 · 0 评论 -
element ui 中的 messagebox 多次弹出 影响体验
/**重置message,防止重复点击重复弹出message弹框 */import { Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if (messageInstance) { messageInstance.close() } messageInstance = Message(options)};['er原创 2021-02-08 16:42:15 · 2336 阅读 · 0 评论 -
vue 环境配置.env;.env.development;.env.production配置
vue 环境配置.env;.env.development;.env.production配置原创 2021-02-01 10:32:10 · 1649 阅读 · 3 评论 -
请求强制中断
实现原理:重复点击提交按钮,重复发生请求创建 url请求缓存列表 urlList设置axios请求拦截器,调用stopRequestUrl函数,判断是否拦截设置axios响应拦截器,调用 dropResponseUrl 函数,把缓存地址列表中的地址抛出去,避免下次请求被拦截let urlList = []//判断请求地址是否存在缓存地址列表中const stopRequestUrl = function (urlList,url,c,errorMessage ) { const erro原创 2021-01-13 14:45:15 · 451 阅读 · 0 评论 -
vue-router重复点击路由报错问题vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: “
报错信息:vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/recommend/000Si7u14BaKKw") is not allowed", stack: "Error↵ at new Navi原创 2021-01-13 09:27:41 · 1509 阅读 · 0 评论 -
Vue 保存编辑 防抖(debounce) 和 节流(throttle)指令的创建
/**防抖和节流指令的使用方法:绑定示例: <el-button type="primary" size="mini" v-throttle="[save,'click,500]">保存</el-button>.bind(null,'filters')绑定带有参数的函数:<el-button type="primary" size="mini" v-throttle="[save.bind(null,'filters')]">保存</el-button>原创 2021-01-12 12:22:36 · 922 阅读 · 0 评论 -
封装函数插件、封装全局组件 插件 install 通过use()注入
封装toast 组件,挂在到vue 原型上, 然后通过 函数就可以调用了原理是:1.把对应的组件封装成插件2.然后安装这个插件3.把这个组件创建出来4.并且添加到vue 的原型上,5. 然后就可以通过 this.Toast.show(‘message’,2000)这样的形势调用了开搞首先给大家看下我的文件目录一、首先创建好对应的toast.vue组件,这里就不描述的了,直接贴上代码了# toast.vue<template> <div class="toast原创 2021-01-10 16:59:52 · 329 阅读 · 0 评论 -
vue 中使用 防抖 和节流
templete中<el-button type="primary" size="mini" @click="addGw('gwruelForm')" >保存</el-button >引入import { _throttle, Debounce } from "@/utils/util";methods中addGw: Debounce(function (formName) { this.$refs[formName].v原创 2021-01-08 18:10:53 · 251 阅读 · 0 评论 -
处理小数点保留后两位问题
filterNumber(){ var str = this.addForm.buyprice; //el-input v-model绑定的数据 var len1 = str.substr(0, 1); var len2 = str.substr(1, 1); //如果第一位是0,第二位不是点,就用数字把点替换掉 if (str.length > 1 && len1 == 0 && len2 != ".") {原创 2021-01-08 15:44:40 · 638 阅读 · 0 评论 -
vue treeSelect 和 element ui 结合校验问题
默认element ui 不能校验 treeSelect解决办法:1.2. ·<el-form-item label="活动名称" prop="region"> <treeselect v-model="ruleForm.region" :options="options" @input="inputChange"/></el-form-item>注意:prop="region"/v-model="ruleForm.region"/是必须的meth原创 2021-01-05 10:56:37 · 1222 阅读 · 0 评论