'插件常用指令'

发表于 2017-05-10

webpack

1	npm install webpack webpack-dev-server --save-dev

babel

1	npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader vue-loader --save-dev

plugin

1	npm install html-webpack-plugin --save-dev

'Vue的生命周期'

发表于 2017-05-06

生命周期

vue在组件的每个环节都提供了钩子函数(回调)

当调用vm.$mount()挂载后执行挂载数据
当调用vm.$destroy()后执行删除实例

图示

vue声明周期图解

8个状态

let vm =new Vue({
    el:'#app',
    data:{
        msg:data
    },
    beforeCreate(){
        alert('开始创建前触发')
    },
    created(){
        "use strict";
        alert('创建完成时触发')
    },
    beforeMount(){
        "use strict";
        alert('挂载之前')
    },
    mounted(){
        "use strict";
        alert('挂载完成后')
    },
    beforeUpdate(){
        "use strict";
        alert('更新之前')
    },
    updated(){
        "use strict";
        alert('更新完成')
    },
    beforeDestroy(){
        "use strict";
        alert('销毁之前')
    },
    destroy(){
        "use strict";
        alert('销毁完成')
    }
});

'Buffer'

发表于 2017-05-06

node

换算当前位的值*禁止^(当前位-1)
255转换为16进制是ff

'vue-router'

发表于 2017-05-04

安装

1	npm install vue vue-router bootstrap animate.css --save

不切换页面,展示不同的内容

html部分

<!--路由的链接-->
<div id="app">
       <router-link to="/home">home</router-link>
       <router-link to="/list">list</router-link>
       <!--当路由匹配到后,会将组件插入到router-view中-->
       <router-view>
       </router-view>html
</div>****

js部分

//什么叫路由：不同的路径返回不同的内容,span 不同的路径显示不同的组件
  var home = {
      template: '<div>首页</div>'
  };
  var list = {
      template: '<div>列表页</div>'
  };
  //默认是hash #home
  const routes = [
      {path: '/home', component: home},
      {path: '/list', component: list}
  ]; //路由映射表

默认页面首先router-view是空的,因为没有进行过匹配
1. 配置一个默认页面
2. 直接跳转到某个hash
页面跳转
- router.push(‘/aaa’) 跳转页面,会产生历史管理
- router.replace(‘/aaa’) 会跳转页面,不产生历史管理

常用方法

router.beforeEach(to,from,next) 当路由切换的时候,会触发这个函数,范围最大,任何路由切换都会触发此函数三个参数
1. to 去哪个路由
2. from 从哪个路由来
3. next 表示是否向下执行,是一个函数如果调用next()表示继续,否则卡在这个不动
beforeEnter(to,form,next)
beforeRouteEnter(to,form,next)

'初次认识webpack'

发表于 2017-05-03

require.js AMD

sea.js CMD

es6 module

node.js common.js

1	npm install webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 css-loader style-loader file-loader url-loader html-webpack-plugin --save-dev

webpack

universal module definition(umd)
grunt -> gulp -> webpack ->rollup
不管什么样的文件都当做模块引用‘

安装webpack
1. npm install webpack -s
2. 修改脚本 -> package.json
  1
  2
  3
  "scripts": {
  "build":"webpack"
  },
3. 运行脚本
  1
  npm run build
webpack 会将所有相关模块都编译到build中指定文件中

loader

{
               test:/\.js$/,
               //babel-loader 把es6编译成es5
               loader:'babel-loader'
           },
           {   //加载模块(require,import)的时候,会用正则匹配文件后缀,如果匹配上,则执行对应的加载器
               test:/\.css$/,
               loader:'style-loader!css-loader' //多个加载器之间可以用感叹号分割开
           },
           {
               test: /\.(jpg|png|gif|svg)$/,
               loader: "url-loader?limit=8k"
           }

.babelrc

{
  "presets": ["es2015", "stage-0"],
  "plugins": []
}

install webpack-dev-server -S
安装最后一个插件
1
npm install html-webpack-plugin -S

node

发表于 2017-04-22

'网页布局'

发表于 2017-04-13

网站的布局方式

