- 博客(88)
- 收藏
- 关注
RSS订阅原创 H5产品的分类和介绍
H5 产品的分类和简介一、电脑端(pc 端 react 全栈项目)web 应用(基于电脑浏览器的前端项目)二、手机端(移动端)1.小程序平台分类：微信小程序(张小龙) 支付宝小程序 头条小程序 百度快应用 QQ 小程序特性：由于硬件空间的限制 导致只能做一些业务逻辑简单针对特定需求低频应用，因为进入某个小程序流程不方便（进入微信的猫眼电影的小程序需要 5 步）性能要求不高的缺点：因为每个开发平台 语言相互独立 导致开发一款适配到不同平台的小程序变得麻烦目前现状：只要使用 un
2020-10-26 09:45:49
2874
1
原创 利用FormData来实现文件上传-demo
利用FormData来实现文件上传file.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
2020-06-23 10:38:24
314
原创 利用ajax来解决验证用户名问题-demo
利用ajax来解决验证用户名问题目录结构users.json[{ "id":1, "username":"张三", "pwd":123},{ "id":2, "username":"李四", "pwd":123}]index.js(koa)const Koa = require("koa");const Router = require("koa-router");const koaStatic = require("koa-s
2020-06-23 10:38:08
211
原创 前后端交互01
前后端交互01课堂目标理解ajax基本使用会使用XMLHttpRequest对象实现数据交互了解onreadystatechange服务器响应信息会使用FormData对象上传文件了解upload事件对象知识要点ajax使用XMLHttpRequest对象FormData对象upload 事件对象登录简单回顾1、提出ajax验证用户名需求；2、如果通过跳转解决很麻烦；利用ajax来解决验证用户名问题ajax的前端实现ajax后端实现利用ajax来解决验
2020-06-23 10:33:17
150
原创 Vue脚手架小练习（购物车）
简单小案例效果图实现App.vue<template> <div> <p> <input type="text" v-model="text" /> <button @click="addGood">加购物车</button> </p> <ul> <li v-for="(good, index) in goods" :key="goo
2020-06-05 12:30:46
1527
2
原创 webpack4.0基础（四）
使用babel处理ES6语法官网：https://babeljs.io/1.npm i -D babel-loader @babel/core @babel/preset-env # 安装babel-loader 和 @babel/core 和 @babel/preset-envbabel-loader: 是 webpack 和 babel 通讯的桥梁，使 webpack 和 babel 打通，babel-loader 并不会把 js 中的 ES6 语法转换成 ES5 语法@babel/core
2020-06-04 07:27:06
107
原创 webpack4.0基础（三）
Loadershttps://webpack.js.org/loaders/当 webpack 碰到不识别的模块的时候，webpack 会在配置的 module 中进行该文件解析规则的查找：rules 就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组，每一种类型规则通过 test 选项来定义，通过正则进行匹配，通常我们会通过正则的方式来匹配文件后缀类型。如/.css$/。 use选项 针对匹配到文件类型，调用对应的 loader 进行处理打包样式文件处理样式的loader
2020-06-03 07:14:39
136
原创 Vue基础（动画）
动画在 vue 中给组件或元素添加动画的方式可以分为多种，但总体无非还是通过 css 和 JavaScript 来进行处理CSS通过 css 添加动画的方式特别的简单，只需要利用 css 中的 transition 就可以做到vue 中的动画处理在 vue 中基本和上面的处理方式是一样的动画生命周期vue 为元素和组件的几个特殊的情况提供了对应的处理方式transtion 组件https://cn.vuejs.org/v2/api/#transitionhttps://cn.vuejs
2020-06-02 17:10:25
121
原创 webpack4.0基础（二）
Plugins扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等 。1. html-webpack-plugin在打包结束后，自动生成一个 html 文件，并把打包生成的 js 模块引入到该 html 中 。官网：https://www.webpackjs.com/plugins/html-webpack-plugin/安装：$ yarn add html-webpack-plugin -DORnpm install --s
2020-06-02 06:16:10
97
原创 Vue-Demo-User Management
用户管理案例效果图实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习：用户管理</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Bootstrap --&
2020-06-01 09:17:39
184
原创 Vue-Demo-Modal Box
模态框案例效果图实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_mo
2020-06-01 09:04:54
235
原创 webpack4.0基础（一）
webpack的安装为了防止全局安装出现的版本冲突,我们真实项目开发的时候基本上以安装在本地项目中为主；$ npm init -y$ yarn add webpack webpack-cli -DOR$ npm i webpack webpack-cli --save-devwebpack的基础使用初步体验（零配置）基础打包语法：SRC:存储项目开发的源文件DIST:打包后的文件目录/* * 默认会打包SRC目录中的JS文件（入口默认index.js） * 打包完成的目录默
2020-05-31 18:34:05
109
原创 Vue基础（keep-alive缓存组件）
keep-alive缓存组件• component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件；• 闭合标签使用组件component动态显示组件• component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件• 如果是动态属性，那么会去data中取值• component每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁• keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用kee
2020-05-31 10:54:53
153
原创 Vue基础（slot插槽-内容分发）
插槽（slot）插槽是什么？当引用组件时，我们可以向组件的标签中嵌入内容。这些内容可以嵌入到子组件中，但是需要使用插槽机制即，slot；如何使用插槽首先在创建子组件时需要声明一个 slot 标签占位；在组件标签中嵌入内容具名slot和匿名slot匿名 slot，在声明 slot 时不写 name 属性，嵌入在组件标签中没有写 slot 属性的标签都会放在匿名 slot 中具名 slot，在声明 slot 时要写上 name 属性；嵌入在组件标签中的内容需要指定 s
2020-05-31 10:44:54
164
原创 Vue-Demo-Search And Sort Lists
列表的搜索与排序案例效果图实现<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>列表的搜索与排序</title></head><div id="test"> <input type="text" v-model="searchName"/> <ul> <l
2020-05-29 17:53:01
96
原创 Vue基础（路由嵌套、路由传参）
路由的嵌套• 二级路由不能直接配置到routes,应该找到它对应的以及路由，配置到其children属性上；• 在组件路由配置是，对象中有children属性，属性值是一个数组，里面配置了子路由，路由中不需要加父路由路径地址，同时也不需要加"/",当子路由进行匹配式，会自动加上父路由和/到子路由的前面；命名路由• 在配置文件中加入name属性，然后可以用html的router-link标签的to属性匹配路由<!DOCTYPE html><html lang="en">
2020-05-29 16:54:06
257
原创 Vue基础（路由）
Vue的路由（vue-router）路由和前端路由• 路由：根据不同路径，执行不同操作；• 前端路由：单页面应用中由前端控制 url，实现页面的切换的效果（其实是在切换组件）；vue-router 实现页面的切换，单页面应用（SPA）页面切换页面的效果是通过在一个页面内，根据不同的 url 切换不同的组件实现的；• Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌• 路由：一个路径对应一个组件• 一个简单的路由配置需要4
2020-05-28 16:27:03
85
原创 Vue基础（组件通信）
Vue的单向数据流• 当父组件中的数据通过某些方法发生改变，更改了自己的数据，子组件如果使用到这个数据也会随着发生更改，父组件的数据流向了子组件，子组件也更新，这就是组件之间的数据传递的单向数据流• 但是子组件发生变化，不能引发父组件变化• 当父组件更新时（执行顺序）：父组件的beforeUpdate => 子组件的beforeUpdate => 子组件的updated => 父组件的updatedVue组件之间的数据传递父传子把父组件的数据以动态属性的方式放在当前子组件的行
2020-05-27 10:28:02
135
原创 Vue基础（组件基础）
Vue组件组件的特点• 每个组件就是一个自定义标签• 可复用性• 方便维护• 方便拆分• 每一个VUE组件都是一个独立的个体（独立的vue实例），作用域隔离（互不干扰），有完整的生命周期，有自己的响应式数据和各种方法（事件）• 能够实现组件的嵌套：需要掌握组件之间的信息通信组件命名规范• 组件名字单词首字母大写 PasalCase• 以横线作为分隔符 kabab-case• 不能使用内置的标签名作为组件名称• 调取组件的时候，会把所有组件的单词渲染为小写• 命名的时候尽量不要出现其
2020-05-27 10:15:36
364
原创 Vue基础（父子组件数据同步）
父子组件数据同步组件双绑的实现案例0-1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=
2020-05-27 10:02:37
1024
原创 Vue基础（Vue的生命周期方法）
• 从new Vue的创建到销毁的过程是生命周期• 生命周期： Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会在不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；• 生命周期钩子函数，能够让咱们在初始化实例时，添加自己的代码；• 生命周期的钩子...
2020-05-02 18:55:58
314
原创 Vue基础（filters 过滤器属性）
过滤器过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数假设有一个用于把内容转为大写的过滤器函数 toUpperCase{{content|toUpperCase}}| : 管道符，表示数据从左至右通过管道符进行传递过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果注册过滤器全局过滤器Vue.filter('过滤器...
2020-05-01 16:35:19
706
原创 Vue基础（computed 和 watch 的区别）
计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用c...
2020-05-01 16:18:11
149
原创 Vue基础（watch 侦听属性）
watch有的时候，我们需要的派生数据是通过异步的方式处理的，这个时候，计算属性就不太好用了（不能处理异步）。我们可以使用另外一个选项：watch延迟输入用watch多层监听对于多层数据的监听，可以使用字符串+点语法深度监听默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听<!DOCTYPE html><html lang="en"...
2020-05-01 15:31:06
391
原创 Vue基础（computed 计算属性）
computed在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况， vue 定义了一个专门用来处理这种派生数据的选项：computed1.计算属性类似 getter 和 setter ，当访问某个计算属性的时候，就会调用 computed 中同名的函数，函数的返回值将作为该计算属性的值2.计算属性的值依赖计算函数中依赖的其它响应...
2020-05-01 13:12:08
628
原创 github基础（七）
------------------------- github 团队开发工作流 ------------------------- 团队的角色： 管理者 （项目经理 ） 开发者 （普通的开发程序员） 测试人员 运维人员 项目开发流程： 产品部门 : 确定项目 --> 确定项目需求 --> UI 原型图 （1:1图片 业务，跳转 父子页面） 开发部门 :...
2020-05-01 10:52:47
87
原创 Vue-Demo-ShoppingCart
购物车案例准备：1.数据：data/carts.json[ { "isSelected": true, "productCover": "", "productName": "从入门到放弃", "productInfo": "xx出版社", "productPrice": 99.6, "productCount": 3 }, { ...
2020-05-01 10:46:19
243
原创 github基础（六）
submodule 子仓库 父仓库（A） 需要依赖 子仓库（B） 场景准备 本地A库 --》 github/A --> 父仓库 本地B库 --》 github/B --> 子仓库 注意： A 和 B 都是在同一个github账号,只要本地和github账号配置ssh协议就行 A 和 B 不在同一个github账号 , 需要 本地和 另一个git...
2020-04-29 22:32:54
80
原创 vue项目（第一天）
安装vue-cli3npm install -g @vue/cli项目初始化（vue-cli3）vue create 项目名 1.选择配置方式默认手动2.选择自己需要的配置 （空格选择 或 取消）3.对应的配置单独生成文件还是放在package.json4.要不要把自己选择配置保存下来（Y 回车）5.设置保存的名称（直接回车）npm run serve目录结...
2020-04-29 10:35:44
80
原创 github基础（五）
git 命令别名基于git配置文件配置命令别名 git config --system alias.ch checkout git checkout dev --> git ch dev 基于shell窗口配置用户别名(建议) windows系统 1. 在用户家目录下新建一个文件 .bashrc 2. 编辑文件.bashrc 写如下内容 alias mk=...
2020-04-28 16:40:49
97
原创 github基础（四）
实验：本地（dev） --》 远程(不存在dev) git checkout -b dev touch e echo 'u1 eee' >> e git add . git commit -m '' git push //在 dev 直接执行git push /* tal: 当前分支 dev 没有对应的追踪分支。 为推送...
2020-04-28 11:21:36
141
原创 github基础（三）
实验：两个人（多个人）git push 会产生冲突 准备： 1.新建远程仓库demo 2.准备文件夹 u1 3.u1用户初始化远程仓库 4.u2用户 git clone 把初始化好的远程库执行下载，下载的demo文件夹就是仓库 mv demo u2 // 将demo 文件夹改名为u2 5. cd u2 6. 设置u2用户的邮箱和姓名 git confi...
2020-04-27 13:47:38
84
原创 github基础（二）
实验： git remote show // 查看本地有几个远程库,本地仓库可能会添加多个远程仓库地址 git remote show origin // 查看具体的远程库信息 联网 反应慢 git branch //查看本地仓库的“所有”分支 除了追踪分支 /* * master */ git branch -a //查...
2020-04-27 12:39:55
111
原创 github基础（一）
github注册：http://github.com--> sing up（注册） --> 进入注册页面 实验： 在github 创建一个仓库 方式一： 勾选readme 文件 方式二： 不勾选readme 文件 (推荐) 更加灵活 说明： 本地和远程github仓库交互两种方式 https :(http加密协议 相对http来说更加安全) https...
2020-04-27 10:15:18
93
原创 git基础（七）
保存现场 （经常碰到）git使用规则： 1. 建议：（可以不遵守）在一个功能没有开发完毕的情况下 ，不要commit（形成版本） 2. 规范：（必须遵守） 如果两个分支处于不同的commit阶段，一个分支在没有commit情况下不能切换到其他分支场景： git init touch a.txt git add . git commit -m 'init' git chec...
2020-04-26 13:52:27
137
原创 git基础（六）
游离操作 (经常)checkout 几种使用方式 1 git checkout -- 文件名 （检出 移除文件前面的动作 ） 2 git checkout 分支 （切换分支） 3 git checkout sha1 （切换到游离状态）场景： master 分支上4次 commit git checkout sha1(历史版本的) /* 1. 您处于游离状...
2020-04-26 12:37:25
131
原创 git基础（五）
实验： 分支在合并的时候产生冲突和如何解决冲突（非常重要 ） 1.模拟冲突场景 （每个分支对同一个文件的同一行有不同的实现，分支合并就会在文件中产生冲突 ） 冲突的前提： 两个分支的commit 在“同一个阶段”合并的时候可能产生冲突 2.解决冲突 在master 分支上合并 dev分支 git merge dev /* 自动合并 a.txt 冲突（内...
2020-04-26 10:14:12
64
原创 git基础（四）
分支 branch（ 非常重要 ）概念： 分支是由多个commit链条按照一定的顺序组成的链 / 一条工作记录线 commit 一个版本（每个版本都唯一的sha1）注意： 1.git仓库初始化了就有master分支 ,master是主分支（默认分支） 2.每一个分支必须基于一个commit 有关分支的命令： 创建分支 git branch 分支名 切换分支 git ...
2020-04-25 21:51:09
169
原创 git基础（三）
git忽略touch .gitignore //新建 在linux 中是隐藏文件 需要 ll -a cat .gitignore /* # 这是注释 ---- a.js 忽略单个文件 a.txt 忽略单个文件 --- *.js 忽略js结尾的所有文件 --- *.js !a.js 忽略除了a.js外的其他js文件 --- 注意：...
2020-04-25 17:26:38
73
原创 git基础（二）
实验四：邮箱账号设置 目的：为了以后在和github交互的时候 区分提交着是谁？？ user.name user.email git config /* --global 1 (很少) use global config file 全局： 给整个计算机设置邮箱和账号 --》任何用户创建的git仓库都使用这个邮箱和账号 --system 2...
2020-04-25 14:38:47
69
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人