![](https://img-blog.csdnimg.cn/905e36b675e14ff9ba551c222ac1a282.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue学习之路
文章平均质量分 75
主要就是记录本人的学习过程,并且分享一些遇到的好的解决办法与思路
H-rosy
不断学习不断分享
展开
-
HTML中动态的增加和删除表格中的一行
利用HTML,CSS和JavaScript三种技术完成表格页面级的操作,具体内容如下:(1)利用HTML编写网页: “编号”、“姓名”、“性别”三个文本框,“添加”按钮,一个“学生信息表”表格;(2)利用CSS设置表格的样式:实线边框,文本居中;(3)运用JavaScript DOM技术实现表格增加和删除记录。页面效果如下:图1 初始界面图2添加记录图3删除记录<!DOCTYPE html><html l...原创 2022-05-15 21:39:41 · 12326 阅读 · 0 评论 -
基于JavaScript的HTML用户注册界面以及简单应用
二、实验内容创建用户注册页面文件register.html,界面如下图:2.新建JavaScript文件verify.js,对注册信息进行验证,各输入项的验证要求如图所示,若输入数据不符要求,显示红色提示信息。验证成功才能提交,否则不能提交。数据验证规则如下:①用户名由6-10位字母和数字组成,至少包含1个字母和1个数字;②年龄不能小于17岁;③密码由6-10位字符组成,至少包含1个字母、1个数字和1个特殊符号;④邮箱地址包含@字符。三、实验要求1.功能实现思...原创 2022-04-23 23:15:20 · 11715 阅读 · 1 评论 -
js中各种数据类型检测与判定
js中判定各种参数的数据类型。主要使用typeof与instanceof运算符判定在前端开发中,js 有各种各样的数据类型,数据类型检测是每个开发者都必须掌握基础知识。数据类型检测的方法也有很多种,本题将封装一个通用的数据类型检测函数。原创 2022-11-02 20:03:05 · 2236 阅读 · 4 评论 -
vue中input标签上传本地文件或图片后获取完整路径,如E:\medicineOfCH\stageImage\xxx.jpg
需求:使用input框来上传图片类型或者文件,并且在选择图片之后立刻回显出来,也就是获取完整路径。使用< input type="file"/>在选定图片后再< img src="xxx"/>。今天在实现这个需求的时候主要是出现了三个问题:- 如何获取文件完整路径- 如何选择文件后立刻回显图片- 什么时候获取完整路径和回显图片先来解决第一个问题吧。如何获取完整路径,我也在csdn上面看了挺多博客才解决的,但是我发现大多数都是不太清楚的,就是有些讲了但是没有解释,导致我看不懂,有些是无法实现功能。原创 2022-10-31 21:15:41 · 13458 阅读 · 6 评论 -
Vue Admin Template关闭eslint校验,lintOnSave:false设置无效解决办法
踩了很多坑的经验总结!!!!!解决Vue Admin Template中设置lintOnSave:false无法关闭eslint校验。因为在这个模板中不仅仅需要设置lintOnSave,还需要设置node_modules中文件夹中的package.json 文件。在我这篇博文中总共分为三步,解决你的问题!!!!!!!原创 2022-09-29 09:52:47 · 6976 阅读 · 12 评论 -
vue路由传参
今天介绍路由传递参数的方式。首先要明白路由跳转的两种方式一种是声明式导航另一种是编程式导航。主要介绍router-link和this.$router.push()原创 2022-09-12 09:14:22 · 4040 阅读 · 0 评论 -
Vuex之三连环
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态原创 2022-08-29 20:40:51 · 1436 阅读 · 1 评论 -
vue中使用swiper插件
OK今天给大家介绍一下vue2中使用swiper插件,以及在使用中需要的问题,比如说在使用时轮播图失效的情况的解决。由下图可以看到现在swiper已经更新到了8版本了,但是需要注意的是5以上的版本是为了vue3服务的,使用时多多少少会有谢问题。如果感兴趣的话可以看看官网的介绍。这里我先给出官网介绍的使用步骤,但是它是在html中使用的并且在vue2中使用也有点问题初始化:这里需要说明的是我这里是将轮播图组件Carousle单独抽离出来封装的。OK这里需要注意的是官网中最外层包裹轮播图的div的类名是swip原创 2022-08-16 23:03:32 · 9390 阅读 · 0 评论 -
vue中对axios的二次封装和节流与防抖
请求拦截器和响应拦截器- 请求拦截器:可以在发请求之前可以处理一些业务- 响应拦截器:当服务器数据返回以后,可以处理一些事情- 节流:在规定的时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。- 防抖:前面的所有触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行一次。.........原创 2022-08-09 17:24:28 · 1624 阅读 · 0 评论 -
vue项目学习笔记(input绑定回车事件、route和router的区别、路由组件传递props参数、编程式路由(参数不变),多次执行报错)
这是学习尚品汇前10集部分重要的笔记以及我新加的一些东西。涉及到了给input框绑定回车事件,router和route的区别,在路由组件中使用props传递参数的三种方式和Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search/xxhh?k=XXHH"................原创 2022-08-07 22:21:02 · 1600 阅读 · 0 评论 -
用js实现或者once事件修饰符保证按钮只能点击一次(用于提交数据或操作数据库时)
今天在使用添加按钮添加记录突然添加了好几条记录,把我都看呆了。今天我分享两种方法:使用@click.once实现button只能点击一次,适用于提交表单记录或者进行数据库的操作确定。自定义方法可以写下一个js文件中实现复用。这是参考一位大佬的文章,但是觉得在具体使用上不够小白,于是我就用自己的例子来演示一下下。.........原创 2022-08-05 21:30:44 · 6023 阅读 · 1 评论 -
vue2中创建项目以及使用各种第三方插件库
以下内容均为已经下载好了node.js和准备好了脚手架的基础上进行的操作,写这篇也只是为了自己创建新项目时知道步骤,可能对新手不太友好。。。。win+r导出命令服务后敲入cmd命令,下载:vue create 文件名。temptery报错:使用vue-router:取消eslint格式校验:使用element组件使用axios:使用less:使用nprogress:使用axios:使用vuex:使用mock.js:......原创 2022-08-03 18:43:54 · 1079 阅读 · 0 评论 -
vue2中使用echarts
大致使用步骤:1. 安装:npm install echarts -S2. 使用方式(三种) 1. 导入echarts在组件内使用 2. 导入全局 挂载原型上 全局使用 3. 开发成vue插件3. 使用 -main.js(在这里使用第二种) 1. import * as echarts from 'echarts' Vue.prototype.$echarts = echarts; 2. 直接使用 this.$echar...原创 2022-08-02 19:12:10 · 10113 阅读 · 1 评论 -
将数据库拿到的数据渲染到elementUI 中的table中去
将数据库拿到的数据渲染到elementUI 中的table中去,其实关键只有两点,一是你能够通过接口拿到数据库里面的数据,二是把你table里面的prop与数据库里面的字段名相等,就是把你想要那个参数展示哪个数据库里面的子段信息,你就把prop="字段名"...原创 2022-07-27 23:02:20 · 3146 阅读 · 0 评论 -
前端css基础
font-family字体一,字体二,字体三这样做的目的是因为有些浏览器不兼容一些字体,比如你的浏览器不兼容字体一,那么那就用二,如果也不兼容二,那么就用三。rgb(红,绿,蓝)根据比例来调节颜色rgba(红,绿,蓝,透明度)透明度取值范围为0-1当然opacity也可以设置透明度,取值范围也为0-1。H即为HUE,色相(H)是色彩的基本属性,如红色,黄色等;亲自组合A>B选中B,如果他是A的子元素section>p。后代组合AB选中B,如果他是A的子孙nava。...原创 2022-07-25 23:06:58 · 180 阅读 · 0 评论 -
vue中组件间通信(父子,子父,兄弟,跨两级通信)
因为今天正好看完哔站尚硅谷张天禹老师教的toDoList案例,然后里面就涉及到到了各种组件间的通讯方式,听的还是比较明白,因为在之前还没有系统的学习vue的时候就已经弄了一些简单的组件通讯案例,今天学习到了听到也懂的快,但是我还是觉得需要自己动手弄一下,果然,在今天我晚上弄的时候就是那种道理我都懂,但是实操起来是真的不知道怎么下手,。。。。然后果断的又返回去看了例子,最后弄了好一会才搞出来。好了直接上例子把,里面都有解释的~~~...........................原创 2022-07-20 22:58:44 · 878 阅读 · 0 评论 -
element ui+vue实现导航栏菜单以及页面跳转
关于博主:不知道算不算的上入门,就是刚刚学习vue框架,断断续续的学习,所以有些地方讲的不正确也欢迎大家批评斧正,希望与大家共同进步问题描述对于初学前端的我们来说搭建一个路由导航界面还是比较困难的,在这里给大家分享一下最近我学到的一些这方面的知识首先给大家看看效果图吧:写的就是一些很基础的东西,因为这主要是学习路由导航的搭建原理。下面这个代码就是router下的index.js文件,就是配置路由的地方,如果你对路由的注册还不太懂请戳这里import Vue from 'vue'impor原创 2022-06-24 23:14:46 · 11093 阅读 · 7 评论 -
vscode调试html总是出现固定的一个页面解决办法(launch.json的配置)
问题:在我创建的一个含有多个html的问价夹下面调试一个html代码,但是却总是出现另外一个html页面或者是上一个html页面。后来我检查我的laun.json页面才发现是我的配置出了问题,特此在此处记录一下,防止下次再出现这个问题又要浪费时间的找。问题根源它这里已经写死了所以你无论在哪个页面调试都只会出现这个页面的内容解决方法:既然这里是被写死了的(因为这个是默认配置,一般都需要自己调),所以我们现在就是要把它写“活”。配置代码如下{ .....原创 2022-05-29 23:42:03 · 2748 阅读 · 0 评论 -
vue通过父组件的点击方法改变子组件的值
前言:在这里首先得理解几个词的意思。1、父组件和子组件:就相当于在Java语言中一个类继承另一个类的意思,但是确实有点不同的,打个比方animal类被dog类继承,也就是说dog类是子类,animal类是父类,你在dog类中引入(继承)了animal类,父组件和子组件也可以这么理解,但是在vue中确是这样的,animal类被引入到dog类中,也就是dog引入了animal,那么dog就是父组件,animal就是子组件,dog拥有了animal,是和Java里面的概念相反的props:用于接收父组件传原创 2022-05-29 18:55:07 · 1320 阅读 · 0 评论 -
JSP动态网页技术
一 、实验内容创建JSP动态网页以及页面请求的处理二、 实验目的1、掌握JSP页面的基本结构和创建方法 2、 理解JSP页面运行机制 3、熟练掌握JSP中变量和方法的声明,脚本元素用法 4、理解JSP指令、动作和自定义标记的基本要点三、 实验过程1、使用 Eclipse 新建web工程,首先创建三个页面:登录页面(login.jsp)、登录成功页面(success.jsp)、登录登陆失败页(failure.jsp),再创建处理页面请求服务端程序(process.jsp)。原创 2022-05-28 10:17:34 · 448 阅读 · 0 评论 -
template报下面的错误
TypeScript intellisense is disabled on template. To enable, configure `"jsx": "preserve"` in the `"compilerOptions"` property of tsconfig or jsconfig. To disable this prompt instead, configure `"experimentalDisableTemplateSupport": true` in `"vueCompilerOp原创 2022-05-25 14:23:30 · 3551 阅读 · 8 评论 -
基于JavaScript的html简单动态删除或者添加元素简单应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l.原创 2022-05-14 23:11:57 · 634 阅读 · 0 评论 -
vue的index.js中注册路由(对于最初刚学vue的我很苦恼)
目录1、问题2、样例3、 导入路由的两种方式加载出来的样子:1、问题怎么让自己写的代码界面出现在浏览器上?我相信我这个问题对于刚学习vue的我们都很苦恼吧,毕竟也没有人教我们,完全是靠我们自学,经过我一段时间的摸索,终于让我明白了一点点,但是我觉得这一点点对刚刚学习前端的我们来说已经够了,后面的在慢慢来吧!2、样例样例那就直接那我现在inde.js中的路由来说吧。上面的图片就是我的路由路径,经过你浅浅的看一遍基本的结构都是差不多的吧,但是还是有...原创 2022-05-04 19:46:25 · 955 阅读 · 1 评论 -
vue的计算属性(和一点lable标签的使用)
计算属性可以减少模板中的计算逻辑,进行数据缓存,提高性能。更强大的属性声明方式,可以对定义的属性进行逻辑处理和数据监视。逻辑处理就是在计算属性内可以执行一些自己写的逻辑,数据监视就是计算属性内的返回值是依赖其他属性的变化而变化。计算属性和方法的区别:在每一次调用方法时都要重新计算,而计算属性不用,在使用计算属性时不需要加(),而调用方法时需要加(),具体可以看代码中的例子,计算属性时依赖其他属性的,当其他属性变化时才会触发,然后以函数的方式return结果;效果图:...原创 2022-05-04 18:58:57 · 3026 阅读 · 0 评论 -
vue搭建自己的第一个网页
当我们学会了如何初始化一个项目后,现在我们再来讲一下如何自己构建一个简单的页面。这些也是我正在学习的地方,于是就是简单的记录一下,有一些错误或者你觉得这个浪费时间那真的抱歉哈。项目目录介绍:在我这两天的学习中,我觉得去官网仔细阅读一下官方文档是十分有必要的,不要担心看不懂,那你只需要把网页翻译成为中文就好啦。官方网址建立项目:我们刚刚接触一般是将.vue文件建立在comment目录里面,在里面可以建立一个.vue文件,这里面默认会有一个HelloWorld.vue文件,你可以自己新建一个.原创 2022-05-02 00:06:53 · 498 阅读 · 0 评论 -
手把手教你如何搭建自己的第一个vue工程(vscode)
进入vscode首先打开一个文件夹,这个文件夹是你事先创建好的一个空文件之后再打开一个终端,选择新建终端最开始我选择的是使用命令vue create hello-world 但是它报了错误,是因为我的vue手脚架版本太低了,但是没关系,我们换另外一种方法然后我又使用另外一种方法vue init ELEMENTUI (这个elementUI是我事先创造的一个文件夹)但是还是报错了,于是我又换了一种方法,最终正确正确做法:使用命令...原创 2022-04-30 11:29:05 · 251 阅读 · 0 评论 -
npm ERR code 128npm ERR An unknown git error occurrednpm ERR command git --no-replace-objects l
安装 npm install时的错误提示npm ERR! code 128npm ERR! An unknown git error occurrednpm ERR! command git --no-replace-objects ls-remote ssh://git@github.com/nhn/raphael.gitnpm ERR! Warning: Permanently added 'github.com,20.205.243.166' (ECDSA) to the list of原创 2022-04-27 19:45:06 · 14702 阅读 · 7 评论