Hank's Blog

event.srcElement与event.target两者作用相同，都是指向触发事件的元素，包含了该元素的各种属性。IE浏览器支持srcElement，而firefox支持target，解决兼容的方法

1

var eve = event.srcElement ? event.srcElement : event.target;

this 与 event.srcElement

1
2
3
4
5

<input type="text" onblur="alert(this.value)"/> // 合法
<!-- fuction method() {
  alert(this.value);
} -->
<input type="text" onblur="method()"/> // 非法，method() 是被响应函数调用的函数。 

解决方法如下

1
2
3
4

<!-- fuction method(btn) {
  alert(btn.value);
} -->
<input type="text" onblur="method(this)"/>

或者

1
2
3
4

<!-- fuction method() {
  alert(window.event.srcElement.value);
} -->
<input type="text" onblur="method()"/>

Variables

less定义变量的符号是@，sass定义变量符号是$。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
@mySelector: banner;
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

Variables

sass定义变量符号是$，less定义变量的符号是@。

1
2
3
4
5
6
7
8
9
10

$bule: #2a8ee3 !global; // 全局变量
$borderDirection: top !default; // 默认值
$baseFontSize: 12px;
$baseLineHeight: 1.5;
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

1
2
3
4
5
6
7

$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 使用 XML 格式定义图像。

1
2
3
4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="140" height="140">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

SVG 代码在<svg></svg>内，这是根元素。width和height属性可设置此 SVG 文档的宽度和高度。version属性可定义所使用的 SVG 版本，xmlns属性可定义 SVG 命名空间。SVG 有一些预定义形状可以放在<svg></svg>里面。

注意！cx cy r x y等这些属性不要写在style属性里，会有兼容性问题。

SQL 是用于访问和处理数据库的标准的计算机语言。SQL 语句不区分大小写。注意在命名表的时候不要用MySQL的关键字（关键字一览表），否则插入数据的时候就报错。

SELECT - 从数据库中提取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 查询整个表
SELECT * FROM table_name;
// 查询指定列
SELECT column_name, column_name2
FROM table_name;
// 查询作者是 hanger 的文章，并按发布时间降序排序(默认升序 aes)
select * from articles where author = 'hanger' order by publish_time desc
// "Websites" 表中选取所有网站，并按照 "country" 和 "alexa" 列排序
SELECT * FROM Websites
ORDER BY country,alexa;
// DISTINCT 使查询结果去除重复值
SELECT DISTINCT column_name, column_name
FROM table_name;
// "Websites" 表中选取 alexa 排名大于 "15" 且国家为 "CN" 或 "USA" 的所有网站
SELECT * FROM Websites
WHERE alexa > 15
AND (country='CN' OR country='USA');
// 查询前五条数据(limit index, length)
SELECT * FROM Persons
LIMIT 0,5;

实例

1
2
3
4
5
6
7
8
9
10
11
12
13

var Obj = function(msg){
  this.msg = msg;
  this.shout = function(){
      console.log(this.msg);
  }  
  this.waitAndShout = function(){
      setTimeout(function () {
          this.shout();
      }.call(this),200);
  }
};
var obj = new Obj('haha');
obj.waitAndShout();

obj对象调用了waitAndShout,所以waitAndShout中的this指向obj，而setTimeout第一个参数的函数this被call指向了外层作用域的对象，即obj对象，所以打印出haha。这里如果不加.call(this),就会报错this.shout is not a function。

核心

this永远指向最后调用它的对象（其上一级对象）；
函数没有被其上一级对象调用，其this指向window，严格模式下指向undefined；
函数被其上一级对象调用，其this指向其上一级对象。

递归函数定义：** 函数体内调用自身的函数 **。
递归函数只有在特定的情况下使用 ，比如阶乘问题：

1
2
3
4
5

function factorial(num) {
  if (num <= 1) return 1;
  else return num * arguments.callee(num - 1);
}
factorial(4); // 24

代码中的arguments.callee可以替换为factorial，但是如下情况会导致错误：

1
2
3

var anotherFactorial = factorial; 
factorial = null;
anotherFactorial(4); // Uncaught TypeError: factorial is not a function

安装 vue-cli

使用npm install vue-cli -g来安装或者更新vue -cli。

初始化项目

vue init 模板名称 项目名称
这里的模板名称官方提供5种：webpack、webpack-simple、browserify、browserify-simple、simple。
项目名称自己取，不需要加引号，不能大写。
创建好项目后npm install下载依赖，然后npm run dev启动项目。

用vue写的项目中遇到给router-link标签添加事件@click、@mouseover等无效的情况
解决方法是使用native

原代码：

1
2
3

<router-link  v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag(index)" @mouseout="outTag(index)">{{item.listTitle}}
    <i class="contain_tab_close" v-show="selected==index"></i>
</router-link>

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

如果在想要在router-link上添加事件的话需要@click.native这样写。

所以如果要事件有效的话，应改成如下：

1
2
3

<router-link  v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover.native="overTag(index)" @mouseout.native="outTag(index)">{{item.listTitle}}
    <i class="contain_tab_close" v-show="selected==index"></i>
</router-link>

Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数。

其中max()和min()的参数不能是数组只能是数字，如果要求数组中的极值则可以使用Math.max.apply(Math, array)。