vue
文章平均质量分 73
Might°
新人,多关照,哈哈哈哈~
展开
-
vue3+ts+ElementPlus 实战项目 musicPlus
项目成果码云项目地址觉得不错的话,帮忙点个star!万分感谢具体效果下载项目后浏览,相当于用vue3 ts 重构了之前的项目技术栈分布情况学习收获学习此项目你将会收获vue3的项目实战使用 setup等新增语法使用以及结合ts对vue3的支持ElementPlus项目实战使用 对应更新内容的调整使用工程化管理项目的书写规范 提交风格等ts 封装vuex中的mapgetters… 封装网络请求vue3封装具有更强通用性的组件以及封装组件的思想如何正确的根据项目结构化来划分ts原创 2022-02-27 16:55:40 · 2147 阅读 · 7 评论 -
elementplus最新版实现按需导入
安装准备先安装elementplusnpm install element-plus --save安装自动导入的插件npm install -D unplugin-vue-components unplugin-auto-import配置vue.config.jsconst AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpa原创 2021-12-11 22:12:15 · 2641 阅读 · 0 评论 -
vue3中如何使用Ts搭建项目的网络请求axios
前言最近学习了vue3又学习了ts,学完准备搭建一个项目练练手时。突然想起现在封装的网络请求貌似是vue2和原生js以及axios结合使用的,所以当我们使用vue3和ts进行开发的时候那肯定也得根据当前的技术来重新封装一个结构性更强的基于axios的网络请求体系。封装好了我们以后搭建项目可以说直接采用就好了,学习此文能让我们体会ts在封装网络请求时所给予更加完善的安全性,让我们来看看ts的独特魅力吧。结构预览及说明src下新建service文件夹为主文件夹request为封装请求的文件夹con原创 2021-11-24 19:56:38 · 5321 阅读 · 2 评论 -
封装hook实现setup中使用mapstate
前言传统的vue2中我们使用optionsAPI使用mapstate很方便,但是vue3使用setup函数中我们想使用mapstate变得比较繁琐,今天我们来封装一个简单的hook,帮助我们方便的在setup中使用mapstate来进行开发,废话不多说,直接看源码吧。源码(附解释)很简单,看看就懂了,大家可以直接拿到项目中使用//useMapState.js hookimport { useStore, mapState } from "vuex"import { computed } fro原创 2021-10-18 19:42:33 · 266 阅读 · 0 评论 -
小白也能看懂的vue3源码之vue2响应式系统实现
前言最近在学习vue源码中的响应式系统,说实话确实花了点时间去研究它是如何实现的,研究过程也遇到了一些问题,我相信也是大家可能会感到疑惑的问题,经过一番折腾,终于是明白了它的操作,只能说一个字,绝! 尤大yyds(吹捧一下)现在我们就从零开始实现下吧One Dep类先明白它的作用是啥储存依赖项 subscribes收集依赖项 depend通知更新依赖项 notify首先我们要知道啥是依赖项呢?它的作用是啥?依赖项即我们需要更新该数据所依赖的一些方法和引用 不同的地方调用同一个数据,或者原创 2021-10-11 17:39:14 · 320 阅读 · 0 评论 -
小白也能看懂的vue3源码之渲染系统实现
前言今天来模拟一下vue3的渲染系统的实现,不太了解这方面的可以认真看看,希望能对大家有帮助渲染系统众所周知vue框架是通过render函数将vue的template模板通过h函数解析成vnode(虚拟节点)慢慢变成了vdom(虚拟dom) 最后转换成真实元素,我们才能真正的在浏览器上看到。今天我们就来手动实现一个简单的渲染器,来探究探究其真正的原理。#mermaid-svg-90hPeR3U1UzJ9RvD .label{font-family:'trebuchet ms', verdana, a原创 2021-10-10 16:03:02 · 1123 阅读 · 0 评论 -
vue3中组件的v-model使用及详解
v-model input中使用双向绑定数据v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码:<template> <input type="text" :value="tryText" @input="handelInput"> <h2>{{tryText}}</h2>原创 2021-09-25 23:07:20 · 10519 阅读 · 5 评论 -
vue如何封装网络请求至原型上,便捷调用提高开发效率?
vue如何封装网络请求至原型上,便捷调用提高开发效率?在日常工作中,我们开发项目必然是要用的Ajax网络请求服务器的数据来开发项目,今天博主就给大家讲讲我在日常开发中如何封装的Ajax网络请求,怎样才能达到最便捷,大大提高我们的开发效率呢?废话不多说,直接进入主题文件结构我通常是建立一个 network文件夹 来看看文件结构吧这里面建立了一个modules模块文件夹,是为了存放我们的请求接口,根据不同的页面来配置不同的接口 例如首页接口 登录接口等等… 下面来看看各文件吧request.js 封原创 2021-07-11 19:26:11 · 472 阅读 · 0 评论 -
vue使用fomdata数据格式上传图片,实现头像上传功能
fomdata数据格式上传图片,实现头像上传功能直接上源码吧,不废话了布局上用到了element-ui的弹出框组件 大家有需要可以下载下<template> <div> <div class="content-table-account"> <table> <tr> <td class="account-name">头像</td> <原创 2021-06-26 20:23:44 · 308 阅读 · 0 评论 -
教你手把手,手撕vue3中的reactive ref
reactive ref 简单介绍Vue3.0中提供了两个可以创建响应式对象的函数,那就是 reactive 函数和 ref函数。ref 函数传入一个值作为参数,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改变和访问,都会被跟踪到,就像我们改写后的示例代码一样,通过修改 count.value 的值,可以触发模板的重新渲染,显示最新的值。reactive 则是 修改state.reactiveField的值简单说说它们的区别。1.写法不一样 ref偏向单独变量实现 reactive原创 2020-10-19 12:02:01 · 2010 阅读 · 1 评论 -
vue实现音乐平台项目
成果具体效果看B站视频演示;B站地址:视频演示github地址:项目源码码云地址:项目源码各位大佬,帮忙点个赞,投个币,star下,万分感谢大家!项目结构因为文件较多,我是通过截图然后注释上文字,图片有点多,想要了解的话可以私信我,或者b站也有联系方式。代码重要部分都详细注释解释了过程说说搭建过程吧,从无到有,感觉刚开始就得要有构思,先不急着做,先观察结构上布局,规划好路由的设置,有哪几个部分需要跳转,哪里是公共的,哪里是一直显示的,都要好好想想。刚开始的话还是要做出页面的大致布局。原创 2020-09-18 13:20:25 · 13695 阅读 · 17 评论 -
el-pagination 切换页数时,页码消失
el-pagination 切换页数时,页码消失最近用el-pagination请求数据时发现,请求过来的数据切换页码时,下面的页码不可选,即为空了。。。调试了一会才明白了问题所在问题所在问题的关键在于数据,因为我的总数是每次切换页码时都要请求一次,后面才发现除了第一次,后面的值都为undefined,即只有第一次数据中才有总数值,所以我就修改了只获取一次总数。总结请求总数时最好只在刚开始请求一次,后续数据中可能不存在,就会出现问题。...原创 2020-09-16 11:11:01 · 2436 阅读 · 1 评论 -
vue是怎么实现数据响应式的?
vue响应式原理介绍相信用过vue的都知道,vue中data中定义的数据会随着我们通过方法改变该数据的同时,页面上相关此数据的也会相应的刷新,实现响应式数据。可你知道它是如何实现这一功能的吗?下面让我们来了解了解它是如何做到这神奇操作的。1.Object.defineProperty 监听修改读取数据Object.defineProperty(obj, prop, descriptor) 可传入三个值,其作用是该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。第一个值原创 2020-08-29 21:25:46 · 4550 阅读 · 2 评论 -
如何用vue自己封装一个轮播图 移动端 pc端
vue封装一个轮播图结构结构布局和样式我就不多解释了 今天主要淦逻辑结构大致结构为如下样式如下 采用的是flex布局看看父组件传递的数据吧逻辑结构及原理实现这里定义一些下面要用的属性,和可传递的属性开始原理简单介绍:给数组前加原先数组最后一个 给数组后加原先数组第一个例如数组有4个 刚开始把第一张图片复制一份给数组最后加一个 把最后一张图片复制给数组第一项调整数组从 下标1 即第二个元素开始,并控制判断轮播是不是到了第一或者最后,是则取消过渡效果返回对应原数组的位置例如 到原创 2020-08-22 11:27:13 · 2309 阅读 · 9 评论 -
了解 vuex 配置中的state getters mutations 的作用
了解 vuex 配置中的state getters mutations 的作用state个人理解是存放公共数据状态 因为是定义在vuex上所以各个组件都能通过 $.store.state.数据名 的方式进行访问。 可以理解为vue实例对象中的 data使用:vuex中配置state组件中访问statestate值当然也具有响应式gettersgetters是对state对象的数据进行处理但是不会修改state中的数据 只是自身做出处理再输出第一个参数是state 就是 state对象原创 2020-08-20 10:22:56 · 330 阅读 · 1 评论 -
vue的组件中为什么data必须是一个函数?
组件中为什么data必须是一个函数如果不是函数如果组件中的data不是一个函数,首先vue是会报错的,因为它内部规范组件中的data必须是个函数。那为什么必须是个函数呢?大家接着看看既然它要求返回一个对象,那我们定义一个对象再给他返回行不行呢?而此时点击也有用功能也能实现但是,当我们需要对此使用此组件时我们可以发现,此时组件的数据是共享的,一个改变,其他也改变,很显然,我们开发组件就是希望使用时能自己的数据不和其他组件进行共享,这样很容易污染变量,造成数据紊乱。正确做法我们让d原创 2020-08-16 13:16:32 · 2802 阅读 · 2 评论 -
怎么用vue设置保护页面?(需要对应权限才可访问)
用vue设置保护页面(需要对应权限才可访问)我们在用vue开发时有些页面是需要进行保护的,等有了相关权限后才可以进行访问。举个例子,像个人中心这样的网页,如果我们不设置保护,那么用户不登录也可以通过网址的方式进行访问,这样就很不好了,所以我们今天来看看如何设置保护页面。路由配置既然要访问页面,当然得从路由先配置好地址了。我这里弄了三个页面,个人中心(myselif),另一个保护页面(stopCom),加载授权页面(coming)。因为个人中心和保护页面是需要进行额外加持防护的,所以我们给它一个特原创 2020-08-14 10:58:40 · 978 阅读 · 2 评论 -
怎么用Vue-Router实现多页面切换?
用Vue-Router实现多页面切换1.下载Vue-Router2.创建专属文件夹,文件夹里创建js进行配置config 配置mode网址显示的方式为正常的路径routes 配置各地址对应的组件 默认地址 ‘/’ 显示 主页组件若多个页面要用到同一个组件只是其中请求数据不同可在其后面加:id 不一定必须取id,可以自己定义'*'表示以上所有地址都未匹配到则执行404错误页面name 是为了 更好更精确的跳转到想要页面 如果只是path的话,改变path则将会找不到页面,而有了name之后,原创 2020-08-12 10:57:04 · 8211 阅读 · 3 评论 -
怎么用vue读取远程新闻API接口获取到数据?
用vue读取远程新闻API接口获取到数据准备工作1.你需要到阿里云注册阿里云地址2.注册完去这个新闻接口,购买1元1000条,也可实名后可享受免费100条,要不断调试的话100条很明显不够哦。新闻接口地址从这里查看购买的订单购买后记得保存一下需要的信息请求码新闻列表 请求地址及配置信息新闻频道 请求地址及配置信息开始获取接口和数据创建专门文件夹来进行配置和接口对接config里直接将请求码拿过来就行这里还要下载一个外部包 axios下载完在newsService原创 2020-08-12 10:22:34 · 1610 阅读 · 0 评论 -
vue-cli 3.0生成的项目run build后为空白页
vue-cli 3.0生成的项目run build后为空白页在根目录下创建vue.config.js加上这些配置module.exports = {publicPath: ‘./’,outputDir:‘dist’,assetsDir:‘static’};重新执行dun build原创 2020-08-09 18:35:03 · 1051 阅读 · 2 评论 -
怎么用vue编写一个拼图小游戏?
用vue编写一个拼图小游戏今天带大家用Vue完成一个拼图游戏的demo最终成果准备工作创建Vue项目,把需要的图片放在public目录下(图片最好是正方形的),父组件APP子组件sumImg,父组件引入子组件1.大致结构布局父组件只需引入对应子组件,再添加上想修改的属性,如果过多可以考虑用v-bind来进行包装,这样布局会更清晰一点。子组件需要根据关卡难度进行不一样的选择,所以这里很多属性是需要变化的,即通过父组件来传输的。还要注意的一点就是最后一块拼图是空白的,我们可以判断索引来给它原创 2020-08-09 10:13:41 · 3116 阅读 · 13 评论 -
数组常见的七个方法
数组常见的七个方法array.pop()pop() 方法从数组中删除最后一个数值,返回值为删除的数值,即最后一个数值;array.push()push() 方法(在数组末尾处)向数组添加一个新的元素,返回值为添加后的数组长度;array.shift()shift() 方法会删除首个数组数值,并把所有其他元素“位移”到更低的索引即补位前进,返回值为删除的首个数组数值。array.unshift()unshift() 方法(在开头)向数组添加新数值,并“反向位移”旧元素即补位后推,返回值为新数组原创 2020-08-05 19:55:24 · 1336 阅读 · 1 评论