![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
文章平均质量分 83
Holyzq
梦中写代码,痴迷于it编程,加油!更多实战功能请关注 “进哥爱编程” 微信公众号,大家一起交流学习吧!
展开
-
vue2+vant2+Laravel7 实现多图上传到七牛云
Vant2 实现多图上传至七牛云原创 2024-03-14 18:23:24 · 1055 阅读 · 0 评论 -
vue 前端面试题
所谓的虚拟DOM,其实就是用JS来模拟DOM结构,把DOM的变化操作放在JS层来做,尽量减少对DOM的直接操作。当数据有变化时,对比前后两次虚拟DOM的变化,只重新渲染变化了的部分,而没有变化的部分则不会重新渲染diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。原创 2022-09-05 22:11:25 · 723 阅读 · 1 评论 -
vue3 使用setup语法糖实现分类管理
直接在script标签中添加setup属性就可以直接使用setup语法糖了。使用setup语法糖后,不用写setup函数,组件只需要引入不需要注册,属性和方法也不需要再返回,可以直接在template模板中使用。本次模块使用实现一个新闻站的后台分类管理模块,其中新增、编辑采用对话框方式公用一个表单。...原创 2022-08-16 15:02:05 · 659 阅读 · 2 评论 -
vue3 快速搭建项目
此步骤省略,跟 vue2 的创建步骤一样,只是版本需选择 vue3 即可。原创 2022-08-15 13:38:49 · 498 阅读 · 0 评论 -
scroll-view 实现滑动分类
页面左侧显示分类数据,右侧显示每个分类对应的文章列表,点击分类名称,对应右侧文章内容切换显示。点击文章列表跳转到文章详情。最终页面效果如图:在 中页面效果如下1、在 中定义分类数据节点2、调用获取分类列表数据的方法3、定义获取分类列表数据的方法动态渲染左侧的分类列表1、循环出所有分类2、在 中定义默认选中项的索引3、循环渲染结构时,为选中项动态添加 类名4、为分类的 项绑定点击事件处理函数 5、定义 事件处理函数,动态修改选中项的索引动态渲染右侧的文章列表1、在 中定原创 2022-08-09 16:11:34 · 1006 阅读 · 0 评论 -
uniapp实现防抖搜索
用户的关键词还未输入完就已经多次请求了接口,显然是不合理的,要解决这个问题,需了解。防抖:每次用户输入关键词时,先清空定时器,再延时调用接口。原创 2022-08-05 16:01:32 · 387 阅读 · 0 评论 -
CLWY权限管理(六)--- 权限实现
此时页面都可以正常访问,但是终端会报如下错误,这是因为我们的路由是动态加载的,所以我们侧边栏的菜单也应通过循环出来。4、执行动态添加路由,修改。原创 2022-07-20 18:49:53 · 314 阅读 · 0 评论 -
CLWY权限管理(五)--- 用户登录
代码】CLWY权限管理(五)---用户登录。原创 2022-07-19 10:01:48 · 549 阅读 · 0 评论 -
CLWY权限管理(四)--- 菜单与权限模块
添加路由,在 新建 在 1、首先循环出所有菜单2、根据 字段值,点击切换级联菜单显示不同的表单原创 2022-07-17 20:37:41 · 438 阅读 · 0 评论 -
CLWY权限管理(三)--- 用户组模块
在 新建 在 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DmwFKNwH-1657874381925)(img.png)]新建 用户组列表新增 和 ,代码分别如下新增原创 2022-07-15 16:41:16 · 328 阅读 · 0 评论 -
CLWY权限管理(二)--- 用户模块
在 新建 在 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xkUoA52Z-1657870152821)(img.png)]新建 用户列表新增 和 ,代码分别如下新增原创 2022-07-15 15:31:31 · 297 阅读 · 0 评论 -
CLWY权限管理(一)--- 项目搭建
安装依赖添加环境变量新建 文件封装axios新增 文件配置全局过滤器新建 文件CSS 文件新建 文件新建 文件新建 文件新建 文件新建 文件新建 文件新建 文件布局模板新建 组件新建 组件新建 组件修改 文件最后一个文件修改 文件..................原创 2022-07-15 11:09:15 · 329 阅读 · 0 评论 -
vuex详解
在 中,组件之间共享数据的方式有:以上三种方案只适合在小范围内实现数据共享,如果我们要频繁的或者说在大范围内实现数据共享,那么就需要用到 了。是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享。画图使用 统一管理状态的好处一般情况下,只有组件之间共享的数据,才会必要存储到 中,对于组件中的私有数据,依旧存储在组件自身的 中即可。1、安装依赖包2、在 中导入3、创建对象,在 中4、将对象挂载到实例中,在 中上述步骤其实在我们创建项目的时候就已经完成了,这里只需了原创 2022-07-05 12:18:21 · 1529 阅读 · 0 评论 -
vue 实现前台用户登录
1、封装登录接口 api,新建 ,添加如下代码:2、准备登录路由,在 中添加登录的路由3、新建 组件并请求登录接口,添加代码:4、封装 拦截器,验证 在 中,全部代码:5、在 中,通过路由全局前置守卫和路由元信息设置访问权限。......原创 2022-07-01 17:00:10 · 1579 阅读 · 0 评论 -
组件拆分实战
我们以之前做的后台文章管理模块为例,实现组件拆分、组件之间互相传值、方法调用、代码封装等功能。在 里面新建 文件夹,用于存放我们拆分出来的子组件。1、在 里面新建 组件2、在 中拆分工具栏1、在 里面新建 组件2、在 中拆分搜索框1、在 里面新建 组件2、在 中拆分表格1、在 里面新建 组件2、在 中articleshandleSelectionChangehandleSizeChangehandleCurrentChangepagination原创 2022-06-22 19:13:42 · 408 阅读 · 0 评论 -
vue生命周期详解
从 vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期生命周期钩子:就是生命周期事件的别名,生命周期钩子 = 生命周期函数 = 生命周期事件1、创建期间的生命周期函数beforeMount:此时已经完成了模板编译,但是还没有挂载到页面中mounted:此时已经将编译好的模板,挂载到了页面指定的容器中显示2、运行期间的生命周期函数...原创 2022-06-21 12:21:00 · 473 阅读 · 0 评论 -
Vue.js 实现后台用户登录
1、封装登录接口 api,新建 ,添加如下代码:2、准备登录路由,在 中添加登录的路由3、新建 组件并请求登录接口,添加代码:4、封装 拦截器,前台验证 在 中,添加代码:5、判断是否登录,在 中修改代码:至此,前端验证 工作已完成,测试结果:未登录状态下,访问后台请求接口的页面是无法访问的。当用户登录成功后,即 值存在的情况下,可正常访问。但是我们会发现一个严重的问题,只要 值存在,不管对错与否,都能登录后台,这样用户就可以恶意篡改 的值,网站不安全!5、继续封装 拦截器,后原创 2022-06-07 16:26:52 · 1428 阅读 · 0 评论 -
Ubuntu系统部署Node.js接口项目
环境说明:我的系统是Ubuntu 18.04 64位,CPU&内存是1核2 GiB准备工作1、下载 node 源文件,我这里安装的版本是 v16.13.2。终端ssh连接上自己的服务器,执行下面的命令:curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - 2、安装node.js 和淘宝镜像sudo apt-get install -y nodejs# 查看node版本node -v # v16.13.原创 2022-03-11 15:09:35 · 5645 阅读 · 0 评论 -
Vue2 + ElementUI快速搭建后台
创建项目此处不做详细描述,请参考:项目创建添加环境变量新建.env.development文件VUE_APP_BASE_API = http://localhost:3000新建 .env.production 文件(根据项目需求,选择性创建)VUE_APP_BASE_API = https://api.xxx.xxx安装基础依赖yarn add element-ui axios moment全局过滤器新增 src/filters/index.js 文件import mome原创 2022-02-26 11:35:27 · 1485 阅读 · 0 评论 -
uni-app 实现手机端滑动导航栏
创建项目此步骤省略,不会的同学可以参看我的另外一篇文章:创建项目这里以一个微博首页为例,最终实现的页面效果图如下:样式准备1、在 pages/index/index.vue 文件中,添加如下代码:<template> <view class="content"> <scroll-view scroll-x> <view class="scroll"> <vie原创 2022-02-26 02:11:20 · 2697 阅读 · 2 评论 -
vue 小细节功能
Loading1、样式如图:2、在 src/components/shared 里面新建 Loading.vue 组件,里面添加如下代码:<template> <div class="loading"> <div><span></span></div> <div><span></span></div> <div><span><原创 2022-02-23 17:16:42 · 1440 阅读 · 1 评论 -
Vuex 购物车实战
1、在 新建 文件,写上 的基础格式2、在任意组件中拆分购物车组件在 中在 中在 中,部分代码如下刷新页面,能正常显示,终端无报错即可。1、在 里面获取购物车列表数据2、在 组件中3、在子组件 中渲染数据此时刷新购物车页面,如图1、给点击加减符号的按钮绑定事件,去触发 中的 函数。在 中2、在 中,打印一个 此时刷新购物车页面,分别点击加减按钮,看是否触发了 ,如图:3、继续修改 中的代码此时刷新页面,点击加减按钮,发现数据正常显示。由于我们没有对购物车底原创 2022-02-23 13:27:30 · 1442 阅读 · 0 评论 -
Laravel6.0 + vue.js + elementUI + 微信小程序 实现沃尔玛扫码购
本次项目使用 Laravel6.0 + vue.js + elementUI + 微信小程序 实现沃尔玛扫码购项目设计—接口本次项目所有接口使用 laravel 框架实现。项目设计—后台后台开发使用 laravel 集成 elementUI 模式,页面套用 elementUI 自带样式。后台模块有:1、实现后台登录,对接到前端 vue 页面2、购物袋管理:基本的增删改查,使用模态框实现3、上传图片:单独建一张表,用来存储所有图片,两种方法实现上传:使用插件,上传到七牛 (购物袋模块)原创 2020-05-27 07:45:07 · 2079 阅读 · 0 评论 -
如何使用React+Elementui搭建项目
基础准备工作由于React很多命令都是基于node.js才能运行,所以第一步要安装node。1、安装Node.js因为node.js更新很快,一般都推荐使用nvm来安装管理各个node.js版本。http://nvm.sh2、安装nvmcurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash3、验证是nvm否安装成功command -v nvm4、查看已发布的Node.js版本原创 2020-05-27 07:40:36 · 10170 阅读 · 0 评论 -
Laravel5.7如何集成Element-react实现简单的CURD
前言MVC 模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。MVC 的目的是实现一种动态的程序设计,便于后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能。除此之外,此模式通过对复杂度的简化,使程序结构更加直观。软件系统通过对自身基本部份分离的同时,也赋予了各个基本部分应有的功能。MVC 架构对于 PHP 开发者来说应该都不陌生,我们在日常的项目开发中所使用到的原创 2020-05-27 07:34:03 · 261 阅读 · 0 评论 -
Laravel6.0结合七牛云短信实现短信验证
前期准备登录七牛云官网: https://developer.qiniu.com/1、找到控制台–云短信–签名,新建签名,注意填写签名时不要填写模糊词语或者个人等词语,如果没有通过审核,客服会提示给你哪里错误,你就修改即可。2、找到模板,新建模板,选择验证码类即可。3、等待客服审核,一般半小时吧。4、之所以选择七牛云,是因为七牛给我们免费试用300条短信,所以不用花钱哦。创建项目la...原创 2020-03-17 19:17:59 · 981 阅读 · 0 评论