PC：固定布局(固定宽度+Float+Position)
移动端
- PC兑换和移动端公用一套页面结构,地址同意(wwww.liebao.cn) 例如:猎豹,华为
- 流式布局+媒体查询先按照传统的PC的页面去布局,再用媒体查询去单独控制元素,比如在PC端有一个导航结构叫nav,移动端的需求需要把nav给隐藏掉
  @media screen and (max-width:760){}
- @media 媒体查询
  - 设备的类型 : screen(屏幕)||all(所有的设备)||print(打印机)
  - 连接符 : not(过滤)||only(只对某一个机型做适配)
  - 条件：max-width(最大宽度值) || min-width(最小宽度值)
    布局方式有三种

流式布局(百分比布局宽度,font-size margin padding line-height px/rem)
rem布局只试用在移动端默认1rem为16px ,通常修改为1rem=100px(方便计算,减少和设计稿的偏差) logo 100100—>1rem1rem
flexbox 弹性布局(弹性盒模型)
- float position vertical-align 都不起作用

'移动端'

发表于 2017-04-09

产品形态
- pc和移动端(手机丶ipad)公用一套html结构，例如：猎豹华为
- . pc和移动端分离开 www.ifeng.com i.ifeng.com i/m 移动端地址
响应式布局的思想
- 流式布局 + px + 媒体查询
- 流式布局 +rem(font size of root element)
- flexbox弹性布局
设计稿的尺寸
- PC:宽屏和窄屏
- 移动端
  1. iphone5 640*1136 单屏 >1136 多屏
  2. iphone6 750*1334 单屏 >1334 多屏
  3. 6p 1242*2208 单屏 >2208多屏
rem(font size of root element)
html->fontSize = 设备的尺寸/设计稿*100 + ‘px’; 得到的结果会一直动态变化

'css3动画'

发表于 2017-04-06

css3中所有的属性都是即时效果
transition过渡动画:property duration timing-function delay;

语法:在一定时间内,css值由起始值向预定值过渡所产生的效果
- 只有两种状态:起始状态–>结束状态
- transition过渡动画执行需要触发条件
transition为复合属性
1. transition-property 过渡属性,默认值是all
2. transition-duration 过渡时间,必须设置
3. transition-timing-function 运动类型:
  - ease(默认值,减速)|liner(匀速)|ease-in(加速)|ease-out(减速)|ease-in-out(先加速后减速)|cubic-bezier(贝塞尔曲线生成)
  - 解读贝塞尔曲线_简书
4. transition-delay 延迟时间(规定动画运行的先后的顺序)
5. 动画运行结束时会产生’transitionend事件:
  1
  oDiv.addEventListener('transitionend',function(){})

transform

rotate(),scale(),skew()默认的基准点可以转变,translate()默认的基准点不是不可更改的
Transform-origin top|left|bottom|right|x|x,y|center旋转的基点
组合使用时,基点会改变,不同顺序会导致结束效果不同,通常情况下是放在最后使用

rotate()旋转度数
- deg 度数
scale() 缩放函数默认为1
- scaleY();
- scaleX();
skew(x|x,y) 倾斜函数:
- skewY(); 正->往下,负->往上
- skewX();正->往左，负->往右
translate(x|x,y) 位移函数 ;默认值为0,0
- translateX();
- translateY();
  帧动画

复合写法:animation:move 1s ease 0s reverse 2 forwards
animate动画库
特征:
1. 可以有多种状态,可以制作复杂的动画效果
2. 不需要触发条件,浏览器加载可直接运行

实现帧动画需要如下两个步骤

通过@keyframes 动画名; 声明帧动画->决定了帧动画的运行轨迹
-

@keyframes move{
        0%{/*第一帧*/
 }
        20%{}
        50%{}
        100%{/*最后一帧*/
 }
 }

animation调用帧动画

属性
1. 帧动画调用
  - animation-name:move
  - animation-duration 动画执行的时间
  - animation-timing-function 动画运行的速度
  - animation-delay 动画延迟的时间
  - animation-direction: normal|reverse(反方向)|alternate(交替)|alternate-reverse(反方向交替)
  - animation-iteration-count:1|infinite(无数次) 动画执行的次数
  - animation-play-state:paused|running(默认值) 动画运行的状态
  - animation-fill-mode:null|backwards(第一帧开始)|forwards(停留在最后一整)|both(从第一帧开始,结束后停留在最后一帧) 动画结束后的状态
    关键帧动画steps(多少帧动画,start/end)
