Vue
关注
分享
扫一扫
文章平均质量分 69
vue开发
碰磕
学无止境
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue项目开发常用工具类
项目常用到的工具类防止重复造轮子，将经常用的函数进行记录，也参考网上的并一起进行记录，后续会持续更新vue常用到的函数工具类方法😉😉。原创 2023-08-01 15:03:45 · 384 阅读 · 0 评论 -
前端自动化部署(Nodejs版)
前端手动化部署主要采用xshell与xftp实现，这里教会大家如何自动化部署项目，从而减少部署的繁琐操作原创 2023-04-28 10:30:57 · 564 阅读 · 1 评论 -
vue使用watch监听注意事项
watch监听常见问题解决方案或者使用监听函数，但我这里还是无法拿到this,这样就不能在里边调用别的方法咯。当监听多层级时需使用到，例如对象。网上都说将普通函数加上。原创 2023-03-24 11:02:29 · 378 阅读 · 0 评论 -
Pinia快速入门
Pinia学习 1.做什么用的❓ 2.优势❓ 3. 介绍❓ 3.1、与vuex对比 4.实操使用💪 版本须知 4.1创建项目 根据以上步骤即可创建成功 4.2运行项目 这样即可运行成功,开始使用pin原创 2023-02-14 11:44:43 · 509 阅读 · 0 评论 -
Slidev快速入门
Slidev 1.做什么用的❓ 2.优势❓ 3. 介绍❓ 3.1、功能 3.2、技术栈 4.实操使用💪 4.1创建项目 跟着指示一步一步往下走 4.2运行项目 运行即可打开一个幻灯片网站，这样表示创建成功原创 2023-02-13 15:34:50 · 1130 阅读 · 0 评论 -
vue中rem实现自适应
vue中rem实现自适应🚀安装完毕在main.js中引入🚀在index.html中添加meta标签🚀再安装第二个插件🚀更改配置在vue-cli3下,根目录中的 vue.config.js (没有，就新建一个)这样写代码时会自动转换rem单位进行自适应布局,输入自己合适的大小即可!这样就表示成功了🚀🚀🚀✌原创 2022-12-06 09:41:47 · 578 阅读 · 0 评论 -
Nuxt3最终篇【自定义插件与UI组件库的使用】
nuxt3使用elementplus并自定义插件 需要在根目录下创建plugins文件夹,nuxt会自动识别引用这里我创建了plugins文件夹—》testplug.tsimport {return {pengke :() => '认准碰磕Study' } } })使用该定义的pengke原创 2022-11-25 09:46:21 · 2981 阅读 · 1 评论 -
Nuxt3第一篇【安装与基本使用】
nuxt的基本安装与使用,让你了解nuxt3并且如何使用它原创 2022-10-24 11:01:54 · 3279 阅读 · 2 评论 -
vue实现酷炫可视化大屏
vue实现可视化大屏flexible的使用请自行参考网络上的文章,它是与rem做配合实现自适应的。这样就实现了,这里背景图用的是一个炫酷的视频,开发者可自行替换成自己的视频…引入VCharts以及flexible自适应布局的东西。采用vue-cli脚手架进行项目创建。首先看到上方目录结构进行主要分析。getTime.js工具类。原创 2022-09-15 17:56:14 · 6000 阅读 · 9 评论 -
前端美化库(持续更新)
前端插件前端界面美化实用的前端库以下美化库均由互联网上收集(持续更新…✌)原创 2022-09-05 15:38:03 · 1502 阅读 · 0 评论 -
leaflet+vue2实现地图交互
使用leaflet+Vue2实现地图交互,ui库用的antd-vue大概依赖如下：axios看是否数据需要从数据库获取，需要则安装即可！由于没有坐标相关信息,这里推荐一个东西可以手动弄数据geojson。是不是觉得自己又行了,hhhhhhhhh（有不懂的评论区问我🤭）使用该脚手架创建好项目默认有个HelloWorld.vue组件。由于自身对技术的追求便学习了下，我将为大家分享地图的基本使用。，原创 2022-09-03 11:55:39 · 2452 阅读 · 2 评论 -
PostCSS的使用
postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：1 . 使用下一代css语法2 . 自动补全浏览器前缀3 . 自动把px代为转换成rem4 . css 代码压缩等等。原创 2022-08-22 19:27:15 · 1126 阅读 · 0 评论 -
json-server【模拟后台接口】
该文章将教会大家了解json-server是什么，并且如何使用它2.编写一个JSON文件代码如下（示例）：db.json3.运行去到该json文件目录下三、使用命令1.GET获取数据代码如下（示例）：2.POST添加数据3.put修改数据(全部更新)例如:4.patch修改数据(局部更新)例如:5.delete删除数据代码如下（示例）：6.多表联查(关系)7.分页8.排序更多使用方法可查阅官方文档:https://www.npmjs.com/p原创 2022-07-13 11:59:30 · 1046 阅读 · 0 评论 -
BootStrap5快速入门
BootStrap5快速入门BootStrap5快速入门引入1.容器2.网格系统3.文字排版标签Display 标题类smallmarkabbrblockquotecodekbd4.颜色5.表格6.形状7.消息提示8.按钮9.徽章10.进度条11.加载12.分页13.列表组14.卡片15.下拉菜单16.手风琴17.导航18.轮播19.模态框(信息交互)20.提示框21.回到顶部----------------总结练习实战效果图BootStrap5快速入门本教程只记录部分常用的官方文档请前往官网:[简原创 2022-04-07 16:18:07 · 3113 阅读 · 5 评论 -
Vuex的使用详解
Vuex1、安装2、准备示例组件3、使用2.1----访问共享数据(state)方案一(不推荐)方案二(推荐)效果图2.2----修改共享数据(mytations、actions)方案一(不推荐)方案二(mutations)优化(使用辅助函数)效果图方案三(actions)优化(使用辅助函数)效果图2.1----过滤共享数据(getters)示例优化效果图1、安装npm i vuex2、准备示例组件add.vue<template><div> <h3>原创 2022-03-29 11:44:58 · 1243 阅读 · 0 评论 -
VueCLI中使用Element-UI
Vue中使用Element-UI组件Element-UI安装命令行安装使用效果图UI界面安装使用效果图vue.config的配置Element-UI一个与vue配合的UI框架官网:https://element.eleme.cn/#/zh-CN安装可以命令行安装,也可以UI界面安装命令行安装npm i element-ui -S使用在入口文件main.js中加入import ElementUI from 'element-ui'import 'element-ui/lib/t原创 2022-03-17 19:13:07 · 2199 阅读 · 0 评论 -
vue-cli脚手架的安装与使用
VueCLI脚手架1、安装1.1----安装插件1.2----安装脚手架测试是否安装成功2、使用2.1----创建项目使用图形界面(推荐)使用命令行创建2.2----运行项目3、项目结构3.1----项目大致图3.2----目录说明练习实现效果图1、安装1.1----安装插件vscode插件(vue代码提示)vetur1.2----安装脚手架npm install -g @vue/cli测试是否安装成功vue -V打印版本号即安装成功~2、使用官网:https://cli原创 2022-03-16 11:39:44 · 1340 阅读 · 0 评论 -
Vue中路由实现后台管理系统
案例实现准备引入vue-router与vue编写样式实现HTML编写创建组件1、创建后台管理系统组件2、创建用户管理区域组件2.1、 创建二级详情页面组件3、 创建权限管理组件4、创建商品管理组件5、创建订单管理组件6、 创建系统设置组件创建路由对象并且进行挂载效果图图1图2(详情页)准备引入vue-router与vue必不可少:安装好vue-router引入vue-router和vue编写样式html, body, #app { marg原创 2022-03-15 11:32:19 · 4533 阅读 · 4 评论 -
Vue路由的使用详解
路由1、锚点实现前台路由1.1----效果2、Vue实现前台路由2.1----准备2.2----使用效果3、嵌套路由3.1----使用3.2----效果图4、动态路由4.1----路径带参使用效果图4.2----props传参使用效果图4.3----混合传参使用效果图1、锚点实现前台路由通过onhashchange事件关键组件标签:component 用于替换组件:is为替换组件名的变量<div id="app"> <!-- 切换组件的超链接 -->原创 2022-03-14 12:43:30 · 3543 阅读 · 0 评论 -
Vue插槽的详解与使用
🌼注:在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。用于替换solt标签的内部文本内容目录普通插槽语法示例效果图具名插槽语法示例效果图作用域插槽语法示例效果图终极练习实现一个购物车.....做法效果图插槽的关键词:slot普通插槽标签内部会代替slot标签的内容语法在template内.原创 2022-03-09 12:01:23 · 1101 阅读 · 0 评论 -
Vue中组件兄弟之间如何进行传参
做法两个组件,通过点击其中一个组件改变另一个组件的值🚀【第一步：编写HTML网页】 <div id="app"> <h1> 兄弟间传值 </h1> <one></one> <two></two> </div>🚀【第二步：创建事件中心】//事件中心[桥梁]var hub=new Vue();🚀【第三原创 2022-03-08 11:42:27 · 823 阅读 · 0 评论 -
Vue中的组件如何使用
组件1、组件参数的data值必须是函数2、组件模板必须是单个跟元素3、组件模板的内容可以是模板字符串’注意事项’如果使用驼峰式命名组件,那么在使用组件的时候,只能在模板字符串中使用驼峰命名法在普通的标签模板中,必须使用短横线的方式使用组件全局组件局部组件Prop传递数据练习全局组件关键词:component语法: Vue.component('组件名称',{ data:function(){ return{原创 2022-03-08 08:15:34 · 1784 阅读 · 0 评论 -
【前后端分离练习】nodejs+Vue+mysql实现图书管理系统
陈述前端采用Vue进行数据显示后端采用NodeJs进行逻辑处理,传递数据数据库使用mysql功能实现了增加图书修改图书查询图书删除图书模糊查询效果展示可增加、可删除、可修改、可模糊查询…由于不能放视频，只能展示个页面功能实现前端代码处都写了注释,我就不一一解释了…<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m原创 2022-03-07 08:22:47 · 3189 阅读 · 10 评论 -
Vue中数组的变化
目录❀改变原数组的方法❀不改变原数组的方法❀动态修改数组改变原数组的方法push()增加pop()移除末尾元素等等…示例html<div id="app"> <ul> <li v-for="item,k in list">{{item}}</li> </ul> <input type="text" v-model="mess"原创 2022-03-05 08:47:31 · 1061 阅读 · 0 评论 -
Vue的生命周期
Vue的生命周期通俗说就是Vue实例从创建到销毁的过程，就是生命周期8个beforeCreate创建前–>created创建完成–>beforeMount挂载前–>mounted挂载完成–>beforeUpdate更新前–>updated更新完成–>beforeDestroy销毁前–>destroyed销毁完成beforeCreate(创建前)组件的选项对象还未创建，el 和 data 并未初始化,所以什么也没有created(创建完成)原创 2022-03-04 08:48:12 · 296 阅读 · 0 评论 -
Vue2中过滤器的使用
目录过滤器(无参)过滤器(有参)过滤器关键词:filter可用与插值表达式和属性绑定支持级联操作过滤器(无参)下面我将用代码演示过滤器可与插值表达式和属性绑定并且支持级联操作 <div id="app"> <h3>{{msg|upper|high}}</h3> <h2 v-bind:info="msg|upper">属性测试</h2> <input t原创 2022-03-03 16:40:30 · 612 阅读 · 0 评论 -
Vue2中的计算属性和侦听器的使用
目录计算属性侦听器计算属性与侦听器的区别计算属性关键词:computed用于通过计算改变原数据得到想要的数据效果示例1示例两个1、反转字符串2、首字母大写 <div id="app"> <h1>计算属性:{{msg}}</h1> <h1>{{msg2}}</h1> <!-- 首字母大写,其余小写 --> <!-- to原创 2022-03-02 11:51:37 · 360 阅读 · 0 评论 -
Vue2中与Element UI表单的使用
前言为了使界面表单更优美,我用上了ElementUI中的表单,普通表单与UI表单用法大致相同,我只是为了界面更好看,更贴近项目开发应用本篇文章会讲解"表单中组件数据的获取"，“表单中的修饰符”,“自定义指令”,“计算属性”话不多说,步入正题~🤭引入Element UI<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">&原创 2022-03-02 11:14:35 · 1012 阅读 · 1 评论 -
Vue2利用分支、循环、属性样式绑定实现选项卡图片切换
课前准备带领大家学习分支(if、else)、以及循环(for)至于属性与样式绑定在上一篇文章已经讲解分支循环实现选项卡分支(if、else if、else)主要指if、else if、else如何使用顺便把show指令学习以下show=true，则显示,反之隐藏<h1>分支 if elseif</h1> <div id="app"> <div v-if="score>=90">优秀</d原创 2022-03-01 11:41:14 · 997 阅读 · 1 评论 -
Vue2中的事件处理
事件处理事件处理方法事件修饰符按键修饰符属性绑定事件处理方法所用指令:v-on:事件类型="事件名称“缩写:@事件类型=“事件名称”-----示例-----v-on:click="show"//绑定点击事件@click="show"下方示例所需要的vue对象⭐新增methods属性,里边是放函数方法的var vm=new Vue({ el:'#app', data:{ num:0 },原创 2022-02-28 11:59:30 · 1035 阅读 · 0 评论 -
Vue2----安装与使用常用指令
目录Vue2的安装Vue2的语法常用指令Vue2Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。官网:https://cn.vuejs.org/语法app不能挂载到body,html上el 元素挂载位置data 模型数据,可多个{{}} 插值表达式(有运算功能)vue执行原理??vue----框架原创 2022-02-26 19:00:28 · 678 阅读 · 0 评论