- 博客(133)
- 收藏
- 关注
RSS订阅原创 vue组件间通信
父子间通信propsprops是父子间通信比较常用的方式，可以传字符串、数组、对象。父组件<template> <div > <!-- 在子组件标签用v-bind绑定传递数据--> <child :arrData=arrData :alertFun=alertFun :strData=strData :objData=objD...
2020-03-21 15:55:10
169
原创 v-router
vue-router中文文档 在单页面应用中，路由的配置是我们必不可少的。vue-router基本使用步骤1、定义路由组件，一般放到单独的文件里（views/pages）2、配置路由router文件夹里的index.js 的代码示例import Vue from 'vue'// 创建路由器import VueRouter from 'vue-router'// 引入路由组件...
2020-03-21 00:02:45
247
原创 vli脚手架编写流程
第一步入口main.js编写import Vue form 'vue'; // 引入Vue对象；import App form './App.vue';// 引入主页面名为App的vue文件import router form './router';// 从文件router引入 路由，// router文件必须有index.js,系统默认引入这个文件new Vue({ el: '#ap...
2020-03-20 08:39:38
133
原创 vue自定义指令
注册全局指令Vue.directive('my-directive',function(el,bounding){ //编写元素调用该指令的效果})el：为调用当前指令的元素；bounding：是一个对象；该对象包含了当前调用指令元素对象的一些信息；注意：全局指令注册在vm示例外面注册；注册局部指令directives: { 'lower-text'(el, bin...
2020-03-19 17:47:08
111
原创 vue的过滤器
理解过滤器功能:对要显示的数据进行特定格式化后再显示注意：并没有改变原本的数据，但产生新的数据；定义和使用过滤器定义过滤器Vue.filter(filterName, function(value，format){ // 进行一定的数据处理，返回这个新数据作为filterName过滤器的值 return newValue })使用过滤器// myData是原有的数据，fi...
2020-03-19 17:07:00
81
原创 vue中的过渡和动画
vue 动画的理解1、主要操作css中transition和animation；2、vue给目标元素添加/移除特定的class；3、过渡的相关类名xxx-enter:指定进入之前的样式；xxx-leave-to:指定离开后的样式；xxx-enter-active:指定进入时的样式xxx-leave-active：指定离开时的样式基本过渡动画的编码1、在目标元素外包裹<tr...
2020-03-19 16:52:19
136
原创 vue生命周期
vue生命周期图：vue生命周期分析：1、初始化显示beforeCreate()created()beforeMount()mounted()2、更新状态:当vm示例中有数据状态发生变化时；beforUpdate()updated()3、销毁阶段，当调用vm.$destroy()beforeDestroy()destroyed()常用生命周期函数1、cre...
2020-03-19 16:28:44
71
原创 vue初识
vue是尤雨溪结合Angular的模板语法及数据绑定的思路和React的组件化及虚拟Dom的思想，它是渐进式前端框架，主要功能是动态地构建用户界面；vue的主要特点：遵循MVVM模式编码简洁，体积小，运行高效。适合PC和移动端开发。本身只关注UI，可以轻松引入vue插件和第三方开发库。理解MVVM模型M：指的是data model,也就是vue实例对象里面的data；V：vie...
2020-03-19 16:12:22
103
原创 移动端的TouchEvent对象
在移动端我们可以有多个手指去操作，所以会有多个对象；changedTouches- 触发当前事件的手指列表- 该列表包含了我们常用的clientXheclientY的必要信息；targetTouches- 触发当前事件元素上的手指列表touches- 触发当前事件时，屏幕上的手指列表；...
2020-03-14 15:59:02
174
原创 移动端a标签跳转方案
a标签在促发touchend事件时，a标签就会跳转；touchmove最终也会触发touchend，所以会导致误触；代码显示// 全面禁止移动端事件的默认行为document.addEventListener('touchstart',function(ev){ ev = ev || event; ev.preventDefault();})// 获取页面中所有的a标签var...
2020-03-14 15:50:05
821
原创 移动端事件点透
pc端的事件可以在移动端触发pc端事件有300毫秒延迟移动端事件不会有延迟html代码<body><div id="item"></div><a href="http://www.baidu.com">Baidu</a></body>css代码#item{ // 让item绝对定位，脱离文档流在a标签...
2020-03-14 15:38:11
148
原创 全面禁止移动端事件的默认行为和单独开启元素的默认事件；
event.preventDefault();该方法可以取消元素上event.cancelable属性为true的默认事件。在移动端所有的event.cancelable属性为true；所有我们可以用event.preventDefault()来全面禁止事件的默认行为代码显示：// 给document上的所有的某一个事件添加DOM2的事件监听document.addEventLis...
2020-03-14 14:44:40
468
原创 ie6的最小高度19px的解决方案
在ie6下默认最小高度为19px；当给当前元素的父元素的fontsize设置为0时，当前元素可设置的最小高度为2px；
2020-03-14 14:31:33
162
原创 移动端实现1物理像素
rem适配 下的1物理像素实现(function(){ var dpr = window.devicePixelRatio||1; var styleNode = document.creatElement('style'); var w = document.documentElement.clientWidth*dpr/16 ; styleNode.innerHtml = 'ht...
2020-03-14 14:26:33
76
原创 rem适配
什么是em和rem？1em=1倍的自身fontsize；1rem=1倍的html（根标签）的fontsize；适配的作用适配是为了实现在不同页面上实现等比；如何设置一个div的width在不同设备上实现满屏？我们设置html的fontsize为布局视口的宽度html.style.fontSize = document.documentElement.clientWidth + 'px...
2020-03-14 14:01:05
215
原创 viewpoint适配
适配的作用将所有设备的布局视口的宽度调整为设计图的宽度；viewport适配的原理在viewport适配方案中，每一个元素的不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的。viewport适配的优缺点优点：所量即所得；缺点：没有完美视口；viewport适配代码解析html代码<!-- viewport适配时，页面中先预留viewport...
2020-03-14 14:00:46
708
原创 viewport的meta标签
我们都是知道用户是可以对页面进行页面缩放的。但是pc端的用户缩放和移动端的缩放浏览器是有差异的。pc端：用户缩放影响的布局视口的尺寸，会影响布局。移动端：用户缩放影响的视觉视口的尺寸。（页面布局不会乱）initial-scale初始化缩放，也叫系统缩放。系统缩放是参照与理想视口（独立设备像素）进行缩放，同时控制布局视口和视觉视口。当设置initial-scale=1时，等同于widt...
2020-03-10 19:13:11
155
原创 布局视口、视觉视口、理想视口
布局视口在移动端，浏览器厂商面临着一个比较大的问题，他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上，并且不会出现滚动条。这个时候，视口的宽度还是和浏览器窗口的宽度一致。我们都知道pc端的页面一般都为960px或者1024px。那么要完整的放下它们，我们移动端浏览器必须要有个容器放下它，而且只有有了这个容器我们才能规定移动端的浏览器到底能放下多大的页面。这个容器我...
2020-03-10 17:59:08
1624
原创 物理像素、css像素、位图像素、设备独立像素、像素比
物理像素也叫设备像素。物理像素是设备成像的最小单位。我们买手机的时候会有一个n*m的分辨率，那是屏幕的n*m个呈像的点。一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度。注意： 任何设备的物理像素的数量是固定的，任何一款设备上1物理像素的大小是不会改变的。 不同设备上1物理像素的大小可能是不一样的。css像素它是一个抽象的单位，主要使用在浏览器上，用来精确的度量web页...
2020-03-09 13:31:43
544
原创 屏幕尺寸、屏幕分辨率、高清屏、屏幕像素密度
屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54里面。屏幕分辨率指在横纵向上的像素点数，单位是px，1px=1像素点。一般以纵向*横向像素来表示一个手机的分辨率。如：1960*1080（这里的1像素指的是物理设备的1个像素点）屏幕像素密度屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写；屏幕像素密度跟屏幕分辨率和屏幕尺寸有关；...
2020-03-09 12:39:34
1686
原创 控制width设置动态效果注意事项
1、width的初始值设置width的初始值设置为空，这样浏览器就不会渲染width；就不会影响其他效果；element.style.width="";2、动画方向的基点设置当用width和height设置动态效果时，width和height的默认方向是从左往右，从上到下；我们可以把该元素设置定位；同时几点为：bottom：0；right：0；element{display:abs...
2020-03-06 20:18:07
609
原创 常见js兼容性问题整理
1、ev = ev || event;2、offsetParentoffsetParent的作用：offsetLeft 和 offsetTop 是参照于offsetParent的内边距边界的；Dom里所有的元素都是有offsetLeft 和 offsetTop的parentNode和offsetParent的区别：parentNode：直接父级offsetParent：类似于css...
2020-02-26 15:49:36
566
原创 元素垂直水平居中的几种方法
已知宽高：1、利用绝对定位盒模型的特性；绝对定位的盒模型有以下特性：left+right+width+水平方向的margin+padding=包含块的width；top+bottom+height+垂直方向的margin+padding=包含块的height；代码示例：#parent{ /* 父相子绝 */ position: relative; ...
2020-02-26 14:27:38
116
原创 HTML5应用缓存
HTML5中我们可以轻松构建一个离线应用；只需要创建一个cache manifest文件；优势：1、可配置需要缓存的资源；2、网络无连接应用仍可以使用；3、本地缓存资源，可提升访问速度，增强用户体验；4、减少请求，缓解服务器负担；缓存清单这是一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，一般使用.appcache为后缀名。该文件需要添加到需要缓存页面的根元素（ht...
2020-02-21 22:35:22
129
原创 HTML5新增web存储
Window.sessionStorage该属性允许你访问一个 session Storage 对象；存储在 sessionStorage 里面的数据在页面会话结束时会被清除。同一浏览器的页面都可以访问；Window.localStorage该属性允许你访问一个Document 源（origin）的对象 Storage；存储在 localStorage 的数据可以长期保留；同一浏览器...
2020-02-21 22:17:14
146
原创 HTML5新增拖拽事件
在HTML5中，认为任何元素都可以拖拽；首先设置被拖拽的元素的attribute属性：<input draggable="true">拖拽七兄弟源对象事件dragstart当用户开始拖动元素或选择文本时触发此事件。drag拖动元素或选择文本时触发此事件。drop当在有效放置目标上放置元素或选择文本时触发此事件。该事件浏览器默认阻止，可以在dragover中设置...
2020-02-21 21:50:52
352
原创 HTML5新增文件操作
files对象这个对象是上传的文件对象集合；里面包含了每个上传文件的信息和上传文件的length；需要给input元素添加change事件监听；var inputFile=document.getElementById('file');inputFile.onchange=function(){ console.log(this.files);}FileReader对象可以读...
2020-02-21 20:06:49
298
原创 HTML5新增网络检测事件监听
online当用户网络重新连接时触发window.addEventListener('online',function(){})offline当用户网络断开的时候促发window.addEventListener('offline',function(){})
2020-02-21 15:34:18
389
原创 HTML5新增表单的property属性
HTML5中新增表单的property多用于表单验证；validity对象validity对象上面有8个属性值；通过下面的invalid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false；首先要给元素节点添加事件监听：node.addEventListener("invalid",fn1,false);常用的validity对象的属性：valueMis...
2020-02-21 15:22:42
309
原创 HTML5新增表单类型
Html5 Forms概述,在Html5中:1.表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性form的action 指向一个服务器地址（接口）2.当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值 注意表单项的name属性必须有值，服务器才能获取表单3.所有之前的表单控件都保持不变4.仍然可以使用脚本操作表单控件Html5之前的...
2020-02-21 14:46:05
463
原创 自定义video播放器的常用的事件。
window.onresize这个事件主要用于当浏览器窗口发生改变时，实时获取video的width和height；代码示例：window.onresize=function() { // 控制窗口不小于800时，进行video的width和height的重新获取； if(document.documentElement.clientWidth>=800) { ...
2020-02-21 13:02:48
1785
原创 HTML5对音视频的设计
html5中音视频相关标签<video>:Html5提供的播放视频的标签src:资源地址controls:该属性定义是显示还是隐藏用户控制界面<audio>:Html5提供的播放音频的标签src:资源地址controls:该属性定义是显示还是隐藏用户控制界面<source>视频：type=‘video/webm; codecs=“vp8, ...
2020-02-17 14:19:40
196
原创 音频和视频简介
大家都有在网页中浏览视频的经历，但在Html5之前，对视频乃至音频都还没有一个标准因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在在介绍Html5中的音视频标签前，我们需要了解一些概念1. 容器大多数人会认为视频文件就是 .avi .mp4,但事实上 avi...
2020-02-17 13:28:31
330
原创 canvas中的isPointInPath(x,y)
ctx.isPointInPath(x,y)它是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。语法boolean ctx.isPointInPath(x, y);boolean ctx.isPointInPath(x, y, fillRule);boolean ctx.isPointInPath(path, x, y);boolean ctx.isPointI...
2020-02-15 22:01:18
706
原创 canvas画布导出为图片
toDataURL这是canvas元素上的API方法返回一个包含图片展示的 data URI语法：canvas.toDataURL(type, encoderOptions)；type | 可选 图片格式，默认为 image/pngencoderOptions | 可选 在指定图片格式为 image/jpeg 或 image/webp的情况下， 可以从 0 到 1 的区间内选择图...
2020-02-15 21:50:04
1286
原创 canvas综合运用：刮刮卡
代码示例：html结构和css样式<style type="text/css"> * { margin: 0; padding: 0; } html,body { height: 100%; overflow: hidden; } #wrap,ul,li { ...
2020-02-15 21:22:15
85
原创 canvas的全局透明度和覆盖合成
全局透明度的设置globalAlpha = value这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明）默认是 1.0覆盖合成这里的source指的是：新的图像(源)这里的destination指的是：已经绘制过的图形(目标)globalCompositeOperation source-over(默认值):源在上面,...
2020-02-15 20:45:43
811
原创 canvas马赛克实现
canvas马赛克思路1、设定一个马赛克矩形的大小比如设定为5，就是一个（width：5px；height：5px）的矩形，2、从马赛克矩形中随机取出一个像素点信息，即rgba值；3、将整个马赛克矩形中的像素点信息统一调成随机抽出的那个当马赛克矩形为1时，就没有马赛克了代码示例：window.onload = function() { var canvas = docum...
2020-02-15 17:42:21
654
原创 canvas像素操作函数封装
获取单个像素点信息函数：// 传入一个ImageData对象，x轴的坐标，y轴的坐标function getPxInfo(imgdata,x,y){ var color = []; //获取ImageData对象中的data var data = imgdata.data; // ImageData 新对象的宽度。 var w = imgdata.width; // ImageDa...
2020-02-15 14:19:23
205
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人