- 博客(55)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 vue项目笔记（23）-动态路由传值及iconfont更新使用
动态路由与路由传值router-link相关知识vue中可以使用<router-link></router-link>实现路由跳转，vue中<router-link></router-link>将来会被渲染成a标签，且有默认样式。<router-link></router-link>带有tag属性，可以设置将来渲染...
2018-08-16 17:22:13
1390
原创 vue项目笔记（7）-使用iconfont
vue中iconfont的使用步骤1、进入iconfont官网（http://www.iconfont.cn），进入“官方图标”，选择你所需要的图标，加入购物车。2、进入“购物车”，将选择好的图标“添加至项目”，选择对应的项目，点击“确定”。3、在项目中，点击“下载至本地”，解压缩，文件目录如下：4、将字体文件及对应的iconfont.css文件复制到项目目录中，如...
2018-08-09 23:59:59
1596
原创 小程序《旧岛》项目笔记（8）-项目预览、事件传递、behaviors
项目预览与事件传递项目预览小程序项目可以通过扫描二维码来进行预览，对于普通的项目该方法可行。但是对于，其中网络请求的API接口是http开头的的项目。我们需要打开 “不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书” 这一选项，并且预览的时候要打开手机端的调试。事件传递组件包含关系：Compontent3 > Compontent2 &g...
2018-08-31 20:58:08
940
1
原创 小程序《旧岛》项目笔记（7）-组件的生命周期与内存泄漏
组件的生命周期与内存泄漏组件的生命周期created => 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setDataattached => 组件生命周期函数，在组件实例进入页面节点树时执行ready => 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）moved =&g...
2018-08-31 09:37:40
866
原创 小程序《旧岛》项目笔记（6）-自定义事件的激活&监听与点赞&取消点赞
自定义事件的激活与监听自定义事件激活自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。其中，like 表示自定的事件， behavior: status 表示 detail 对象，事件选项的属性不可以开发者自己定义，有bubbles、composed、capturePhase // 激活 let...
2018-08-31 07:18:14
470
原创 小程序《旧岛》项目笔记（5）-类的继承、组件属性赋值与页面渲染流程解析
类的继承与组件属性赋值类的继承在项目中，我们声明了一个类A，但是往往在声明另一个类B的时候，发现，类B需要继承类A的属性，这就要用到类的继承。import { Http } from '../utils/Http.js';class ClassicModel extends Http { getLatest(sCallBack) { this.request...
2018-08-30 15:06:28
959
原创 小程序《旧岛》项目笔记（4）-API调用失败的处理
API调用失败的处理一个优秀的网站或者程序，在异常处理与提示方面是非常体贴且人性化的，这也增强了用户的使用体验。因为网站给出的提示，可以帮助用户有效的定位问题所在，方便解决问题。在HTTP类封装的时候，我们要兼顾 request 方法与 _show_error 两种方法。前者，是进行网络请求的方法；后者，是展示网络请求出错时给用户的提示。代码大致如下：import { ...
2018-08-30 13:22:28
1428
原创 小程序《旧岛》项目笔记（3）-类的封装
类的封装与使用类的封装无论是小程序，还是其他项目，我们往往都会遇到一些公共的方法会重复的调用，这个时候，我们就需要将这些方法封装在类中，方便代码的复用。以网络请求类http的封装为例，来学习类的封装。1、首先，我们新建一个文件config.js，在其中，我们生命一个常量并导出，如下：const config = { api_base_URL: 'http://bl.7yue....
2018-08-30 11:30:50
1088
原创 小程序《旧岛》项目笔记（2）-访问API获取数据
访问API获取数据1、分析API接口在使用API接口获取数据之前，我们首先要分析API，包括url前缀、如可使用appkey、如何发送参数、获取数据的结构等等。2、POST、PUT请求注意事项3、API调用返回的结果所有HTTP请求只有2种类型的json返回结果:（1）返回资源的特定信息(如获取用户基本信息){ "content": "人生不能...
2018-08-30 10:01:42
1053
原创 小程序《旧岛》项目笔记（1）-项目开发准备
项目开发准备1、开发工具对于小程序项目，我们除了使用小程序官方开发工具外，还可以使用第三方开发工具，比如vscode、vim、sublime、webstorm等等。vscode中，提供了一些好用的插件，便于开发。2、样式继承小程序中，很多样式都是不可以继承的，常见的可以继承的样式有foot、color等等，这一点是需要特别注意的。3、组件的定义与使用开发者可以将页面内的功能...
2018-08-29 17:54:15
2847
1
原创 微信小程序学习笔记（2）-轮播广告&导航部分&上拉加载
轮播广告与导航部分轮播广告在微信小程序中，我们通常需要遇到轮播广告的需求，在实现的时候，我们使用swiper组件。 <view class='swiper'> <swiper interval="{{interval}}" duration="{{duration}}" vertical="{{vertical}}" indicator-dots=...
2018-08-28 14:19:55
1177
原创 微信小程序学习笔记（3）-全局的样式（app.wxss）与通用布局
全局的样式（app.wxss）与通用布局在小程序开发的时候，大多时候，页面的布局都是基本相同的。因此，页面布局也就形成了固定的套路。常见的布局及全局样式如下：index.wxml文件<view class='container'> <scroll-view scroll-y="true" class='page-body' bindscrolltolower="...
2018-08-28 11:08:34
10524
原创 微信小程序学习笔记（1）-全局配置
全局配置app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。名词解释：pages => 页面路径列表window => 全局的默认窗口表现 backgroundTextStyle => 下拉 loading 的样式，仅支持 dark / light,默认值d...
2018-08-27 11:28:17
540
原创 Websotrm进阶技巧
Websotrm进阶技巧Webstorm快捷键查询方法一：鼠标点击菜单栏，下拉列表中，右侧显示对应指令的快捷键。方法二：Ctrl + Alt + S，Keymap代码添加技巧1：给现有的标签添加一个父元素。如 <a href="www.baidu.com">百度一下</a>变为<div><a href="www.baidu...
2018-08-26 19:25:13
634
原创 Emmet-让你的编码速度飞起来
Emmet代码补全语法html文件常用的字符有：> + ^ * ()> 表示父子关系+ 表示兄弟关系* 表示重复^ 表示向上提升一个级别() 表示逻辑关系，是等级更清晰# 表示id属性. 表示class属性[] 表示自定义属性$ 表示数字1-n，n 为 * 号后面的数字{} 表示文本内容lorem +...
2018-08-25 21:06:50
766
原创 响应式网站设计（11）-项目的打包发布
项目的打包发布项目发布流程直接把文件发给运维人员，让运维人员发布相关的代码分支，拷贝代码到生产服务器上发布目录。项目发布前的代码优化1、压缩； 2、合并； 3、增加版本号等等；在压缩之后，线上的代码比较小，提高网页的加载速度。压缩后的代码，不同于常规的代码，其他人员不能一眼看出来是什么作用，有效的保护了知识产权。打包发布打包发布，推荐网址：https://javas...
2018-08-24 10:26:58
1175
原创 响应式网站设计（10）-兼容性处理
兼容性处理浏览器现在主流的浏览器大多自带调试工具，可以通过快捷键 F12 调出。Firefox除了自带的调试工具外，通常可以使用Firebug调试工具；Safari浏览器自带的调试工具中提供了响应式调试，其中对应多种苹果移动端设备；Opera浏览器自带的调试工具与谷歌类似，但是Opera浏览器开发者版的VPN功能是一大亮点。PC浏览器调试IE浏览器调试方法：用IE浏览器打开项目ht...
2018-08-23 20:44:09
1665
原创 响应式网站设计（9）-Node.js启动server
Node.js启动server在已经完成的项目中，我们发现只能通过localhost访问，网址为：http://localhost:63342/xxxxxxxx；在其他设备上访问该地址是不可以的。如何解决这个问题呢？基于node.js的轻量级的http服务器可以解决该问题。具体的使用步骤如下：1、安装npm install http-server -g2、启动 http...
2018-08-23 14:53:52
370
原创 响应式网站设计（8）-广告轮播
广告轮播应用场景在制作响应式网站的时候，往往会遇到首页广告图片轮播的设计。该部分设计的实现可以通过自己手写实现，但是考虑到代码的简洁和复用性，我们建议使用相关插件来实现，推荐使用Owl Carousel 2。Owl Carousel 2插件官网：https://owl...
2018-08-23 11:35:32
925
原创 响应式网站设计（7）-打印样式
打印样式打印样式，顾名思义是网页打印专用的样式。对应需要打印的网页，可以专门添加打印样式。打印样式的主要作用的是去除背景颜色，去除阴影，换行处理等等。具体代码如下：@charset "utf-8";/* ============== 打印样式 ==============*/@media print { *, *:before, *:afte...
2018-08-23 08:47:38
470
原创 响应式网站设计（6）-媒体查询
媒体查询调试工具在PC端样式设置完毕之后，我们需要适配移动端。首先，我们选择的设备类型不是某一种设备，而是responsive。另外，我们可以打开标签和媒体查询，如下图：代码位置媒体查询的代码为止，并没有明确的规定。根据个人的习惯的不同，位置很灵活。但是，为了代码维护的方便性，我们建议，代码放置到对应外层容器标签css样式的最下方。单位选择在进行响应式网站设计的时候，媒...
2018-08-22 19:02:49
1879
原创 响应式网站设计（5）-部分css样式复习
样式1：box-shadow语法：box-shadow: h-shadow v-shadow blur spread color inset;box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。值 描述 h-shadow 必需。水平阴影的位置。允许...
2018-08-22 15:43:09
331
原创 响应式网站设计（4）-小插曲（零碎知识点）
知识点1：class与id属性的选择标准一般选用class定义样式，id一般用于js快速的区别和获取元素；class一般使用中横杠连接，id一般使用驼峰命名法。知识点2：背景图片与img标签的选择必不可少的图片使用img引入，可有可无的装饰性可以用标签的style引入知识点3：Normalize.css 与传统的 CSS Reset的区别？ Normalize.css...
2018-08-22 09:35:18
314
原创 响应式网站设计（3）-meta标签，条件注释，H5新增标签说明（持续更新中）
meta标签在网站制作的时候，我们经常接触meta标签，但是却往往忽略它们，常见的meta标签的意义，说明如下： <!--utf-8要最先声明，在head的第一行--> <meta charset="UTF-8"> <!--content="ie=edge"表示强制以最新的IE浏览器模式渲染页面--> <meta h...
2018-08-22 09:19:25
657
原创 响应式网站设计（2）-关于网站制作你不知道的那些文件儿
关于网站制作你不知道的那些文件儿1、robots.txtrobots协议Robots协议（也称为爬虫协议、机器人协议等）的全称是“网络爬虫排除标准”（Robots Exclusion Protocol），网站通过Robots协议告诉搜索引擎哪些页面可以抓取，哪些页面不能抓取。robots.txt是一个协议，而不是一个命令。robots.txt是搜索引擎中访问网站的时候要查看的第一个...
2018-08-21 18:29:36
486
原创 响应式网站设计（1）-理论
响应式网站设计响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。响应式网站的设计理念响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图...
2018-08-21 12:00:34
897
原创 vue项目笔记（31）-项目打包上线
项目打包上线1、在项目终端中运行以下命令npm run build2、此后，项目会增加dist文件夹，该目录代码就是最终要上线的代码。3、复制dist文件夹，交于后台开发人员，将代码放到后端的服务器上。4、放置在后端的根目录下，也可以放置在指定的目录下。如果要放置在指定的目录下，我们需要在前端的config/index.js文件中做如下配置：build: { i...
2018-08-20 10:13:03
2597
原创 vue项目笔记（30）-vue项目接口的联调与真机测试
vue项目接口的联调与真机测试vue项目接口的联调当前端的代码编写完毕，后端的接口也已经也编写完毕的时候，我们此时便需要进行接口联调，将模拟的数据替换为真实的后端接口。vue项目中进行接口联调的步骤：1、删除之前的模拟数据，即static/mock下的所有json文件。2、修改config/index.js中的proxyTable内容，重启项目。 proxyTa...
2018-08-20 09:54:40
2788
原创 vue项目笔记（29）-组件显示的动画
组件显示的动画vue项目中，为优化用户体验，我们通常在组件显示的时候，我们加上动画效果。除了直接用transition标签作为组件的跟标签外，我们还可以把动画效果抽离成组件，方便复用。FadeAnimation.vue<template> <transition> <slot></slot> </transitio...
2018-08-18 07:05:06
1340
原创 vue项目笔记（28）-递归组件的使用
递归组件什么是递归组件？组件自身去调用组件自身。代码示例DetailList.vue(子组件-递归组件)<template> <div> <div class="item" v-for="(item,index) of list" :key="index"> <div class="item
2018-08-17 14:13:06
2312
1
原创 vue项目笔记（27）-项目优化（解绑全局事件）
解绑全局事件在项目中，我们往往会遇到全局事件的绑定，但是可能只是某一个页面，如果不进行解绑，将会出现各种各样的bug，所以对全局事件进行解绑，很有必要。 实例分析在项目中，我们在detail/components/Header组件对全局对象window进行了事件绑定，当切换到了其他其他页面的时候，仍然未解除绑定之前，每一个页面都会执行该事件绑定的方法，消耗内存，所以必须解绑全局事件。...
2018-08-17 09:21:37
895
原创 vue项目笔记（26）-header组件渐隐渐现效果
header组件渐隐渐现效果实现效果描述：在滚动页面的时候，页面向上滚动一定距离的时候，header组件的“景点详情”渐渐出现，原有的banner图上面的“返回”消失。页面向下滚动一定距离后，效果反之。如图：思路分析：实现上述效果，必须对window的scroll事件进行监听，动态绑定样式，如下：<template> <div> <...
2018-08-17 07:09:45
1711
原创 vue项目笔记（25）-公共组件拆分
公共组件拆分（画廊组件）vue项目开发中，有些组件不仅仅是一个页面需要使用，这时候我们可以将其抽离出来，作为一个公共组件。公共组件常用的目录结构如下（其中Gallery.vue就是公共组件）：Gallery.vue中的图片需要有轮播效果，故采用swiper，swiper中相关配置如下（详情参考swiper3官网）：在Gallery.vue组件中的轮播图片，需要使用v-for循环...
2018-08-16 20:50:16
3887
原创 vue项目笔记（24）-小插曲（零碎知识点整理）
知识点1：背景渐变设置background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))知识点2：子级元素水平垂直居中的样式（.container表示父级元素）.container display flex flex-direction column justify-cont...
2018-08-16 17:33:35
300
原创 vue项目笔记（22）-使用keep-alive优化网页代码
使用keep-alive优化网页代码在运行项后时，打开控制台的Network-XHR，点击城市切换，而后点击返回到首页，我们发现index.json请求了两次，在产生路由切换的时候，ajax请求都会重新进行请求，严重影响网页性能。如果可以发起一次请求就好了。解决方法：用<keep-alive></keep-alive>包裹<router-view />...
2018-08-16 11:03:47
421
原创 vue项目笔记（21）-vuex代码优化
vuex代码优化在使用vuex的项目代码中，html中往往会出现{{this.$store.state.city}}这种代码，很不规范。vuex中给出了部分api可以对此进行优化。mapStatehome/compoments/Header.vue中{{this.$store.state.city}}修改为{{this.city}}，引入mapState，并设置计算属性。 ...
2018-08-16 09:09:23
714
原创 vue项目笔记（20）-localStorage的使用
vue中localStorage的使用在原有的项目中，需要缓存效果。h5中新增了localstorage，可以用于缓存。代码修改如下：store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);let defaultCity = '北京';try { if (localStorage.c...
2018-08-16 08:03:09
3904
原创 vue项目笔记（19）-使用Vuex实现数据数据共享
使用Vuex实现数据数据共享City与Home组件没有公共父级组件，要实现共有数据分享，可以借助Vuex。Vuex基础知识Vuex是什么呢？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通俗理解：当一个项目中，各个页面（多个组件）之间进行复杂的数据传值很困难的时候，...
2018-08-15 18:44:38
2689
1
原创 vue项目笔记（18）-搜索组件逻辑处理及代码优化
搜索组件逻辑处理及代码优化在我遇到的项目中，对于对于搜索组件，部分是后台直接写好的接口，直接调用既可以完成搜索；另一种就是由前端完成搜索逻辑处理，如下：1、首先，对输入框进行双向绑定（v-model=‘keyword’）；代码如下：<template> <div> <div class="search"> <inp...
2018-08-15 14:02:18
950
原创 vue项目笔记（17）-兄弟组件之间的联动
兄弟组件之间的联动在本节中，我们将要实现点击右侧的Alphabet，左侧List组件可以移动到指定的位置，实现兄弟组件之间的通信，我们可以借助它们公共的父组件实现转发。具体步骤如下：1、步骤一：兄弟组件1发送change，并传入参数e.target.innerText，而后需要在父组件City中监听该事件；// Alphabet组件<template> <ul...
2018-08-15 09:37:21
2147
1
响应式网站设计（gulp打包与未打包两版）
2018-08-24
vue-cli及vue路由学习
2018-06-25
vue-axios的使用及其中get与post网络请求
2018-06-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人