自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(232)
  • 收藏
  • 关注

原创 小程序学习笔记(4)-猫眼电影案例

第一步:创建新的项目第二步:更改app.json,进行基本的样式变更第三步:了解app.json可以设置的更多的东西1,配置页面路径2,配置窗口表现3,配置标签导航4,配置网络超时5,配置debug模式官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.showTabBarRedDot.html1,配置底部tab导航2,转化为顶部导航栏只需要多配置一行话:position:"top"便

2020-11-24 17:34:25 4

原创 小程序学习笔记(3)-模板的操作

一,理解可以把小程序的模板理解成vue中可以复用的封装好的小组件。哪里需要了,就在哪里引入使用。当然页面的渲染是需要数据来驱动的,也就是说,必要的时候,还需要引入数据。二,使用定义模板使用 name 属性,作为模板的名字。然后在内定义代码片段,如:<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}

2020-11-24 14:06:55

原创 小程序学习笔记(2)-简单的小例子了解小程序的语法

整体样式:第一步:定义自己的数据第二步:在wxml文件中写dom结构第三步:在wxss中编写样式这样的话,这个小案例就完成了。也就是说,和平时vue的写法思想是一致的,只是表现形式不同罢了,依旧是基于盒模型进行的静态布局,由数据驱动视图完成渲染。...

2020-11-24 11:18:40 2

原创 小程序学习笔记(1)-基本了解

第一步:去小程序的网站https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html下载微信开发者工具并安装第二步:小程序注册https://mp.weixin.qq.com/wxopen/waregister?action=step1注册后登陆:填写这部分信息:点进去,最底下,就是你的账号和原始id第三步:在开发者工具里面创建项目第四步:熟悉界面小程序提供了很多后台的接口,可以通过切换前后

2020-11-24 01:39:31 31 1

原创 当要写验证性的代码时,利用git进行代码管理

假如这部分代码是我所确定正确的,也是我不想再改动的:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="box">hello world</div> </body></html>第一步:先将其提交

2020-11-23 01:15:16 6

原创 解决fiexd和transform一起用导致的失效问题

效果如下:注意到这里有个bug,当点击切换的时候,底部的tab标签会跑走,这是因为fiexd和transform一起用,导致的失效问题。对应的样式代码如下:至于解决方案:从张鑫旭大佬这里可以看到:https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/原因就是transform的出现,导致了fiexd的降级为position:absolute了要解决这一个问题,需要用position relative来限制一下。

2020-11-23 00:05:32 8

原创 电商项目的app学习笔记(四)-路由跳转的过渡动画实现

原本的效果是这样的:官网教程:https://cn.vuejs.org/v2/guide/transitions.htmlVue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点本文只讲动态组件间切换时的过渡动画的写法第一步:使用transition将要切换的组件包裹起来第二步:因为在合适的时间点会出现对应的类名所以只要事先定义好该类的css样式便可:于是

2020-11-22 16:52:46 8

原创 电商项目的app学习笔记(三)-嵌套路由组件的实现

一,嵌套路由的使用常见的使用场景就是这样:实际用法:实现的效果:

2020-11-22 14:46:40

原创 电商项目的app学习笔记(二)---创建登陆界面

第一步:创建项目,并在vscode中打开并运行vue create vue-shop完成之后的项目结构:接下来在vscode中打开:并运行第二步:创建vue.config.js文件第一个设置:当 npm run serve后自动打开浏览器:第三步:选择合适的ui库pc端基本不用选:element-UI处于霸主的地位移动端的话比较多:mint-ui:饿了么团队(停止维护了)vux:vant:有赞的(推荐)https://youzan.github.io/vant/#/zh-

2020-11-22 01:04:23

原创 vue-router的编程式导航

this.$router.push跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面this.$router.replace跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面this.$router.go(n)向前或者向后跳转n个页面,n可为正整数或负整数一,组件中使用:因为router在入口文件中被挂载到vue上了,所以其他vue组件(实际上都是vue的实例),就需要通过this.$router来调用。二,模块中使用

2020-11-21 18:44:29

原创 async和await的错误捕获

一,先写成promise模式当使用promise时,链式调用处理返回的promise二,使用async和await的错误捕获就是在async函数内部直接使用try……catch……

2020-11-19 23:18:29

原创 电商项目的app学习笔记(一)---webpack相关配置