如果第二个参数不写,默认的是end
1
-webkit-animation: box 3s steps(3,start);

精灵动画(sprites) –>雪碧图只能是background-position

3D动画

如果想要在3d空间里展示,一开始必须要设置两个属性
1. transform-style:flat|preserve-3d(3D空间里展示);作用在变形元素的父标签上
2. perspective:2000px;景深(近大远小,视距,隔着多远去看物体),作用在祖先标签上(包含父标签)
3. perspective-origin 透视点位置
4. rotate3d(rx,ry,rz,a) rx,ry,rz向量坐标 a是角度

'CSS3'

发表于 2017-04-05

选择器

css2选择器
- 基本选择器：
  1. 标记选择器
  2. 类选择器
  3. id选择器
- 复合选择器：
  1. 交集选择器
  2. 并集选择器
  3. 后代选择器
  4. 子选择器
  5. 相邻选择器(E~F E+F)
- 属性选择器
  input[type=”text”]
- 通配符选择器： *
- 伪类选择器
  1. :hover
  2. :link
  3. :active
  4. visited
css3选择器
- 结构选择器
  1. ul:nth-child(1) :第一个子元素,等价于first-child
  2. ul:nth-child(2n) :从0开始设置,获取所有的偶数子元素
  3. ul:nth-child(2n+1) :奇数子元素
  4. ul:nth-child(even) :等价于2n
  5. ul:nth-child(odd) :等价于2n+1
  6. ul:last-child()
  7. ul:first-child()
  8. ul:nth-of-type(n) :通过类型筛选出子元素
    - 现将所有的子元素按照标记名分类,然后从同种类型中找出第n个子元素
  9. ul:first-of-type –>ul:nth-of-type(1)
  10. ul:last-of-type
  11. :only-child 只有一个子元素
  12. :only-of-type 同种类型中的子元素只有一个
  13. :empty 没有子元素(包含文本,换行,空格)
- 否定选择器
  1. :not(nth-child(n)) 除了第n个子元素
  2. :not(nth-of-type(n))
- 属性选择器:通过属性值筛选出某些元素
  - E[attr=val] –>input[type=”submit”]
  - E[attr|=val] 必须以val的字符开头或者 val-开头
  - E[attr*=val] 属性值中只要包含包含val字符串
  - E[attr~=val] attr的属性有多个,其中有一二个属性值为val
  - E[attr$=val] 以val结尾
  - E[attr^=val] 以val开头
- 目标伪类选择器
  - :target
- 伪元素
  - :first-line 匹配第一行文本
  - :first-letter 匹配第一行文本的首字符
  - :
CSS属性
1. border-radius
2. liner-gradient
  - 渐变是作用在background属性上
  - 渐变方向是沿着一条直线轴的方向
  - 参数:
    1. 第一个参数是设置方向:top/left/buttom/right/deg
    2. 从第二个参数开始设置颜色和位置
  - repeating-liner-gradient();
  - radial-gradient(circle,red,green);
    1. circle 圆
    2. ellipse 椭圆
    3. at top|10px 10px 来设定圆心的位置
    4. 自己可以设置水平半径和垂直半径
    5. closest-corner at 50px 50px
3. background
  - origin :padding-box/content-box/border-box
  - clip :text(文字区以外的部分剪裁.只支持webkit内核)
  - size : 百分比/px/contain/cover
  - attachment :默认值为scroll/fixed为固定
4. 滤镜
5. 盒子阴影(box-shadow):h v blur spread color insert
6. text-shadow:h v blur color
7. text-stroke 镂空字体
8. mask 遮罩层(webkit有效)
  - repeat/no-repeat
  - position
    rem布局(font size of root element)

默认:1rem = 16px;
谷歌浏览器默认的字体大小是12px

webpack

babel

plugin

生命周期

图示

8个状态

node

安装

不切换页面,展示不同的内容

常用方法

require.js AMD

sea.js CMD

es6 module

node.js common.js

webpack

网站的布局方式

布局方式有三种

transition过渡动画:property duration timing-function delay;

transform

帧动画

关键帧动画steps(多少帧动画,start/end)

精灵动画(sprites) –>雪碧图 只能是background-position

3D动画

选择器

rem布局(font size of root element)

精灵动画(sprites) –>雪碧图只能是background-position