由于工作需要,最近在写一些前端的东西。经过向开发经验丰富的前端工程师的请教之后，得出一个结论----2016年前端被玩坏了，其实对于我来说我并不是太了解这句话的深刻含义，只是觉得是不是因为前端技术突飞猛进，导致前端的技术太多太杂。不管这些了，至少我不打算淌前端这趟浑水。
我们先说一下我学vue.js的原因，最近由于需要想写一个微信公众平台，前端部分由于只学过angularjs，但是通过测试发现并不适合用来做微信公众平台webapp的开发，因为这个框架并不能算是轻量级框架，如果你要求每一个访问微信公众平台的关注者每次都下载几百KB的lib库，我想这并不科学。所以决定使用vuejs，一个轻量级的前端mvmm框架。今天我们首先对vuejs的组件进行初步的学习。
1.IS特性， 首先我们来解释一下组件这个基本的概念：组件可以扩展html，封装可重用的代码。同时组件也可以自定义元素，来达到对html的高度封装。当然组件也可以是原生的html代码，并以is特性扩展。其实这里如果大家之前有学过angularjs的话很好理解关于组件的封装这个特性，类似与angularjs中的自定义指令。但是is特性是什么意思？我们通过一个简单的例子来理解一下啊。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>Title</title> </head> <body> <div id="app"> <h1 is="test"></h1> </div> <script type="text/javascript"> var mytest = Vue.extend({ template: '<h1>{{a}}</h1>', data: function () { return{ a: "this is a test" } } }); var vm = new Vue({ el: "#app", components: { "test": mytest } }); </script> </body> </html>
我们解释一下这段代码： 首先是一个div元素，并且我们应该指定一个id或者class，这是为了我们下面能定位Vue初始化作用范围。接下来我们从创建Vue对象开始，提供了两个参数，el：指定了对象多用的元素，components指定了我们在元素范围内的组件，是一些k-v对，这里就是is特性的对应规则，我们通过html元素中is制定的值来映射到我们创建的组件中，这就是我们前面说的is特性。
2.组件构造： 上面我们简单的介绍了一下组件的概念，下面我们来介绍一下组件的构造过程，语法结构如下：
A： 创建组件：var myComponent = var.extend({.......});
B: 将构造器用作组件：Var.component（“my-component",myComponent);
当然此时我们只需要对上面的代码进行小改动即可完成这种映射，我们只需要将html中<h1 is="test"></h1>换为我们创建的组件即可，如下：<test></test>。当然这里我们只是一个例子，在实战中我们还应该注意自定义标签的命名规则，应该尽量符合w3c的命名规则，即××-×××,例如：my-component（虽然并不强制）。
3.流程总结： 我们在进行自定义组件的时候应该尽量保持这样一个流程：
A: 定义组件：
var myComponent = Vue.extend({
template: <h1>test</h1>
)}
B: 注册： 就是将我们自定义的组件与标签之间进行映射：
var.component（”my-component",mycomponent);
C: 创建vue实例，并在html中使用我们自定义的组件对应的标签。
4.局部注册： 有时间我们并不是一个组件中只能包含html代码，在开发的过程中我们可能会在不同的组件中调用一些共同的代码，但是我们又不想重复来写这段程序。这样我们就可以把我们的这段共同代码封装成一个组件，在其他组件中进行局部注册即可。我们来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/javascript">
var son = Vue.extend({
template: '<span>I am son</span>'
});
var father = Vue.extend({
template: '<h1>I am father<my-son></my-son></h1>',
components: {
'my-son':son
}
})
Vue.component("my-component",father);
var vm = new Vue({
el:'#app'
});
</script>
</body>
</html>
我们讲解一下语法： 为了让组件son能够正常的显示出来，我们需要在father中使用components属性，并在属性中对son进行注册，然后我们在father的template中进行调用。
5. 组件构造选项问题： 组件在构造的时候，我们应该注意它的选项问题，传入Vue构造器的多数参数也可以同时传入到组件构造器中，除了data和el两个参数。如果我们在使用的时候简单的采用var data={a：××}这样的做法的时候，我们将会发现这样一个问题，我们构造的组件将会在全局共享data数据。正确的做法是：
A： data：我们的正确做法是使data称为一个函数，并且在函数中返回对象：eg：data：function{ return{a:1}};
B: el： 我们必须制定el为一个函数，并且返回el对应的元素