vue
文章平均质量分 57
vue.js学习
舜岳
不积跬步无以至千里 v: shunyue1321
展开
-
vue vuex中store内2种异步请求数据方法
效果图如下:store.js代码如下:import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({ //状态数据 state: { list:['默认为空'] }, //getters可以认为是store的计...原创 2019-08-24 11:51:36 · 15735 阅读 · 1 评论 -
扫雷游戏 vite + vue3 + ts
扫雷游戏原创 2022-04-12 22:12:45 · 2857 阅读 · 0 评论 -
【系列 3】vue依赖收集原理与nextTick实现
一、vue响应式数据依赖收集原理vue收集依赖的步骤:Watcher监听: 一个组件一个Watcher,每次执行 updateComponent 更新当前组件时创建一个 Watcher(监听者) => Dep.target。 用来监听该组件执行 render 访问了多少个 data 内的响应式数据,触发了多少 get响应式get订阅: 每个响应式数据触发 defineProperty 前创建一个 Dep(发布者)。 用来当 1 过程触发了一个 get 时就拿到 1 中的 Dep.target原创 2021-10-18 09:07:24 · 628 阅读 · 0 评论 -
【系列 2】手写vue模板编译
模板编译流程是什么?1. 获取 outerHTML<div id="app">{{name}}</div>2. 正则查找转义成 ast 语法树ast = { "tag": "div", "attrs": [ { "name": "id", "value": "app" } ], "children": [ { "type":原创 2021-10-09 09:46:06 · 355 阅读 · 0 评论 -
【系列 1】手写vue响应式原理
手写vue响应式原理首先我们看看原生 vue 做了什么<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script><script> const vm = new Vue({ data: { name: '小米', arr:[{a:2}] // 检测深度响应式 } }) con原创 2021-10-08 09:17:27 · 348 阅读 · 1 评论 -
vite实现md转vue
前言:早期UI库文档代码与渲染用的是 2 套代码,自然改文档时需要改 2 份代码。 md 转 vue 的目的就是为了能让渲染代码与文档代码共用一套代码。整体思路我们知道,vite pulgin 将 md 文件转换成 vue 组件渲染的主要流程是:配置 vue router 路由,指向 .md 文件编写 vite 插件将 .md 文件解析成 vue 文件字符串最后由 vite 的插件 @vitejs/plugin-vue 将 vue 文件字符串编译成函数组件返回给前端我们知道,.md 文件原创 2021-09-15 20:38:14 · 2195 阅读 · 2 评论 -
vite插件通过环境变量指定vue入口文件
项目结构:├── build├── src│ ├── pages│ ├── App.vue│ ├── main.dev.js // 通过环境变量指定入口 main 文件│ ├── main.prod.js│ └── ...├── index.html├── package.json└── vite.config.js vite.config.js 配置如下:const path = require('path')import { defineCon原创 2021-09-13 14:48:07 · 2761 阅读 · 1 评论 -
手写 vuex4.0 实现原理
首先我们来看一个小小的vuex4.0使用案例App.vue<template> <div> count: {{ count }} | double: {{ double }} </div> <!-- $store 是挂载到实例上,兼容 vue2 用的 --> <div> $store.state.count: {{ $store.state.count }} </div> <hr> <butt.原创 2021-07-15 16:47:40 · 292 阅读 · 0 评论 -
vue实现浏览器代码在线编辑预览
效果图如下:右边可输入代码, 左边可时时查看效果实现如下参照以下 CodeSandbox 演示 使用 codeopen.vue 组件:<!-- slug是codeopen上对应的url tab是需要显示的tab --><codeopen title="Conditional rendering" slug="oNXdbpB" tab="js,result" />codeopen.vue 组件:<template> <p原创 2021-06-16 18:20:35 · 3112 阅读 · 2 评论 -
自定义element的el-upload文件上传请求
自定义element的el-upload文件上传请求<template> <el-upload action="/ws-truck/messenger/upload/image" :on-success="onSuccess" :httpRequest="httpRequest" name="file" class="upload-demo" with-credentials drag ></el-upload><原创 2021-04-09 16:42:28 · 1700 阅读 · 2 评论 -
js实现Excel表格上传解析与导出
1. 二进制读取并解析xlsx文件xlsx库:用于解析xlsx文件import * as XLSX from 'xlsx';let data = await readFile(file); //读取文件二进制const workbook = XLSX.read(data, {type:'binary'}); // xlsx解析二进制文件const worksheet = workbook.Sheets[workbook.Shee原创 2021-03-28 17:37:06 · 784 阅读 · 0 评论 -
js快速计算文件hash值
1. 通过 requestIdleCallback or spark-md5利用浏览器空闲时间切片计算文件hash值:requestIdleCallback简介:window.requestIdleCallback(): 方法将 在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应。函数一般会按先进先调用的顺序执行,然而,如果回调函数指定了执行超时时间timeout,则有可能为了在超时前执行函数而打乱执行顺序。file_has原创 2021-02-23 11:47:02 · 6227 阅读 · 0 评论 -
js vue上传文件判断文件格式 GIF JPG PNG
根据文件识别头信息获取图片文件的类型:JPG:文件头标识: FF D8 文件尾标识: FF D9PNG:文件头标识 (8 bytes) 89 50 4E 47 0D 0A 1A 0AGIF:文件头标识 (6 bytes) 47 49 46 38 37 61 or 47 49 46 38 39 61vue上传文件判断文件格式 GIF JPG PNG:<template> <div> <div ref="drag" id='drag' @drop="原创 2021-02-22 20:56:44 · 3604 阅读 · 0 评论 -
vue中 $destroy 并且 removeChild 组件数据响失效
this.$destroy() 作用:完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。触发 beforeDestroy 和destroyed 的钩子。当销毁一个组件时我们有可能会用这种方法:this.$destroy()this.$el.parentNode.removeChild(this.$el) //通过父级元素销毁当前组件查看页面html该组件确实被销毁, 但是removeChild销毁组件只是表面上的销毁了该组件, 实际上该组件函数任然缓存在vue中,下次组件显原创 2021-01-07 11:47:03 · 5947 阅读 · 1 评论 -
如何实现一个vue的element ui库?
一、教你如何实现一个UI库: uab-ui本 UI 库参考了线上活跃度与使用频率较高的一些成熟 UI 框架 如: Element UI 、 Ant Design 、iView UI 、Bootstrap 可学习更高层次的代码原理与规范。GitHub地址npm地址uab-uiuab-ui二、UI库代码实现逻辑1.uab-ui库目录介绍.├── dist 打包后的UI库压缩代码 用于npm安装引入使用│ ├── uab-ui原创 2021-01-05 09:40:27 · 384 阅读 · 0 评论 -
webpack配置 node_modules .vue 支持 es7 语法
安装:npm install -D babel-loader @babel/core @babel/preset-env webpack vue-loader新版本 babel-loader 默认支持es7语法!如果需要给 node_modules 内的文件支持es7 则需要如下 正确示范 内配置如果只是单纯支持 es7 则不需要配置 include正确示范:// webpack.config.js:const VueLoaderPlugin = require('vue-loader/l原创 2020-12-25 11:18:15 · 2127 阅读 · 0 评论 -
手写一个简化版 vuepress 需要知道什么?
首先我们来看看 vuepress 是怎么工作的:1. 全局安装 vuepressnpm install -g vuepress2. 运行编写好的 docs 文件,编译后的浏览器显示文档网页vuepress dev docs3. 将编写好的 docs md文档文件 build 打包成静态 html 网页vuepress build docs接下来我们自实现的 uabpress 也需实现以上功能!1.实现npm全局安装 uabpress 库 并且命令行可执行1. 首先我们来实现自己编写原创 2020-12-08 08:45:23 · 300 阅读 · 0 评论 -
手写一个简化版本的vuepress
我手写一个简化版本的vuepress 它的名称叫 uabpress项目名称: uabpress功能:启动项目: uabpress dev ./docs 作用:将docs文件夹下的md编译在浏览器运行网页打包项目: uabpress build ./docs 作用:将docs文件夹下的md打包成html网页效果图如下:全局安装 uabpress 包npm install -g uabpress卸载在全局的 uabpress 包 npm uninstall -g uabpress使原创 2020-12-06 23:19:09 · 269 阅读 · 2 评论 -
创建一个vue3的项目
1. 创建一个普通的vue3项目npm instal -g @vue/cli //全局安装最新vue构建工具 (默认最新)npm create testvue3 //创建一个名为myvue3的项目选择 Default ( Vue 3 Preview)//运行项目cd testvue3yarn serve效果图:2. 创建一个基于vite开发的vue3项目npm instal -g create-vite-app //全局安装最新vite构建工具 (默认最新)crea原创 2020-11-22 18:20:12 · 4508 阅读 · 5 评论 -
我写了一个青铜版vue
我的青铜版vue代码地址: 【GitHub | 码云】【GitHub | 码云】——青铜版vue代码都是结核vue源码简化实现注释详细可放心品尝实现原理图:vue.js初始化流程图:对应vue源码数据响应式 Observer 原理:Observer 作用:通过Object.defineProperty给 data 内的所有层级的数据都进如下操作:class Observer { constructor(data) { //__ob__ 一个响应式标记 作用:将当前this'继承原创 2020-10-25 15:55:06 · 185 阅读 · 0 评论 -
vue 简单实现vuex原理
效果图如下:1. 准备好环境使用 vue/cil 初始化项目配置:npm install -g @vue/cli //全局安装@vue/clivue create demo-vue //创建项目yarn add vuex安装vuex创建一个store文件夹并使用:2. 实现目的stroe/index.js内容如下:(我们的目的将引入自写的vuex实现vuex基础功能)import Vue from 'vue'import Vuex from 'vuex' /原创 2020-10-11 00:00:13 · 309 阅读 · 0 评论 -
vue 手写一个vue-router
实现效果如下:1. 准备好环境使用 vue/cil 初始化项目配置:npm install -g @vue/cli //全局安装@vue/clivue create demo-vue //创建项目yarn add vue-router 安装vue-router创建一个router文件夹并使用:2. 实现目的router/index.js内容如下:(我们的目的将引入自写的vue-router实现vue路由跳转功能)import vue from 'vue'//imp原创 2020-10-04 21:55:14 · 424 阅读 · 0 评论 -
vue 的4种实现动画方式
效果图如下:1. 合使用第三方 JavaScript 动画库,如 Velocity.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><原创 2020-09-26 15:24:31 · 5364 阅读 · 0 评论 -
vetur mode_modules Cannot find name template 红色波浪不显示
解决方法:打开文件–首选项–设置中搜索Vetur,拉到最底部不勾选勾选Script即可:勾选前:取消后:原创 2020-08-28 10:24:11 · 1481 阅读 · 1 评论 -
vue 录音navigator.mediaDevices.getUserMedia简单实现
vue 录音navigator.mediaDevices.getUserMedia简单实现<template> <div id="microphone-test"> <!-- controls 显示音频 --> <audio ref="recordPlayer" controls src="" /> <button @click="startRecord">开始录音</button> <b原创 2020-07-31 16:25:29 · 4957 阅读 · 1 评论 -
vue获取form内所有name数据
vue获取form内所有name数据不使用 v-model 实现jQuery的 $(‘form’).serializeArray() 功能<div id="app"> <form ref="form" @submit.prevent="submit"> <input type="text" name="name"> <input type="number" name="age"> <button type="submit"原创 2020-07-23 12:17:40 · 4890 阅读 · 0 评论 -
vue v-model接收组件内 type=“file“ @input传递文件
vue v-model接收子组件 type=“file” @input传递文件://使用组件时 接收的文件存在form.file中<FormFile v-model="form.file" />//组件内 //注意里面不可添加:value="value"<input type="file" @input="$emit('input', $event.target.files[0])">...原创 2020-07-13 11:28:03 · 2904 阅读 · 1 评论 -
vue form表单最简写法
vue form表单最简单写法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <title>vue</title></head><body>原创 2020-07-12 09:52:13 · 2329 阅读 · 0 评论 -
vue webpck打包mp3
安装file-loader打包文件插件npm i file-loader --save-devwebpack.config.jsmodule:{ rules:[ { test: /\.(mp3|wav|wma|ape|aac)$/i, use:['file-loader'] } ]}.vue内引入mp3<audio ref="audioPlayer" class="mx-auto mb-3"></audio>//引入im原创 2020-06-17 13:59:19 · 1006 阅读 · 0 评论 -
vue注册全局弹窗组件
目录结构:—elert—|— elert.vue—|— elert.jselert.vue代码:<template> <div class="modal fade" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"...原创 2020-04-16 12:30:03 · 1683 阅读 · 0 评论 -
router-link标签Cannot read property '$route' of undefined"报错解决方法
报错代码:<div class="card mb-3 px-3" v-for="item in data" v-bind:key="item.id"> <router-link :to="{ path:'/exams/details', query:{ name: this.$route.query.name, id: this.$route.params.id} }" c...原创 2020-03-26 10:01:37 · 8167 阅读 · 1 评论 -
vue使用flatpickr时间选择器组件
效果图如下:首先安装:vue-flatpickr-component 时间选择器库npm安装:npm install vue-flatpickr-component --saveYarn安装:yarn add vue-flatpickr-component<template> <div class="form-group row pb-4 border-bo...原创 2020-03-19 16:48:10 · 2767 阅读 · 0 评论 -
vue引入导航守卫报错error: 'to' is defined but never used (no-unused-vars)
若代码无书写错误报错原因: 该项目安装了eslint规范,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似。解决方法解决方法1:在package.json文件内加入如下代码:"rules": { "generator-star-spacing": "...原创 2019-10-28 20:01:18 · 47811 阅读 · 11 评论 -
零基础学习Vue: 第17课 Vue实现动态便签功能支持本地存储小案例
零基础学习Vue: 第17课 Vue实现动态便签功能支持本地存储小案例:实现后的效果图:以下是全部实现代码注解很详细哦!如有疑惑可以评论留言:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>便签</title>...原创 2019-04-20 11:04:26 · 765 阅读 · 0 评论 -
零基础学习Vue: 第43课 vue脚手架目录文件作用详解
零基础学习Vue: 第43课 vue脚手架目录文件作用详解vue脚手架内文件详解:package.json文件内详解:{ "name": "console", // 项目名称 "version": "1.0.0", // 版本 "description": "Console of Ascendas", // 描述 "author": "Gillian Qi", // 作者...原创 2019-05-05 13:59:26 · 506 阅读 · 0 评论 -
【vue】安装vue3.X版本脚手架(图形化界面版)
安装脚手架之前需要电脑已安装node与npm首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入命令行窗口或者 win + R 键 输入cmd 进入命令行窗口输入 :node -v 与 npm -v 查看有无安装node与npm,没有则需要安装:以下证明已安装若没安装 以下是博友安装方法:https://blog.csdn.net/qq_33362864/artic...原创 2019-08-13 14:35:02 · 6765 阅读 · 0 评论 -
vuex组件获取state内数据与时时计算的简便写法
效果图如下:普通方法:store.js代码如下:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ //状态数据 state: { name: '我是store的数据', num1: 11, num2: 22 }, //getters可...原创 2019-08-24 10:57:20 · 2825 阅读 · 1 评论 -
vue脚手架实现子组件间通信
效果图如下:原理:子组件间通过第三方实例化一个vue,再通过此vue的$ emit()发射事件,与$ on()事件监听 通过参数来进行数据传递:首先我们实例化一个vue:bus.js文件:import Vue from 'vue';export default new Vue();我们介绍两个子组件的父组件写法:AB父组件:<template> <div ...原创 2019-08-20 18:51:56 · 493 阅读 · 0 评论 -
零基础学习Vue: 第38课 Vue单页面使用router-link实现页面跳转小案例:
零基础学习Vue: 第38课 Vue单页面使用router-link实现页面跳转小案例:实现效果如下:以下是所有代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="wi...原创 2019-04-27 13:01:01 · 546 阅读 · 0 评论 -
零基础学习Vue: 第21课 Vue 单向数据流父组件的属性值子组件如何更改:
零基础学习Vue: 第21课 Vue定义子组件template的常见3种写法:单向数据流原理:子组件不能直接修改父组件中传递的数据如需间接改变父组件传递的数据 (解决方法:可以在子组件data选项中存储父组件传递的数据之后修改子组件中的数据 即可)以下是实现代码:<!DOCTYPE html><html lang="en"><head> ...原创 2019-04-21 09:38:05 · 334 阅读 · 0 评论