- 博客(29)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue的v-model的详解
含义： 官方解释一个v-model会默认利用名为value的prop和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将valueattribute 用于不同的目的。model选项可以用来避免这样的冲突：Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: `...
2022-05-20 14:28:10
1053
原创 vue中的数据或对象直接赋值数据未更改的问题记录
问题： 在父组件中创建了一个数组对象，子组件通过props引入。当父组件的数据更改后，子组件未触发更新，导致数据还是旧的。代码如下//此处的rightList是子组件，rightTicketList是传给子组件的数组对象<rightList ref="rightTicketList" :right-ticket-list="rightTicketList" @deleteList="deleteList" @openRealNam
2022-05-06 16:54:01
2787
原创 使用webpack优化项目
1、生产环境关闭productionSourceMap、css sourceMapSourceMap是当页面出现某些错误，能够定位到具体的某一行代码，Sourcemap就是帮你建立这个映射关系的，方便代码调试。判断是否是生产环境const isProduction = process.env.NODE_ENV === 'production'module.exports = { productionSourceMap: !isProduction, // 关闭生产环境的sou..
2022-04-13 14:04:08
1011
原创 webpack编写一个自己loader，去除项目中console
首先创建一个项目webpack-loader文件 npm init -y 创建packjson文件 安装webpack webpack-cli webpack-dev-servernpm i webpack webpack-cli webpack-dev-server -S创建一个src文件夹里面创建需要打包的js文件const a = 1;console.log(1)然后编写自己的loader，创建drop-console.js文件，如下const p...
2022-04-12 16:38:35
902
1
原创 IntersectionObserver（目标元素是否在可视区域内---交叉选择器）
网页开发中我们有时需要根据元素是否进入可视区域来做一些操作，原始的做法是通过scroll和getBoundingclient做判断，由于scroll事件频繁触发计算量很大，容易造成性能问题。但是现在有一个新的属性IntersectionObserver，可以自动观察元素是否在可视区域内。chrome51+已经支持。他的用法非常简单var io = new IntersectionObserver(callback,options)IntersectionObserver是浏览器原生提供
2022-04-04 11:00:50
909
原创 js 获取当前元素距离窗口的距离（getBoundingClientRect）
含义：返回元素的大小及其相对于视口的位置。如下let box = document.getElementById('box'); console.log(box.getBoundingClientRect())通过上图中的bottom、left、right、top获取元素距离窗口的距离ps：1、得到的是相对于视图的距离，如果页面滚动距离也会发生变化 2、scrolltop和offsettop是相对于父元素而言的...
2022-03-31 17:10:33
4823
原创 js中的双问号和“?.“的含义和使用
？？ 表示：只有左侧的值为null或undefined的时候才使用右侧的值。？. 表示：可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每 个引用是否有效。操作符的功能类似于.链式操作符，不同之处在于，在引用为空(null或者 undefined) 的情况下不会引起错误，该表达式短路返回值？.的个人理解 打个比方就是判断对象的某个属性是否存在，如果存在那么就返回整个属性的值，否则返回undefined贴上自测的代码...
2022-03-30 10:23:48
48620
6
原创 css的position的属性描述
static：默认值 元素出现在文档流正常的地方absolute：绝对定位当前元素，相对于第一个非static的第一个父元素进行定位，以left，right，bottom，top进行定位relative： 相对定位当前元素相当于其正常出现的位置进行定位，如：left：20px；就是相对原始位置向左移动20像素fixed：生成相对视窗定位的元素，将当前元素相对于浏览器窗口进行定位。元素的位置通过left、 right、bottom、top属性进行确定位置sticky 粘性定位，在当前定位的元素
2022-03-28 14:49:57
390
转载 h5的语义化
一、HTML语义化的背景HTML结构语义化，是近几年才提出来的，对比之前的 HTML 结构，大多是一堆没有语义的标签。用的最多的就是 DIV+CSS，为了改变这种现状，开发者们和官方提出了 HTML结构语义化的概念，并且在 HTML5 添加了很多语义化标签。二、HTML语义化的概念语义化是指根据内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机...
2019-03-27 20:06:31
1955
原创 移动端使用fixed导致ios底部内容无法显示
在移动端开发的时候，为了适配ios和安卓的不同机型的问题，我们做过很多的处理，可以通过分别接入h5的页面是从那种系统进入的方式判别ios和安卓。 但是，当我们在移动端的悬浮一个按钮的时候，ios设备上，底部的内容不能显示，原因是因为ios高度默认设置为100%，但是我们悬浮的内容并不占用高度，所以，有一部分内容会被按钮挡住，查了好多资料说使用trasnsform：translateZ（0...
2019-03-27 20:01:30
2654
1
原创 vuex的使用方法（一）
学习vuex之前，我们需要知道vuex是什么？定义：每一个vuex引用的核心就是store（仓库） store基本上就是一个容器，它包含着你的应用中的大部分状态。vuex和全局对象的不同点1、vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应的得到高效的更新。2、你不能直接改变store中的状态，改变stor...
2018-11-15 16:29:50
141
原创 vue+webpack的配置lib-flexible的方法以及自动转换rem
1、安装lib-flexible npm i lib-flexible --save-dev 2、在man.js中引入lib-flexible import 'lib-flexible/flexible.js'3、安装自动转换rem的工具 npm install px2rem-loader --save-dev4、配置px2rem ...
2018-08-15 10:41:18
1632
原创 使用subline实现vue文件的高亮显示以及html和js的快速编写
设置subline高亮显示1. 按住 ctrl + shift + p 2.输入：install Package3.输入： Vue Syntax Highlight输入完成之后重新打开.vue 的文件就可以了
2018-01-02 13:44:29
777
原创 webpack入门和使用
1、首先安装node（官网都有https://nodejs.org/en/）2、安装完node直接就安装了npm3、安装webpack3.1全局安装命令（//全局安装npm install -g webpack）3.2安装到项目路径中（//安装到你的项目目录npm install --save-dev webpack）开始操作：1、npm
2017-12-19 20:10:06
231
原创 app嵌套h5页面的问题总结
此处只是总结一下和后台调数据遇到的一个简单的问题。问题描述：从app跳转到h5页面的时候第一次访问页面接口调用了，但是数据返回的应该不正确（在pc上网页调试的时候是正常的，在移动端就不行）一开始以为是js的加载顺序问题，调整之后重新上传，发现问题没有解决。然后通过移动与接口联调发现，通过ajax传输给后台的一个重要参数token（这个值是app传输给后台，并获得数据的一个重要字段），第一次
2017-10-26 17:09:16
13139
原创 验证输入的网址是否正确的正则
function checkUrl(urlString){if(urlString!=""){var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;if(!reg.test(urlString)){alert("不是正确的网址吧，请注意检查一下");
2017-09-28 10:51:17
8828
1
原创 webpack教程
现在前端有很多流行的打包工具，grunt，gulp，webpack，三种打包工具选择自己比较喜欢的就可以。下面讲解下webpack的安装和使用方法。首先我们知道，webpack是基于nodeJs的，所以使用webpack的时候我们需要安装node，可以去官网下载，然后安装，安装过程非常简单。这里放下官网的下载的地址：https://nodejs.org/en/download/。安装完后，
2017-09-23 15:03:39
430
原创 数组去重的一种方法
记录一下比较简洁的数组去重方法：思路：数组去重顾名思义就是将重复的数据去除实现方法：Array.prototype.unique=function(){ var result= [],hash={}; // 循环数组 for(var i=0;i<this.length;i++){ //如果不在hash中则将数据存储到result数组中 if(!hash[this[i
2017-09-18 17:02:44
500
原创 gulp安装和使用教程
刚接手一个新项目项目里面使用gulp对代码进行构建的工具，研究了两天大体上知道这个构建代码的工具。下面我就讲解下我学习这个工具的过程。首先我需要了解下gulp这个工具的功能和作用。网上有详细的介绍，这边我就简单的介绍下。gulp是我们前段开发中使用的一种自动构建代码的利器，它不仅可以对网站资源进行优化，而且在开发的过程中很多重复的任务可以使用正确的工具自动完成。使用它我们可以快速的进行代码的开
2017-09-10 12:10:56
584
原创 JSON.parse()和JSON.stringify的介绍和使用方法
在交互的过程中我们前端和后台数据的交互方式主要通过JSON方式,下面来介绍下JSON.parse()和JSON.stringify()的使用情况和效果JSON.parse()将JSON转换成javascript的值或对象；可以提供可选的reviver函数以在返回之前对所得到的对象执行变换。语法： JSON.parse(text[, reviver])`参数介绍
2017-09-08 13:19:37
1040
1
原创 h5新特性localstorage的简单应用（记住登录名和密码）
我们在制作登录界面的时候回出现一个勾选框，询问我们是否记住账号和密码，当我们勾选了之后下次进来就是上次登录的账号密码，可以直接登录。那这个功能是如何实现的呢？下面我们就是用h5的新特性localstorage来实现。 首先，我们需要了解下localstorage的含义和用法。在客户端h5提供了两种存储方式；一种是localstorage，一种是sessionstorage 下
2017-09-08 10:12:10
6419
原创 修改网页的alert弹框样式让你的页面更美观（js封装之路（1.1））
由于页面中原来的alert弹框样式相当的丑，所以就想到了自己去设置一下alert的弹框样式首先是自己先设计好一个弹框的样式可以如下图：样式搭建完成就可以用js来编写一个alert函数了：js部分如下：function alert(e){ //此处将html中的div等元素拼接起来，添加到body中 var html=""; html+=""; html
2017-09-01 15:50:17
10418
原创 原生js封装之路（一）
这几天比较空闲所以研究了一下封装的方法，对于我们这些小白来说，封装往往显得高大上，下面我就来讲解下我的封装之路。原生js封装最简单的tab插件：html 部分：写了两个包含框一个id为wrap一个为wraps 第一项 第二项 第三项 第一部分 第二部分 第三部分 第一项 第二项 第三项 第一部分 第二部分 第
2017-09-01 11:32:14
1809
原创 正则表达式
//字母数字中文及下划线（一般用于用户名验证） wordsNumber_: function(str){ var pattern = /[A-Za-z0-9_\-\u4e00-\u9fa5]+/; if(pattern.test(str)){ return true; }else
2017-09-01 10:51:58
485
原创 h5实现垂直上下翻页效果
这两天比较有时间就自己简单的研究了一下现在比较流行的结婚请柬h5的制作方法。 简单的编写了一下代码如下：html部分 请柬标题 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu
2017-08-21 15:16:46
2992
原创 注册页面在安卓手机上调用输入法的时候背景上移问题
项目中遇到注册页面在安卓手机上点击输入框的时候会出现背景拉伸的情况。思路是给body设置屏幕的高度代码如下：$(document).ready(function () { $('body').css({'height':$(window).height()})});
2017-08-11 17:34:14
717
原创 h5缓存 和 点击商品列表进入详情页点击返回按钮回到上次打开列表的位置
最近几天能研究了一下客户端的缓存以及cookie的用法。客户端缓存我个人选用一种就是在头部添加cache-control：max-age=(时间)秒，首先是在html的meta标签中添加但是在浏览器中查看到没有起作用，通过检查发现这个页面由于不是静态页面是通过后台数据返回的动态页面所以在meta中添加不起作用。后面与后台沟通让他们加上在浏览器中可以看到如下图：缓存添加成功。
2017-08-08 11:15:59
10198
原创 原生js分页功能
js的分页ul{list-style: none;}#con li{width:200px;height:30px;text-align:center;font-family: 'Microsoft Yahei';font-size:16px;margin:0 auto;border:1px solid #ddd;}#pageEnd,#con{w
2017-07-31 15:38:39
805
空空如也
如何将商品列表中的图片进行缓存从详情返回列表后不去访问服务器直接从缓存中获取
2017-07-31
TA创建的收藏夹 TA关注的收藏夹
TA关注的人