2017.08.29
New
- 事件绑定DOM事件处理
var vm = new Vue({
el: 'root',
data: {
},
methods: {
doSomeThing: function() {
},
doAnotherThing: function() {
}
}
});
声明 Vue 实例方法时，Vue.js 会将方法绑定到 Vue 实例上，而 ES6 的箭头函数不支持 this 绑定，因此不能使用 ES6 的箭头函数声明 Vue 实例方法。
在后面学习的 watcher 回调函数也被绑定到 Vue 实例上，因此也不能使用 ES6 的箭头函数声明 watcher 回调函数。
- watch 的使用
对于由一个数据变化引发多个数据、状态变化的情况，我们推荐使用 watcher；数据变化触发组件间或前后端交互的情况，使用 watcher 也更简明。
关于 watcher 的应用场合，试举例如下：
某元素通过 v-show 显示后延时隐藏，可以观察 v-show 所绑定的数据，当数据为真时，启动定时器延时重新设置 v-show 所绑定的数据隐藏元素； 日历控件中，日期数值发生变化，获取年、月，计算并重绘日历面板； 分页控件用户点击页码触发 pageIndex 数据变化，观察到 pageIndex 变化时触发向后端发起 AJAX 请求，获取该页码中的数据记录，并在获取数据记录后更新分页控件中的页码及状态； 用户输入地址，数据变化触发向高德地图发起 AJAX 请求，获取相类似的地址列表并实现 auto-complete； ……
由于 watcher 通过函数回调响应数据变化，而在回调函数中还有可能触发其他数据变化引发其他 watcher 回调，因此需要避免滥用造成回调结构过于复杂，影响性能。
在设置 watch 选项属性时，若其键值为对象，可以通过 deep 属性指定是否实现深度观察，注意观察数组的变动不需要设置 deep 属性。
通过下面 watcher 设置的代码可以验证，当进行深度观察时，若只是修改对象属性的值，则回调函数的两个参数 val 和 oldVal 指向同一个对象，因此无法通过 oldVal 找回修改之前的对象副本。数组异动方法或 Vue 实例的 $set、$remove 方法导致的数组数据变化，其观察回调的情形与此类似。
user: {
handler: function(val, oldVal) {
console.log(val === oldVal);
},
deep: true
}
开发中常用到的单位和取值
- 长度值单位
rem：相对长度单位。相对于根元素(即html元素) font-size 值的倍数。 vw：相对于视口的宽度。视口被均分为100单位的vw，例如：
h1 {
font-size: 8vw;
}
/*
如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100。
*/
vh：相对于视口的高度。视口被均分为100单位的vh（示例如上）。 vmax：相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax，例如：
h1 {
font-size: 8vmax;
}
/*
如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300)/100，因为宽度比高度要大，所以计算的时候相对于宽度。
*/
vmin：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（示例如上）。
- 角度值单位
deg：度（Degress）。一个圆共360度。
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
- 时间值单位
s：秒。 ms：毫秒。
- 颜色值
RGBA：RGBA(R,G,B,A)，取值如下： R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数 A：Alpha透明度。取值0~1之间
图像值（渐变值）
linear-gradient()语法：
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]?取值： 下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
<angle>：用角度值指定渐变的方向（或角度）。 to left：设置渐变从右到左。相当于: 270deg。 to right：设置渐变从左到右。相当于: 90deg。 to top：设置渐变从下到上。相当于: 0deg。 to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 <color-stop>：用于指定渐变的起止颜色。 <color>：指定颜色。 <length>：用长度值指定起止色位置。不允许负值。 <percentage>：用百分比指定起止色位置。
create time: 2017.08.29 13:00
Typescript Handlerbook 中文版 —— gulp 构建使用章节 demo 项目
如何使用 gulp 来搭建 typescript 的开发环境
npm i -g gulp
mkdir proj proj/dist proj/src
cd proj
npm init (main: './dist/main.ts')
yarn add typescript gulp gulp-typescript --dev
- gulpfile.js ```js // 导入构建工具包 gulp var gulp = require('gulp'); // 导入 typescript 的 gulp 工具包的工程插件 var ts = require('gulp-typesript'); // 通过 ts 工程插件的 createProject 方法，传入 ts 的工程配置文件 来创建 ts 工程 var tsProject = ts.createProject('tsconfig.json');
gulp.task('default', function() { return tsProject.src() .pipe(tsProject()) .js.pipe(gulp.dest('dist')); });
- tsconfig.json
```json
{
// 要编译的文件列表
"files": [
"src/main.ts",
"src/greet.ts"
],
// 编译定制选项
"compileOptions": {
"noImplicitAny": true,
"target": "es5"
}
}
run
yarn
gulp
node ./dist/main.js
自我实现栅格布局（三列）: 视口单位运用
重点是 每列宽度的组合 总宽度要等于 100%，由于采用浮动布局，所以总宽度只可以小于100%， 不可以大于100%。
html, body, p, ul, table {
margin: 0;
padding: 0
}
.wrapper {
margin-bottom: 2vh;
}
.container {
padding: 0 6vw;
}
.col-1, .col-2, .col-3 {
float: left;
box-sizing: border-box;
margin-left: 0.333%; /* 3 , 1+2, 1+1+1 */
min-height: 20vh;
padding: 2vw;
background: rgba(255,0,0,.4);
}
.col-1 {
width: 33%;
/* 33 + 33 + 33 + 0.333 * 3 */
/* 33 + 66 + 0.333 * 2 */
}
.col-2 {
width: 66.66%;
}
.col-3 {
width: 99.7%;
}
create time 21:00
CSS3 动画（变形、过渡、动画）
- tip: 鼠标悬浮到父元素子元素发生样式变化的写法
.box:hover .box_item { /* ...*/ }
- tip: 鼠标悬浮到父元素伪元素发生样式变化的写法
.box:hover:after { /* ... */ }