现在基本上都使用vue/cli3.x来构建项目,相比于vue2.x,build和config等目录不再有,而是将大部分配置都集成到vue.config.js里面了:关键点就是这个vue.config.js文件,之前的自定义webpack放到这里来了。vue-cli帮我们做了默认的基本配置。所以没有这个文件的话,就会使用默认配置进行打包。但是如果你有需要对打包的配置进修修改或者添加配置,就需要自行在根目录下创建这个文件,然后填写对应的打包配置vue.config.js 是一个可选的配置文件,如果项目的

2020-11-17 23:03:04 10

原创 安装@vue/cli脚手架又又又出问题啦!!!

昨天手贱把vue 脚手架删除了,然后就再也安装不上了,各种奇奇怪怪的报错,,,之前的解决办法:https://blog.csdn.net/weixin_42349568/article/details/108361782但是今天统统失效,绝望之际,用windows自带的命令提示符,使用管理员权限打开:然后切换设置成淘宝镜像: npm config set registry https://registry.npm.taobao.org最后,npm install -g @vue/cli

2020-11-17 22:29:20 14

原创 nvm的安装与使用

一,下载nvm,和安装在安装之前,需要卸载电脑上的node。地址:https://github.com/coreybutler/nvm-windows/releases按照软件设置安装便可。输入nvm -v就可以查看安装的版本,说明安装完成了。二,基本的配置1、where nvm --通过环境变量查找到 nvm 的安装目录,在nvm文件夹下settings里配置一下node和npm的安装地址,这样nvm安装node和npm时直接从淘宝镜像下载,可能就不会出错了#settings.tx

2020-11-16 23:02:13 19

原创 遇到问题的解决方法

针对每一个出现的问题,都会问自己以下几个问题:1,这真的是一个问题吗?2,这个问题需要解决吗?3,这个问题需要现在就解决吗?4,这个问题需要我解决吗?5,有没有更好的解决方案?第一步:就是先确认它是不是一个问题?如果它真的存在,但并非问题,就可以忽略它。如果它确实是一个问题,那么就进行下一步思考:第二步:这个问题需要解决吗?如果不良结果可以忍受并且增长缓慢,而解决这个问题需要付出的代价远甚于这个问题的容忍程度,那么就可以考虑不解决这个问题。换句话说,这个问题如果不解决,会发生啥?答案是没

2020-11-16 14:39:50 3

原创 npm下载地址的查询与切换

一,切换成淘宝镜像 npm config set registry https://registry.npm.taobao.org二,切换成原来的npm install nrm -g三,查询当前下载方式npm config get registry

2020-11-16 00:24:02 13

原创 利用wordpress搭建自己的网站(百度云虚拟主机)

一,安装wordpress第一步:购买虚拟主机和域名绑定等查看这篇博客:https://blog.csdn.net/weixin_42349568/article/details/107702265直到打开自己的网页可以显示百度云主机的欢迎界面:第二步:进入百度虚拟主机管理设置因为wordpress需要安装最新的,这里如果是旧版本,有可能版本不兼容。第三步:下载wordpresshttps://wordpress.org/download/第四步:下载ftp工具这个东西的作用就是一个上

2020-11-15 22:00:29 10

原创 webpack学习笔记

一,webpack的产生1,分工的演变随着前端的发展,前端开发人员不仅仅是书写静态界面和静态界面上的js动画,还需要进行业务逻辑的处理。随着前端业务的越来越复杂,文件越来越多。所以需要打包处理这些文件。2,框架的演变它们的文件都无法直接在浏览器上运行,需要进行转化构建。所以也需要有webpack的出现3,语言的发展4,环境的变化早期的前端页面只需要在浏览器上运行,现在呢?需要跑在服务端,移动端等。也需要很多的构建。5,社区的变化依赖越来越多,也需要依赖。6,工具的变化

2020-11-15 16:32:10 8

原创 vue+webpack实现一个todolist

一,webpack 的基本配置地址:https://gitee.com/ling-xu/vue-webpack/tree/master/分支:init第一步:项目的初始化安装vue和webpacknpm install webpack webpack-cli -Dnpm install vue vue-loadernpm install css-loader安装相关的依赖: npm install postcss第二步:新建app.vue文件但是,它作为vue的一个组件,它是

2020-11-15 12:52:14 9

原创 vue-loader was used without the corresponding plugin. Make sure to include VueLoad……

