Hank's Blog

arguments

arguments 是函数调用时，创建的一个伪数组，它存储实际传递给函数的参数。
arguments 是一个对象，它有两个常用的属性：length 、callee 。
需要注意的是 arguments 并不局限于函数声明的参数列表，举例如下

1
2
3
4
5
6

function obj(){
   console.log( 'arguments instanceof Array? ' + (arguments instanceof Array) ); // false
   console.log( 'arguments instanceof Object? ' + (arguments instanceof Object) ); // true
   console.log(arguments); // 3
}
obj('monkey','love',24);

BFC是什么

在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

Box

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。主要有两类盒子：

• block-level box(块级元素):display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
• inline-level box(内联元素):display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

ECMAScript5为数组定义了5个迭代方法，每个方法都接受两个参数：每一项上运行的函数，运行该函数的作用域对象（可选）。

• every() 若数组每一项都符合函数要求，返回true，否则返回false
• some() 若数组任意一项符合函数要求，返回true，否则返回false
• filter() 对数组每一项运行函数，返回符合函数要求的项组成的数组
• map() 对数组每一项运行函数，返回每次函数结果组成的数
• forEach() 对数组每一项运行函数，无返回值

利用css3的动画属性可以实现很多有趣的动画效果。

animation 循环动画

animation-iteration-count 属性设置为 infinite 可以使动画循环播放。

loading效果

demo1
定义一个垂直伸缩的 keyframes ，然后绑定在每个条子上，设置不同的animation-delay，就可以使每个条子运动起来，整体成波浪线运动。当网页中有需要等待的请求时，我们就可以插入这段动画，优化用户体验。

CSS3中有三个属性：transform、transition、animation，一直容易搞混，今天特意拎出来理一理。

transform 转换

transform 能够对元素进行移动、缩放、转动、拉长或拉伸。transform 分为2D转换和3D转换，由于目前浏览器对3D转换的支持度还不好，所以以下主要讲解2D转换。

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。注册全局指令的关键方法是directive(),注册局部指令的关键方法是directives（）

钩子函数

指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  Read more »

继续组件的内容，接下来是 vue 组件的重要内容。

父子组件

子组件只能在父组件中只用，写在html中的是父组件的标签。使用组件有三步：定义，注册，创建根实例。以下代码是很好的例子：

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

<div id="example">
    <my-component></my-component>
</div>
<script>
  //定义组件 
  var child = Vue.extend({
    template: "<div>this is a child component!</div>"
  })
  var parent = Vue.extend({
    template: "<div>this is a parent component! <child></child></div>",
    components: {
      'child': child 
    }
  })
  //注册组件
  Vue.component('my-component', parent)
  //创建根实例
  new Vue({
    el:'#example'
  })
</script>

引言

一开始接触vue的时候老实说我是一脸懵逼的，一下子还没从jQuery的思维中解脱出来，因此研究了好久的，过了一段时间后，再翻开vue的文档，总算是有些眉目了，现在记录下自己的理解吧，有写的不对的地方欢迎指正。这里只记录了我个人的理解，要详细的推荐Vue官方文档。

我理解的vue核心思想

1.视图参数化，数据驱动视图
view(DOM节点)的属性被参数化，参数化的值被记录在Vue实例的data属性中，当通过methods中的函数改变data中的数据时，view也会发生变化，从而达到数据驱动视图的作用。