vue基础
关注
分享
扫一扫
文章平均质量分 66
记录自己的学习
无知的小菜鸡
404
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue nextTick的简化版
使用异步更新队列来优化渲染性能，当数据发生变化时，并不会立即更新。更新循环结束之后执行延迟回调。，而是在同一事件循环结束时批量更新。要实现一个类似的工具函数，可以参考。的基本思路，主要依赖于。和浏览器的异步机制（例如。原创 2024-03-27 08:41:57 · 327 阅读 · 0 评论 -
Vue 3 hooks的基本使用及疑问
Vue 3 hooks的基本使用及疑问原创 2024-01-18 13:57:41 · 1203 阅读 · 1 评论 -
vue：实现顶部消息横向滚动通知
vue：实现顶部消息横向滚动通知原创 2023-11-09 09:50:45 · 3579 阅读 · 0 评论 -
前端pdf预览、pdfjs的使用
前端pdf预览、pdfjs的使用原创 2022-11-07 15:26:33 · 7349 阅读 · 9 评论 -
vue3 props属性基本使用梳理
vue3 props属性基本使用梳理原创 2022-10-08 21:46:03 · 25035 阅读 · 2 评论 -
Vue Grid Layout
vue grid layout原创 2022-07-27 22:56:23 · 3869 阅读 · 0 评论 -
vue项目内存溢出的解决
vue项目内存溢出的解决原创 2022-07-14 20:55:47 · 2890 阅读 · 2 评论 -
vue3：使用ref和emit来减少props的使用
vue3：使用ref和emit来减少props的使用原创 2022-06-16 21:52:35 · 3285 阅读 · 2 评论 -
vue3：过渡和动画
vue3：过渡和动画原创 2022-06-04 19:22:50 · 1067 阅读 · 0 评论 -
基于vue3.0的遮罩
前言最近在uniapp中要写一个弹窗，弹窗好写，但是遮罩没有接触过。找到了下面这篇文章，推荐仔细阅读一下。在这篇文章的基础下，简单封装了一个遮罩。推荐文章：论如何用Vue实现一个弹窗-一个简单的组件实现遮罩备注组件名不要命名为mask，控制台会提示Do not use built-in or reserved HTML elements as component id，意思是不要将内置或保留的HTML元素用作组件id效果添加了一个close-on-click-modal属性，默认点击遮罩，遮罩原创 2021-09-28 11:28:08 · 2730 阅读 · 0 评论 -
Vue 路由切换动画
前言最近公司项目的UI进行升级，对路由切换进行了如下优化：增加顶部进度条先放一张效果图：这个功能需要借助NProgress安装npm install --save nprogress使用在路由的导出文件里使用，我这里是router.js//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'router.beforeEach((to, from, next) => { NProgress原创 2021-12-28 13:53:23 · 970 阅读 · 2 评论 -
[email protected] + vue3.0 安装element UI
前言目前一直使用vue2.0进行项目开发，但是因为3.0出了，后期肯定会进行升级，就提前进行学习一波。创建完项目后，就按照element ui官网，安装了element。但是安装完后报错了解决之前的安装方式是针对就版本的脚手架和vue2.0的。针对[email protected] + vue3.0，element提供了针对3.0版本的element uiElement UI 3.0 官方文档按照最新的3.0安装方式，重新安装一下element ui就可以正常使用了。...原创 2021-07-16 13:34:37 · 963 阅读 · 0 评论 -
【vue3】setup语法糖 - 命名空间组件
【vue3】setup语法糖 - 命名空间组件原创 2022-05-10 13:48:35 · 2882 阅读 · 4 评论 -
setup语法糖和style常用特性
setup语法糖和style常用特性原创 2022-05-08 14:40:10 · 899 阅读 · 1 评论 -
Vue Router 路由基础
路由的梳理学习原创 2022-03-15 16:21:28 · 2068 阅读 · 1 评论 -
使用Vite搭建Vue3 + Ts项目
使用Vite搭建Vue3 + Ts项目原创 2022-03-11 08:47:14 · 7944 阅读 · 0 评论 -
Pinia的简单使用
Pinia的简单使用原创 2022-01-17 16:40:16 · 2728 阅读 · 0 评论 -
Vue组件递归
前言最近看项目发现了在菜单展示上面用到了组件的递归，跟函数递归类似，就是组件内部调用自己。实现用途组件递归一般会用到像菜单这样的树形结构，不确定层级时可以通过组件递归实现。实例使用页面<template> <div> <my-tree :menu-data="menuData"></my-tree> </div></template><script>import myTr原创 2022-01-04 15:59:10 · 570 阅读 · 0 评论 -
Vue项目中的配置及配置文件
环境变量 .env文件访问现在的前端项目都是用 Node 来作为辅助开发工具，而 process 是 Node.js 中的 一个全局变量，提供来有关当前 Node.js 进程的信息并对其进行控制。而 process 中的 env 则是返回包含用户环境的对象。通俗点说，就是可以通过 process.env 拿到当前项目运行环境的信息。console.log("环境变量：",process.env).env文件VUE_APP_URL = 127.0.0.1:9088从控制台可以看到，pro原创 2021-12-10 16:18:38 · 8860 阅读 · 2 评论 -
Vue3 常用全局API
createApp返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。const app = createApp({})你可以在 createApp 之后链式调用其它方法参数参数1：可以接收一个根组件对象，以vue项目为例import App from "./App.vue";const app = createApp(App);参数2：接收根组件的prop属性const app = createApp(App,{name:'11'});//App.原创 2021-12-06 16:57:21 · 1880 阅读 · 0 评论 -
vue以API的方式加载组件
前言大部分组件的使用，基本都是通过import方式导入，这也是最常用的。但是有些时候也需要通过API方法的形式调用。比较常见的比如element ui 的Message 消息提示。这里主要介绍3.x版本的写法，2.x版本可以看我的另一篇文章，简单写了个例子以及自己的理解。Vue.extend、message消息提示API方式加载组件参考文章：vue 3.0 封装一个message提示组件极简系列—vue3.x消息组件message全局API与vue2.x变化变更前变更后V原创 2021-11-29 16:59:10 · 1225 阅读 · 0 评论 -
Provide 和 Inject 的用法
前言父子组件传参可以通过props和emit来实现，但是当组件的层次结构比较深时，props和emit就没什么作用了。vue为了解决这个提出了Provide / Inject，知道这个东西，但是一直没用过，最近碰到了一个问题，踩了一些坑，在这里记录一下备注：我安装的是vue3.x，v-model用的是3.x的语法。2.x和3.x用法一致，我这里是用2.x写的通用知识基本用法provide 选项应该是：一个对象或返回一个对象的函数inject 选项应该是：一个字符串数组，或 一个对象，对象的原创 2021-11-23 16:16:54 · 26341 阅读 · 6 评论 -
使用vue-i18n实现中英文切换
前言一下内容均是基于vue3.0进行的vue3版本的vue-i8n用法还是有挺大区别的相对于之前的版本安装npm install vue-i18n@next -S创建目录及文件- plugins 根目录，放一些插件配置文件-- i18n 存放中英文配置的目录配置中英文对照表注：键名要一 一对应出口文件：index.ts使用在main.ts 里全局引入在页面中使用...原创 2021-11-15 13:39:17 · 2294 阅读 · 6 评论 -
Vue.extend、message消息提示
前言努力学习的小白一枚，如果有什么错误的地方，麻烦留言指正。Vue 2.x推荐文字：Vue.extend()实现MessageBox弹窗起因在使用element 的message组件时，产生了个疑问，正常使用组件都是通过import的形式引入到页面中，然后通过props进行属性的传递。但是通过函数调用就感觉很特别，看完了上面的文章，有了一些自己的理解。效果代码组件代码<template> <div class="message-container">原创 2021-11-10 15:52:41 · 740 阅读 · 0 评论 -
指令实现element弹窗的全屏与移动
注意点在弹窗外加一层div，指令加在div上，不要直接加在弹窗上，会报错在指令上给弹窗加一个高度，用vh单位，加高度是为了计算后续的移动边界全屏状态下不允许移动 <div v-drag="'40vh'"> <el-dialog ref="dialogRef" v-model="open" title="Tips" :close-on-click-modal="false"> .... </el-dialog> </div原创 2021-11-05 18:24:04 · 1267 阅读 · 0 评论 -
Vue使用render函数（以js文件的形式生成组件）
以JS的形式写组件原创 2021-10-25 15:19:22 · 4801 阅读 · 0 评论 -
放大镜效果的实现
前言最近在网上发现了一个放大镜效果，感觉很有意思。最终在b站找到了实现的教程。教程作者 xiao-high教程链接点此查看视频教程是基于html、css、js进行制作的。代码是我跟着教程手敲的。后期我会更新vue版和react版。效果图原生版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat原创 2021-09-16 23:58:15 · 865 阅读 · 2 评论 -
vue2.x 插件的开发
前言第一次好好学习插件的开发，有什么不正确的地方麻烦指正。另外写这篇文章，纯粹是当作自己的学习笔记。原创 2021-09-08 11:15:27 · 679 阅读 · 0 评论 -
vue3.0（4）：vuex的基本使用（基于vue3.x）
官方文档传送门安装安装vuexnpm install vuex@next --saveyarn add vuex@next --save安装Promise（Vuex 依赖 Promise）npm install es6-promise --save # npmyarn add es6-promise # Yarn核心概念每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以原创 2021-07-21 16:24:37 · 1485 阅读 · 0 评论 -
vue 3.0 的学习记录
声明这篇文章只是记录自己3.0的学习，有问题欢迎指出。安装3.0查看版本vue -V卸载并安装3.0版本//卸载3.0之前的版本npm uninstall vue-cli -g//卸载3.0以上的版本npm uninstall -g @vue/cli//安装 最新版本npm install -g @vue/clivue3.03.0官方文档创建3.0项目vue create 项目名组合式API...原创 2021-07-19 15:31:32 · 287 阅读 · 1 评论 -
Vue3.0（3）：v-model
v-model 双向绑定这里只说在组件上的使用v-model官方文档2.0在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件实例1//父组件<template> <div> <el-input v-model="msg" placeholder="请输入"></el-input> <model-test-1 v-model="msg"></model-te原创 2021-07-18 22:24:44 · 1579 阅读 · 0 评论 -
Vue3.0（2）：Teleport
Teleport官方文档Teleport汉语意思是传送，从官方文档看这个名字很符合，可以将代码片段传送到其他位置官方示例1（略作修改）//不使用Teleport<template> <div> <el-button type="primary" @click="openModel = true">打开</el-button> <div title="main"> <div > &原创 2021-07-17 14:02:39 · 365 阅读 · 0 评论 -
Vue3.0（1）：组合式API
组合式API官方文档从官方文档来看，使用组合式API是为了解决碎片化，避免断地“跳转”相关代码。setup 组件选项新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。setup 选项是一个接收 props 和 context 的函数，将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。因为 props 是响原创 2021-07-16 19:17:12 · 861 阅读 · 2 评论 -
异步编程：异步、promise
异步菜鸟异步编程概念异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。常见的两种异步：回调函数、异步Ajax回调函数回调函数最常见的是setTi原创 2020-10-31 22:02:31 · 318 阅读 · 0 评论 -
vue（7）：表单输入绑定
基础用法可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked property 和 change 事件；select 字段将 value 作为原创 2020-05-31 16:55:41 · 257 阅读 · 0 评论 -
vue（8）：组件入门：子组件、插槽、render渲染
插槽<div id="app"> <error-box>语法错误</error-box> <error-box>资源不存在</error-box> <error-box></error-box></div><script type="text/javascript"> Vue.component('error-box',{ template:` <div>原创 2020-07-10 22:06:10 · 823 阅读 · 0 评论 -
Vue：插槽（slot、slot-scope、v-slot）
前言最近复习Vue时发现插槽真的很重要、很有用。以前竟然没怎重视????。使用插槽，可以将重复性的代码进行整合，可以将样式进行统一。打个比方：elementUI中的表格和分页条经常搭配在一起使用，分页条这部分代码其实一直在重复。我们可以将这部分进行封装，然后在插槽中写表格的部分（这部分的代码会写在后面）复习时发现插槽这部分有slot、slot-scope、v-slot 这三个东西真的很懵逼，然后只能看官方文档和其他博客进行分析。slotslot实际上就是用于指定具名插槽的名实例1、//全局组件原创 2021-06-03 16:06:50 · 3522 阅读 · 1 评论 -
Vue（8）：组件入门：组件的注册、组件的切换
什么是组件组件的出现是为了拆分vue实例的代码量，能够让我们以不同的组件来划分不同的功能。这样我们需要什么样的功能只需要调用对应的组件即可组件的注册组件的注册分为两种形式：全局注册和局部注册全局注册描述全局注册的组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。除此之外组件在各自内部也都可以相互使用语法Vue.component('my-component-name', { // ... 选项 ...})实例<!-- 把这个组件作为自定义元素原创 2020-11-05 18:54:23 · 498 阅读 · 0 评论 -
vue(10):路由补充
路由props传参（了解）这只针对params格式传参props是布尔值实例：<div id="app"> <router-link to="/login/10/'哈哈哈'">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view></div><script type=原创 2020-07-14 13:36:52 · 279 阅读 · 0 评论 -
vue（8）：组件入门：自定义组件的 v-model
自定义组件的 v-model组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件之前v-model属性一般都是用在form表单中，v-model的值是表单组件的value值。例如：<div id="app"> <form name="formInfo"> 你的爱好： <input type="checkbox" value="读书" v-model="formInfo" />读书 <input type=原创 2020-11-03 19:19:24 · 642 阅读 · 0 评论