在webpack中使用vue运行webpack时报错:解决方案:第一步:在webpack.config.js配置文件中导入插件VueLoaderPlugin插件:const VueLoaderPlugin = require('vue-loader/lib/plugin');第二步:在导出模块(module.exports)中的plugins属性中new一个实例:module.exports={ entry:'./src/main.js', output:{ pat

2020-11-14 00:06:39 7

原创 vue-router的两种模式

第一种,是哈希模式hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: <div id="obj">我的颜色会随着哈希值的改变而改变哦</div> <script type="text/javascript"> window.onhashchange=function(event){ let hash=location.hash.slice(1) let obj=document.getElem

2020-11-13 10:47:19 18 2

原创 vue全家桶+element-UI

一,登陆界面的制作第一步:利用element-ui按需导入,然后绘制相应的页面:第二步:配置相应放入路由和路由导航守卫第三步,登陆成功后的退出登陆功能二,首页的开发第一步:顶部和左侧区域的菜单页面<template> <el-container class="home_container"> <!-- 头部区域 --> <el-header> <div> <img src="../assets

2020-11-12 00:26:08 25

原创 element-UI-tab选项卡

一,基本使用

2020-11-10 12:45:00 23

原创 element-UI级联选择器的使用Cascader

2020-11-09 23:32:29 17

原创 vue-table-with-tree-grid的使用

平时我们用element-ui组件库的时候,用的很多组件都可以解决日常工作中的需要,但需要搭建一个树形结构的表格,但element组件没有提供,这时就需要自己去通过第三方组件来实现这个功能了。也就是说,它是用来实现数据是多层结构(树状结构)的表格的一个插件;数据类型类似这样:npm网址:https://blog.csdn.net/Sky_fy_1314/article/details/107383695github案例:https://github.com/MisterTaki/vue-tabl

2020-11-09 17:15:45 39

原创 git个人常用的命令

一,本地的文件操作git init :初始化git仓库git status: 查看本地仓库状态git add ./ :将修改提交到暂存区git commit -m “提交信息" :将修改提交到缓存区二,分支操作git branch :查看分支git checkout 分支名 :切换到对应分支git checkout -b “新分支名” :新建分支,并切换到新的分支上git merge “要合并的分支名” :以当前分支为基准,合并分支三,远程操作git clone url :

2020-11-08 15:37:30 8

原创 原生js实现输入框焦点切换

实现的效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .oul{ width: 200px; height: 200px; margin: 100px auto; border: 1px solid #000000;

2020-11-08 15:23:42 36 1

原创 vue基础-25-vue的基础面试知识

一,v-show和v-if的区别1,元素节点的存在性v-if是创建和删除元素节点(false的时候不存在元素)v-show是显示和隐藏元素节点(false的时候元素存在,只是display:none)2,实现原理v-if是真正的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和创建。同时他也是惰性的,如果一开始的条件为false,则什么也不做,直到第一次条件变成真时,才会开始渲染条件块。v-show就简单多了,不管初始条件是什么,元素都会被渲染,只是简单地改变dis

2020-11-04 01:11:57 95

原创 vue项目中打包的相关配置问题

一,vue项目的webpack配置文档地址:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE现在我们用的基本上是vue-cli3,它创建的vue项目,不再有build文件夹,也不会有config文件夹,更不会有webpack.config.json文件。那我们去哪里进行项目的打包配置呢??vue-cli是基于webpack的,所以这部分的知识还是用的上的。当一个vue项目初始化完成后。生成的目录如下

2020-10-29 22:09:36 30

原创 慕课网仿去哪儿项目笔记--(五)-详情页面的开发

一,详情页动态路由及banner布局第一步:利用tag属性把router-link变成对应的标签第二步,利用to来指定路由跳转的url:第三步:新建这个页面的组件Detail,然后配置路由这里利用:id创建的是动态路由,意思是url必须包含detail/,而后面可以带一个参数,参数会放到id这样的一个变量里面。第四步,创建banner组件(页面顶部显示图片的组件),然后导入detail第五步,完成banner部分的基本布局利用position和flex完成.在这个过程中,遇到了一个

2020-10-29 16:59:59 93

原创 慕课网仿去哪儿项目笔记--(四)-城市页面的优化

一,使用keep-alive标签减少ajax请求原因是切换页面的时候,这两个页面都需要重新渲染,都会执行这个生命周期函数:可以改写成这样:这个标签的作用就是,让其中的内容只有在第一次获取数据时发起ajax请求,然后后续的数据直接从内存中获取。也就是接下来,无论切换多少次页面,这个请求只有第一次发起。二,让选择城市之后的首页根据城市的不同而进行页面的渲染像这样,选择好城市,回到首页时,我们又希望有ajax请求的发起,更新渲染首页内容为对应城市的页面:要区分对应的城市,发起的ajax请求必

2020-10-24 19:17:28 32

原创 慕课网仿去哪儿项目笔记--(三)-城市页面制作

一,头部区域的制作新建git分支,然后创建router和对应的city组件利用声明式导航,实现页面的跳转功能二,实现基本页面的制作:三,使用Better-Scroll的使用和字母表布局https://github.com/ustbhuangyi/better-scroll安装:npm install @better-scroll/core实现的效果:四,城市页面的数据渲染五,接下来要实现典型的列表联动左右两个列表,左边点击右边跳到相应位置,右边滚动左边相应位置也高亮显示;

2020-10-24 16:52:50 50

原创 触摸事件(touchstart、touchmove和touchend)

触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明:  touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。  touchmove事件:当手指在屏幕上滑动的时候连续地触发。  touchend事件:当手指从屏幕上离开的时候触发。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。  touches:表示当前跟踪的触摸操作的touch对象的数组。

2020-10-23 16:03:23 23

原创 对象的常用方法

自己遇到一个总结一个,待更新一,遍历取得对象的key值1,Object.keys(obj)例如:我要取得这个对象的所有key值:就阔以:于是:

2020-10-23 14:52:36 10

原创 better-scroll使用的坑与心得

今天第一次使用better-scroll,折腾了两个小时,滚动效果始终不行。先上官网地址:https://github.com/ustbhuangyi/better-scroll一,滚动失效原因1,先确认安装了better-scroll,并且成功引入:确认安装:引入:值得注意的是官网中这个“BScroll”前两个字母是大写的,后续要统一,很多文章中的代码只有B是大写。import BScroll from '@better-scroll/core'2,保证滚动的html结构正确官网的结构

2020-10-22 22:29:56 178

原创 慕课网仿去哪儿项目笔记--(二)-首页部分

一,安装tsules依赖(css预编译器)npm install stylus --savenpm install stylus-loader --save二,设置home.vue组件和vue组件组件化开发,把这个header搞成一个组件,然后放在home组件的最上边。也就是home是个页面级别的组件,而header是它的组成部分。...

2020-10-21 21:31:20 41

原创 让axios读取本地模拟数据报错404: Error: Request failed with status code 404

原因一:cli3.0已经把静态资源的文件夹改成public文件夹了,所以静态资源应该放置在public文件夹下。但是!我这样写依旧是报错!很难受,但是我没有哭。原因二,访问静态文件的路径不需要public.因为访问静态资源时,已经定位到public文件夹了!!!于是去掉public//获取后台数据 async getHomeInfo(){ const {data:res}=await this.$http.get('http://localhost:8080/index.j.

2020-10-21 14:10:55 37

原创 ssh: connect to host gitee.com port 22: Connection timed out fatal: Could not read from remote repos

今天用git 突然就不行了,使用git push 始终报错:但是,我确认ssh公钥是没有问题的,网络也是没有问题的。上网搜索到的解决办法如下:在ssh文件夹下:路径:C:\Users\Administrator.ssh增加一个不带后缀名的文件:config##########################################################Host gitlab.com Hostname altssh.gitlab.com User git Por

2020-10-20 00:26:27 113 1

原创 Stylus Loader has been initialized using an options object that does not match the API schema.

这个问题的发生是因为版本问题,解决办法:第一步,移除已经安装的stylusnpm remove stylus-loader第二步:去npm官网查看之前的stylus-loader的版本https://www.npmjs.com/package/stylus-loader有40个版本,刚刚删除的通常是最新的版本。现在改用旧版本,选择这个,点进去:右侧红圈处,就是安装旧版本的命令行了:npm i stylus-loader@3.0.2第三步:安装完毕之后,就会在package.js

2020-10-19 16:08:42 278 5

原创 慕课网仿去哪儿项目笔记--(一)-初始化准备

一,码云上创建新的仓库,并克隆到本地二,用vue脚手架新建项目,vue create travel三,关闭src下的eslint三,将初始化好的项目推送到码云上面去。四,初始化项目准备第一步,移动端不可缩放的配置:<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">五,因为是移动端的页面开

2020-10-19 14:00:33 90

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除