- 博客(30)
- 收藏
- 关注
RSS订阅转载 Vue中的组件以及路由
模块化是一种思想，一种构建方式，把一种很复杂的事务拆分成一个一个小模块，然后通过某种特定的方式把这些 小模块组织到一起相互协作完成这个复杂的功能。在程序中也是一样的，之前学习的 JavaScript 模块化，不要在一个文件中写大量的代码在 Vue 中，组件就是用来封装视图的，说白了就是封装 HTML组件思想就是把一个很大的复杂的 Web 页面视图给拆分成一块一块的组件视图，然后利用某种特定...
2018-11-21 22:44:30
377
转载 Vue中的动画
为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；使用过渡类名HTML结构：这里是引用<input type="button" value="动起来" @click="myAnimate"><!-- 使用 transition 将需要过渡的元素包裹起来 --><transition name="fade">
2018-11-20 22:36:54
159
原创 Vue框架的自定义属性
（1）自定义全局的按键修饰符：Vue.config.keyCode.f2=113;** (2)自定义指令： v-指令名* 定义全局指令： Vue.directive(‘指令名’,{* bind:function(el,binding){** },* inserted:function(el,binding){** ...
2018-11-19 23:35:13
479
原创 Vue框架的过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；私有过滤器HTML元素：{{item.ctime | dataFormat('yyyy-mm-dd')}}私有 filters 定义方式：filters: { /...
2018-11-19 23:32:51
189
原创 Vue框架的简单应用
使用class样式数组 这是一个邪恶的H1数组中使用三元表达式 这是一个邪恶的H1数组中嵌套对象 这是一个邪恶的H1直接使用对象 这是一个邪恶的H1使用内联样式直接在元素上通过 :style 的形式，书写样式对象 这是一个善良的H1将样式对象，定义到 data 中，并直接引用到 :style 中在data上定义样式：data: {h...
2018-11-15 22:19:20
166
原创 Vue框架简介
什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第...
2018-11-14 22:35:22
2659
转载 less的用法
概述Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。因为 Less 和 CSS 非常像，学习很容易。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less...
2018-10-30 23:23:25
411
原创 Bootstrap 简介
1.什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的2.Bootstrap 包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。CSS：Bootstrap 自带以下特性：全局的 C...
2018-10-25 21:31:40
114
原创 iScroll
1.IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下： ... ... ... iScroll作用于滚动区域的外...
2018-10-24 23:06:54
147
原创 触摸事件和手势事件
1触摸事件touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。touchmove：当手指在屏幕上滑动时连续地触发。在这个世界发生期间，调用preventDefault()可以阻止滚动。touchend：当手指在屏幕上移开时触发。touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。上面这几个事件都会冒泡，也都可以取...
2018-10-23 22:50:14
219
转载 流水式布局
1、兼容性问题在国内的移动web浏览器绝大部分都是基于webkit内核的，所以一些css3和h5的新特性绝大部分都被支持，需要添加前缀，但是，不同机型之间可能会略有不同，所以需要自己踩坑。12、移动web和PC相比的差异性在哪里移动web的只要核心就是做自适应的布局，在手持设备上基本都是通栏，并且布局的细节比PC端要少，文字内容和模块也相对偏少13、移动端常见的布局–流式布局（百分比布...
2018-10-22 21:09:46
1376
原创 画布绘制图片
绘制图片drawImage()三个参数drawImage(img,x,y)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角五个参数drawImage(img,x,y,w,h)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角w,h 图片绘制尺寸设置(图片缩放，不是截取)九个参数drawImage(img,x,y,w,h,x1,y1...
2018-10-21 22:08:01
555
原创 画布
CanvasCanvas图形绘制矩形绘制rect(x,y,w,h) 没有独立路径strokeRect(x,y,w,h) 有独立路径，不影响别的绘制fillRect(x,y,w,h) 有独立路径，不影响别的绘制clearRect(x,y,w,h) 擦除矩形区域圆弧绘制弧度概念arc()x 圆心横坐标y 圆心纵坐标r 半径startAngle 开始角度endAngle 结束...
2018-10-17 23:00:08
156
原创 H5C3过渡
H5C3CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode2、b...
2018-10-10 23:08:33
364
原创 js解绑事件
/*注意注意注意！！：一定是用了什么方法绑定事件，就用对应的方式解绑事件1，第一种方式对象.on事件类型=function();=====解绑方式对象.on事件类型=null;2,第二种方式对象.addEventListener("事件类型",命名函数，false);=====解绑方式 对象.removeEventListener("事件类型",命名函数，false);3...
2018-09-12 23:10:27
599
原创 js节点
//12行代码====获取节点或者是元素 var ulObj = document.getElementById(“uu”); var liObj = document.getElementById(“list”); //获取ul的父级节点 console.log(ulObj.parentNode); //获取ul的父级元素 consol...
2018-09-11 22:14:41
107
原创 获取元素的方法
1，根据id属性获取元素，返回一个元素对象 document.getElementById("id名")； 2，根据标签名获取元素，返回一个伪数组，里面保存了多个DOM对象 document.getElementsByTagName("标签名"); 可能有的浏览器不支持一下方式： 3,根据name属性值获取元素，返回一个伪数组，里面保存了多个DOM对象 document.get...
2018-09-10 23:01:44
561
原创 JavaScript基础
1.内置对象 JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象 JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean… 对象只是带有属性和方法的特殊数据类型。 内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档 2.基本包装类型 为了方便操作基本数据类型，JavaScri...
2018-09-06 23:12:05
91
原创 JavaScript基础
1.对象 JavaScript的对象是无序属性的集合。 其属性可以包含基本值、对象或函数。 2.对象创建方式 a. new Object()创建对象 var person = new Object(); person.name = ‘lisi’; person.age = 35; person.job = ‘actor’; person.sayHi...
2018-09-05 22:07:35
127
原创 JavaScript基础
1.函数的返回值 当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值 返回值语法：//声明一个带返回值的函数 function 函数名(形参1, 形参2, 形参…){ //函数体 return 返回值; }//可以通过变量来接...
2018-09-04 21:20:35
89
原创 JavaScript基础
1.continue和break continue跳出本次循环,后面的代码都不会执行,直接静茹下一次循环,不改变循环的次数 break立即跳出循环,开始循环后面的内容,改变了循环的次数 2.数组和函数 数组:所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。 语法: var 数组名=new Array(...
2018-09-03 17:47:04
60
原创 JavaScript基础
1.if语句 if (/条件表达式 ) { 执行语句 }if ( 条件表达式 ){ 成立执行语句 } else { 否则执行语句 }if (/条件1 ){ 成立执行语句 } else if ( 条件2 ){ 成立执行语句 } else if ( 条件3 ) } 2.switch语句 switch (expression) { c...
2018-09-02 11:06:53
72
原创 JavaScrip基础
1.变量: 计算机内存中存储数据的标识符,根据变量名称可以获取到内存中的数据 2.数据类型: a.number b.string c.boolean d.undfined e.null 3.数据类型的转换 1.转换成string类型 a.变量名.toString b.String 注意:undefine...
2018-08-30 17:49:39
100
原创 css学习day7
1.web字体 http://fontello.com/ http://www.iconfont.cn/ 在上面两个网站下载好自己需要的字体,然后引入到html,准备工作完成后, 第一步：在样式里面声明字体： 告诉别人我们自己定义的字体@font-face { font-family: ‘icomoon’; src: url(‘fonts/ic...
2018-08-29 22:15:27
113
原创 css学习day6
cssg高级:显示与隐藏 1.display:none 隐藏元素,位置保留 2.visibility: a.hidden 隐藏元素,位置保留 b.visible 对象可视 3.overfloat:hidden 超出盒子的部分内容隐藏,隐藏后位...
2018-08-28 17:45:15
81
原创 css学习day5
定位 1.静态定位: 默认定位即标准文档原本的位置 2.相对定为(position:relative) 以自己原本的位置定位,移动后,自己原本的位置还在 3.绝对定位(position:absolute) 完全脱离文档流,以父元素定位,若父元素没有定位,则找父元素的上一级,若上级全没定位,则以浏览器定位 4.固定定位(position:fixed) 以浏览器定位.不随...
2018-08-27 23:06:12
77
原创 css学习day4
1.padding: 内边距即内容与内容之间的距离,使用这个的时候,会把盒子撑大,此时盒子的大小是自身宽高加上padding值再加上border; padding值撑大盒子解决办法: 改变盒子宽高,使宽高+padding+border=之前的宽高 2.margin: 外边距即盒子与盒子之间的距离,当两个盒子在垂直方向上设置margin值时，会出现一个...
2018-08-25 16:33:02
117
原创 css学习day3
1.行内元素 设置的宽高不生效,宽度是内容撑起额 2.块级元素 可以设置宽高且占一整行 3. 行内块级元素 兼具行内元素和块级元素的特性,可以设置宽高且不占一整行的距离 4.元素间的转换 display:inline-block;block即可 5.选择器间的权重 !inportant 无穷大 id选择器100分值...
2018-08-23 23:21:24
206
原创 css学习day1
1.css 的样式 行内样式:写在要修饰的那条代码里面 内部样式:与head位兄弟关系 外部样式:由link标签引入 2.选择器 id选择器:唯一的 class选择器:与id选择器类似,但不是唯一的 后代选择器和子代选择器 3.a:link 未访问的链接 a: visited 鼠标点点击之后的状态 a:hover 鼠标放上去的...
2018-08-22 18:02:37
180
1
原创 html学习day2
1.列表标签 a.有序列表（ol） 列表中的内容按顺序（数字，字母等）排列 b.无序列表（ul） 列表中的内容前面有个小圆点 c.自定义列表（dl） 用来解释中的内容 2.表格标签（table） border：表格边框 cellspacing：单元格间距 cellpadding...
2018-08-21 20:59:47
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人