web前端(H5)
文章平均质量分 81
被开发耽误的大厨
10多年开发经验,创过业也在其他创业公司工作过,也在同方威视、联想集团等知名大厂工作过,为人谦虚谨慎,对待工作一丝不苟。有JavaEE后端、Android原生开发、Web前端开发(H5)、混合开发、web app、ios开发的经验,涉及音视频、社交、ai人脸识别、安检安防、电商等多方面的项目。现如今花几百万大洋被套牢,北京大龄程序猿房奴一枚,一直在路上。。。最近大部分博文专栏都免费了,将更专心更文,将更新更多数据结构、算法、源码系列文章,并整理《博客导航目录》,我是。。。的大厨,大家一起加油!
展开
-
vue element-ui 限制文件大小不超过多少M
目录无效方式有效方式参考链接注:项目需求为10M,这里是以5M文件为案例,方便测试! <el-upload :disabled="addEditDisabled.disable" class="upload-demo" :on-preview="handlePreview" style="display: in...原创 2022-03-01 14:52:21 · 3161 阅读 · 0 评论 -
React笔记整理回顾:2、React安装、实例解析、快速构建、尝试修改
目录React 安装使用实例实例解析cnpm 代替默认的 npm,通过 cnpm 使用 React使用 create-react-app 快速构建 React 开发环境快速创建项目项目的目录结构尝试修改 src/App.js 文件代码React 安装React 可以直接下载使用,下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 16.4.0,你可以在官网https://reactjs.org/下载最新版。你也可以直接使用 Staticfi..原创 2020-10-14 01:07:50 · 203 阅读 · 0 评论 -
React笔记整理回顾:1、React 教程
目录React 教程React 特点阅读本教程前,您需要了解的知识React 第一个实例1、关键代码2、运行结果3、具体代码React 教程React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越原创 2020-10-13 15:34:40 · 242 阅读 · 0 评论 -
Vue笔记整理,08.项目-整理出一个基本的项目模板
当我们开始做项目的时候原创 2020-07-14 22:52:39 · 159 阅读 · 0 评论 -
Vue笔记整理,12.项目-完成tabbar的小图标设置
一、前言上一节我们介绍了:vs code工具的一些特殊使用,使用vs code默认集成的Git工具快速提交代码,详细可参考博文:原创Vue笔记整理,11.项目-使用vs code默认集成的Git工具快速提交代码这篇我们将介绍项目-完成tabbar的小图标设置二、完成tabbar的小图标设置更新中。。。...原创 2020-07-14 14:11:05 · 1011 阅读 · 0 评论 -
Vue笔记整理,11.项目-使用vs code默认集成的Git工具快速提交代码
一、前言上一节我们介绍了:项目基础配置、把本地项目托管到 gitee 码云中,详细可参考博文:原创Vue笔记整理,10.项目-把本地项目托管到 gitee 码云中 这篇我们将介绍 使用vs code默认集成的Git工具快速提交代码更新中。。。...原创 2020-07-13 15:08:55 · 324 阅读 · 0 评论 -
git实战笔记系列:生成 ssh 公钥,查看获取放到github或gitee上面
一、第一次生成新的SSH key1、网络参考bogon:~ luminal$ cd .ssh/ 检查本机的ssh公钥bogon:.ssh luminal$ ls -a 查看当前目录文件. .. known_hosts$ ssh-keygen -t rsa -C "你的邮箱地址" 如:ssh-keygen -t rsa -C "luminal@163.com"Generating public/private rsa k...原创 2020-07-06 16:13:05 · 649 阅读 · 1 评论 -
Vue知识整理,10.项目-把本地项目托管到 gitee 码云中
在公司都是团队开发,下面我们来介绍下git代码管理工具首先,我们需要创建几个文件1、.gitignore 项目忽略文件我们在项目中像 node_modules 这些文件没必要上传到,我们的源代码仓库当中node_modules 项目依赖文件,体积比较大.idea 它是一个文件夹,里面放了你自己webstorm工具相关的配置,如快捷键等,每个人都不一样.vscode 这个类似.idea,它是VScode工具相关的配置.git 存了一些版本信息,也没必要上传.DS_S....原创 2020-07-06 15:23:54 · 1647 阅读 · 0 评论 -
Vue笔记整理,09.项目-制作项目首页的Header和Tabbar区域
09.项目-制作项目首页的Header和Tabbar区域步骤1:在项目根组件 App.vue 里面,分三部分第一部分:<!-- 顶部 Header 区域 -->第二部分:<!-- 中间的 路由 router-view 区域 -->第三部分:<!-- 底部 Tabbar 区域 -->步骤2:App.vue 展示到页面上1、在 index.html 的容器里面,需要把App.vue 放进去2、在 main.js 里面 ,...原创 2020-07-03 20:21:06 · 419 阅读 · 0 评论 -
前端知识点复习之快速熟练上手篇章
1、理解 javascript:void(0)javascript:void(0):我们可暂时理解为,停留在原地,一动不动,我们称之为“死链接”可详细的解释,可参考博文:javascript:void(0) 含义【推荐】javascript:void(0);用法及常见问题解析【推荐】https://www.cnblogs.com/duxiu-fang/p/11104735.htmljavascript中void(0);用法及常见问题解析2、alt 属性alt 属性是一..原创 2020-06-27 10:27:45 · 207 阅读 · 0 评论 -
Vue笔记整理,让你快速入门Vue.js:03_9.本地应用:图片切换
在第一张和最后一张图片的时候,我们分别隐藏左边和右边的箭头。点击切换图片,其实本质是切换 img 标签的 src 属性值显示隐藏箭头,其实本质是操纵 a 标签的 display图片的个数有很多个,我们可以使用数组,数组的取值我们结合索引。并且使用数组,我们可以非常便捷的判断,是否为第一张或是最后一张。我们只需判断索引的值和数组的长度大小即可。属性用什么操作?在 Vue 中,我们可以使用 v-bind 指令,a 标签在点击的时候,要执行逻辑,事件绑定用 v-on 指令。...原创 2020-06-27 09:06:00 · 315 阅读 · 0 评论 -
Vue笔记整理,让你快速入门Vue.js:04_5.网络应用:(项目)天知道-点击查询
点击事件我们可以通过 v-on 指令进行绑定,修改文本框的值,本质就是修改 v-model 绑定的 data 中的数据的值。而天气查询的逻辑,和回车查询是完全一样的。只是我们需要点击来改变城市名,所以这里我们可以使用事件自定义参数,让代码更加的的灵活。查询数据和渲染数据我们在上一节回车查询已经实现过了,这里我们只需考虑如何的复用就行?类似于 data 中数据的使用,通过 this 关键字就可以啦,定义在methods 中的方法,我们也可以通过 this 关键字给点出来,加上括号...原创 2020-06-24 09:46:07 · 274 阅读 · 0 评论 -
Vue笔记整理,让你快速入门Vue.js:04_4.网络应用:(项目)天知道-介绍-回车查询
一、前言上一节我们介绍了axios+vue的基本使用,其中接口的调用步骤、数据的获取方式都和我们之前开发步骤类似,需要注意的是 axios响应成功的回调函数中,this改变了,我们需要提前保存,然后使用保存的那个值就可以了。那么如果逻辑再复杂一些呢?咱们这一节就来学习一个网络应用:天知道天知道 是一个查询天气的应用,应用的核心是查询天气,那么怎么查询呢?二、实例代码验证1、实现思路@keyup.enter 监听回车键更新中。。。...原创 2020-06-19 18:17:13 · 549 阅读 · 0 评论 -
微信小程序学习笔记——6、⼩程序结构⽬录
5. ⼩程序结构⽬录 ⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ,以及 JavaScript ,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。 ...原创 2020-06-12 16:34:19 · 265 阅读 · 0 评论 -
Vue框架项目实战整理:7、Vue项目搭建:使用vue-cli(vue脚手架)快速搭建项目——回顾快速版
目录1、查看 vue命令是否可用设置使用指定版本的node再次查看 vue命令是否可用2、创建项目模板3、执行 npm install 命令4、npm run start 启动项目1、查看 vue命令是否可用$ vuebash: vue: command not found记得之前 vue-cli脚手架构建工具,都是安装好的。Vue框架项目实战整理:2、Vue项目环境搭建(有图有真相)然后想起之前安装了nvm,对node版本的管理。设置使用指定版本.原创 2020-06-11 15:49:56 · 1149 阅读 · 0 评论 -
微信小程序学习笔记——5、微信开发者工具介绍
4. 微信开发者⼯具介绍 详细的使⽤,可以查看官⽹原创 2020-05-28 17:35:53 · 507 阅读 · 0 评论 -
微信小程序学习笔记——4、第一个微信小程序
3. 第⼀个微信⼩程序 3.1. 打开微信开发者⼯具 注意 第⼀次登录的时候 需要扫码登录3.2. 新建⼩程序项⽬原创 2020-05-28 16:58:42 · 205 阅读 · 0 评论 -
微信小程序学习笔记——3、微信小程序的环境准备
目录2. 环境准备2.1. 注册账号2.2. 获取APPID2.3. 微信小程序开发⼯具2. 环境准备 开发微信⼩程序之前,必须要准备好相应的环境。它不同于之前开发一个网页,使用代码编辑器和浏览器,就可以完成代码的编辑、页面的预览、代码的调试等。现在我们是开发微信小程序,就必须遵守腾讯公司所制定的规范。2.1. 注册账号 建议使用全新的邮箱,没有注册过其他小程序或者公众号的。访问注册⻚⾯,耐⼼完成注册即可。这里就不做过多介绍了2.2. ...原创 2020-05-28 11:53:37 · 424 阅读 · 0 评论 -
微信小程序学习笔记——2、微信小程序介绍
目录1、微信小程序介绍1.0. 产品定位及功能介绍1.1. 为什么要学习微信⼩程序 ?1.2. 微信⼩程序历史1.3. 疯狂的微信⼩程序(取得哪些成绩)1.4. 还有其他公司的⼩程序(不容忽视)1.5. 体验1.5.1. 官⽅微信⼩程序体验(可扫一扫)1.5.2. 其他优秀的第三⽅⼩程序(体验)1、微信小程序介绍微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/introduction/1.0. 产品原创 2020-05-27 18:43:17 · 450 阅读 · 0 评论 -
微信小程序学习笔记——1、学习内容介绍
目录内容介绍小程序基础小程序项目(电商实战)内容介绍主要内容分为两大部分1、小程序基础2、小程序项目(电商实战)小程序基础1、小程序的前世今生也就是它的历史信息2、小程序自带的开发者工具3、小程序的原生框架:mina框架4、小程序里面最为常用的模板语法5、小程序中的内置组件以及标签6、小程序的应用以及页面的生命周期7、小程序的自定义组件8、其他。。。小程序项目(电商实战)...原创 2020-05-27 17:14:22 · 328 阅读 · 0 评论 -
Vue知识整理-总结梳理篇:快速入门系列、专题系列、企业项目实战系列
目录一、前言二、Vue快速入门系列1、Vue基础2、本地应用:常见指令3、网络应用:axios三、Vue专题系列1、路由的使用四、其他系列一、前言最近花一些时间,把自学前端 Vue框架的印象笔记内容,发布到我的 csdn博客上与大家分享,为了方便查看做一个梳理小结,之后会继续更新。。。你的支持是我的动力,感谢大家的支持!二、Vue快速入门系列1.........原创 2020-04-01 12:00:36 · 1523 阅读 · 2 评论 -
Vue知识整理,专题之路由:8、路由-命名视图实现经典布局(放多个路由组件、实现多视图)
一、前言上一篇文章我们介绍了路由-使用children属性实现路由嵌套,详细可参考博文:原创Vue笔记整理,专题之路由:7、路由-使用children属性实现路由嵌套,这篇文章我们将介绍:路由-命名视图实现经典布局。二、路由-命名视图实现经典布局正在更新中。。。......原创 2020-03-30 13:11:20 · 1054 阅读 · 1 评论 -
Vue知识整理,专题之路由:7、路由-使用children属性实现路由嵌套
一、前言上两篇文章我们介绍了路由的传参:使用query方式传递路由参数、使用params方式传递路由参数,其中两种方式都没问题,大家根据个人习惯使用即可。详细可参见博文:原创Vue笔记整理,专题之路由:5、路由传参-使用query方式传递路由参数原创Vue笔记整理,专题之路由:6、路由传参-使用params方式传递路由参数这篇文章我们将介绍:路由-使用children属性实现路......原创 2020-03-30 00:10:26 · 4251 阅读 · 0 评论 -
Vue知识整理,专题之路由:6、路由传参-使用params方式传递路由参数
一、前言上一篇文章我们介绍了路由传参-使用query方式传递路由参数,详细可参考博文:原创Vue笔记整理,专题之路由:5、路由传参-使用query方式传递路由参数这篇博文我们将介绍:路由传参-使用params方式传递路由参数二、使用params方式传递路由参数更新中。。。......原创 2020-03-29 14:46:52 · 5181 阅读 · 0 评论 -
Vue知识整理,专题之路由:5、路由传参-使用query方式传递路由参数
目录一、前言二、路由传参-使用query方式传递参数1、路由实例简约版,router挂载简写2、使用query方式传递参数(1)router-link 标签 to属性添加参数 id,不需要修改 路由规则的 path 属性(2)怎么在组件内部拿到这个参数id(3)怎么把 id的值 放到 h1标签里面3、使用query方式传递多个参数4、最终修改后的代码***5......原创 2020-03-29 13:59:44 · 6939 阅读 · 2 评论 -
Vue知识整理,专题之路由:4、路由redirect重定向的使用-设置默认页面、设置选中路由高亮的两种方式
一、前言上一节我们介绍了路由-路由(vue-router)的基本使用、router-link的使用,详细可参考博文:原创Vue笔记整理,专题之路由:3、路由-路由(vue-router)的基本使用、router-link的使用这篇文章我们将介绍:路由-路由redirect重定向的使用、设置选中路由高亮的两种方式二、路由-路由redirect重定向的使用1、设置默认页面我们以上篇......原创 2020-03-28 15:20:44 · 11413 阅读 · 0 评论 -
Vue知识整理,专题之路由:3、路由(vue-router)的基本使用、tag属性和router-link的使用
一、前言上一篇博文我们介绍了路由-安装vue-router的三种方式,详细可参考博文:原创Vue笔记整理,专题之路由:2、路由-安装vue-router的三种方式,这篇博文我们将介绍路由-路由的基本使用。可参考的官方文档:https://router.vuejs.org/zh/guide/二、路由的基本使用:登录和注册1、实例代码验证......原创 2020-03-27 12:42:10 · 3292 阅读 · 0 评论 -
使用vscode快速创建vue模板
第一步:找到html.json 文件进入vscode界面,使用快捷键 command+shift+p 或如下图操作也行,然后搜索html.json注意:使用快捷键 command+shift+p,默认会有一个大于号,记得删除掉,然后输入html.json 进行搜索第二步:打开修改 html.json 文件打开默认为如下内容{ // Place your sni...原创 2020-03-26 15:06:59 · 1141 阅读 · 0 评论 -
Vue知识整理,专题之路由:2、路由-安装vue-router的三种方式
目录前言安装#直接下载 / CDN#NPM#构建开发版安装说明第一种方式:直接下载 / CDN(在网页里面直接进行开发)第二种方式:NPM(通过webpack这种构建工具来开发)第三种方式:构建开发版前言上一节我们介绍了前端路由和后端路由的概念以及区别,详见博文:原创Vue笔记整理,专题之路由:1、路由-前端路由和后端路由的概念这篇我们将介绍如何安装......原创 2020-03-26 13:28:15 · 671 阅读 · 0 评论 -
Vue知识整理,专题之路由:1、路由-前端路由和后端路由的概念
这篇博文我们将进行vue里面的路由学习,在开始之前我们先了解一些概念。什么是路由 **后端路由:**对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;(如:对于一个正常的网站来说,网站前端里面我们所能看到的任何资源,都要通过URL地址,从后台服务器拿,那么后台服务器肯定能接收到或者监听到每次请求中的URL地址,那么这个URL地址我们要返回什么样的资源给......原创 2020-03-26 02:23:14 · 1051 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:04_3.网络应用:axios+vue结合使用
上一节我们介绍了axios的基本使用,相比于原生的ajax,它提供的方法用起来会更加的简便,那网络数据其实现在已经可以顺利获取到了,那么它如何和Vue一起使用呢?我们这一节就来介绍axios加vue更新中。。。。......原创 2020-03-24 18:35:23 · 414 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:04_2.网络应用:axios基本使用(get/post请求语法)
上一节我们介绍了本章要学习的内容,对于接下来要介绍的知识点应该有了基本的概念,这一节我们将介绍axios的基本使用、介绍它是如何来发送请求以及获取响应的内容。一、axios语法介绍作为一个JS库,为了使用它,首先我们需要导包,这里提供官网给的在线地址,在保证联网的状态下,把这段代码拷贝在页面上就可以使用了。在导入axios包之后,会在页面上注册一个全局的axios对象,通过它就可以来发......原创 2020-03-24 18:25:17 · 587 阅读 · 0 评论 -
Vue笔记整理,让你快速入门Vue.js:04_1.网络应用:介绍
上一章我们介绍了Vue本地应用,通过Vue提供的各种指令,对本地的数据进行操作。但是现在很少有纯本地的应用了,或多或少都会进行网络数据的交互,所以这章我们要介绍的是Vue网络应用,介绍Vue当中如何结合网络数据进行应用的开发。首先我们会介绍Vue里面一个最流行的网络请求库axios,它的内部还是ajax,但是封装之后使用起来更为便捷,并且因为功能单一就是发送请求,所以容量很少,...原创 2020-03-24 10:10:15 · 199 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:03_12.本地应用:v-model指令
目录一、v-model指令语法介绍二、实例代码演示1、实例代码2、效果展示三、内容-总结上一节我们对 v-on指令进行了补充的讲解,知道了它更多的用法,但是无论使用哪一种,都是在代码中预先定义好的内容。一、v-model指令语法介绍而我们在 web 开发中,经常需要去获取用户的输入,这也是我们这节所学的内容:v-model指令它可以十分便捷的把表单元素的值和实......原创 2020-03-23 01:42:56 · 259 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:03_11.本地应用:v-on指令补充(传递自定义参数、事件修饰符)
目录一、v-on指令补充1、传递自定义参数2、事件修饰符二、实例代码验证1、v-on指令_传递自定义参数(1)实例代码(2)效果展示2、v-on指令_事件修饰符(1)实例代码(2)效果展示三、内容-总结上一节我们学习了用来生成列表结构的v-for指令,其中配合v-on指令实现了数据的增删,但是增删的逻辑是固定的,如果我们希望在执行逻辑的时候传递额外的......原创 2020-03-22 23:38:10 · 429 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:03_10.本地应用:v-for指令(根据数据生成列表结构)
目录一、v-for 语法介绍1、v-for指令_普通数组2、v-for指令_对象数组二、代码验证测试1、v-for指令之数组(1)实例代码(2)效果展示2、v-for指令之对象数组_结合其他指令(1)实例代码(2)效果展示3、v-for指令之对象数组_添加删除(1)实例代码(2)效果展示三、内容-总结上一节我们介绍了图片切换的案例,对前面......原创 2020-03-22 19:58:40 · 919 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:03_8.本地应用:v-bind指令(为元素绑定属性)
目录一、v-bind 语法介绍1、 img标签 的固定写死的写法2、使用 v-bind 定义img标签 src、title、class 属性3、v-bind的简写写法二、代码验证测试1、v-bind指令之img_src_title(1)实例代码(2)效果展示2、v-bind指令之img_class属性(1)实例代码(2)效果展示三、内容-总结上一......原创 2020-03-22 16:34:02 · 466 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:03_7.本地应用:v-if指令(条件判断-显示状态-操作dom元素)
目录一、指令v-if的语法介绍二、指令 v-if 代码验证测试1、实例代码2、效果展示三、代码演示 v-show 和 v-if 的区别1、实例代码2、效果展示四、内容-总结上一节我们学习了v-show指令,一个通过操作display来切换元素显示状态的指令,但是在View中我们并不仅仅就这一个指令来操作元素的显示状态,这一节我们将来学习另外一个类似的指令v-if......原创 2020-03-22 09:37:46 · 1332 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:03_6.本地应用:v-show指令(条件判断-显示状态-img)
目录一、v-show指令语法介绍第一种写法:硬编码。第二种写法:data中定义属性变量。第三种写法:支持写表达式。二、实例验证测试1、实例代码2、效果展示三、内容-总结上一篇文章我们介绍了计算器这个案例,重点是巩固在Vue中:如何进行内容的绑定、事件的绑定,一、v-show指令语法介绍这一节我们来学习 v-show 这个指令,这个指令的作用是:根据后......原创 2020-03-22 09:36:50 · 1211 阅读 · 0 评论 -
Vue知识整理,让你快速入门Vue.js:03_4.本地应用:v-on指令(事件绑定)、v-on指令简写、methods方法定义、this关键字修改数据
目录一、v-on指令语法介绍1、v-on指令的作用2、那么方法写在哪里呢?3、如何绑定事件呢?4、一种更简单的写法:把v-on 替换成 @5、实例测试验证(1)实例代码(2)效果展示二、this关键字,修改数据1、不用再操作dom元素2、this关键字3、实例测试验证(1)实例代码(2)效果展示三、内容-总结上一篇文章我们介绍了v-......原创 2020-03-22 09:36:12 · 795 阅读 · 0 评论