学习Vue组件实例
vue实例
项目启动过程
看一下现在我们的项目，想想整个项目的启动过程是什么（以直接打开index.html的方法访问为例来说明）？
你首先打开了index.html，里面只有一个写了一个id='root'的div，还有你引入了打包之后的代码，然后vue自己肯定运行了一下（可以认为是vue初始化）。
接着，应该是执行了entry.js(因为打包是webpack打包的，你配置的入口文件就这一个)。
entry.js干了什么，是的，创建了一个vue实例对象，然后这个对象管理的区域根据el属性知道，应该是index.html中id='root'的那个div，因此余下的事情就只有明白这个vue实例对象是如何管理这片区域的就可以了，这就是接下来的内容了。
什么是vue实例对象?
根据官方文档的说明：每个vue应用都是通过用vue函数创建一个新的vue实例开始的。
你可以简单的理解，他就是一个普普通通的对象罢了，只不过这个对象被赋予了一些特殊的功能，让我们来了解一下他吧！
【我们接下来都是在entry.js里面创建的那个vue对象上面进行实验的】
一个vue实例对象创建的方法如下：
var vm=new vue({
//一堆配置
});
因此，接下来要说的就是一些常用的配置（不是全部，比较特殊的以后应该会说，毕竟开始就全部，我怕彼此心都太累了）。
vue实例对象基本配置
【1】el:选择器| dom结点
在我们的项目中，我们配置的是：
el:'#root'
这是一个字符串，有点类似css选择器，它会使用查找到的结点作为管理区域（当然还有别的css选择器也可以）。
除此之外，你还可以直接传递一个结点，比如现在我们修改一下代码：
el: document.getelementbyid('root')
这样也是可以了，你可以试试。
【2】render:(createelement:()=>vnode)=>vnode
上面的是es6的箭头函数写法，举个栗子：
((x,y)=>x+y)(1,2)
上面es6的写法等同于下面es5的写法：
(function(x,y){
return x+y;
})(1,2);
简单的说就是：(x,y)=>x+y就表示一个有二个参数x和y，返回x+y的函数，因此上面的函数用es5的写法就是：
function(createelement){
//createelement是一个函数，返回类型为vnode
//这个函数的返回类型也应该是vnode
return vnode;
}
备注：vnode是vue编译生成的虚拟节点，想一下jquery节点，还有node节点，是不是味道很像。
因此，我把项目中的render稍微改一下：
render: function (createelement) {
return createelement(app);
}
是不是很清晰了，说白了，就是一个最后返回值是vnode的函数。
因此看见节点这二个字，应该可以理解页面为什么显示的是app里面的模板了吧，如何路由调整为什么配置的是.vue文件大概也有点感觉了吧。
【3】router:vuerouter
这个比较容易理解，就是知道使用的路由配置是什么，由于项目中是：
router:router
看着很奇怪，我们稍微修改一下：
//上面的import routerobj from './router';这一句要跟着修改一下 router: routerobj
基本的就到这里，就三个，别的属性因为还关联很多东西，会一点点来说明。
vue对象生命周期
官方的图我就不放了，感觉意义不大，推荐入门了以后可以去看看，因此后面的文章可能会说。
下面我们来先在entry.js里面修改一下代码，看看运行结果，下面是代码：
//根对象
var vm = new vue({
//挂载点
el: document.getelementbyid('root'),
//2.使用刚刚的路由配置
router: routerobj,
//启动组件
render: function (createelement) {
return createelement(app);
},
//下面是vue对象的几种状态
beforecreate: function () {
console.debug('vue对象目前状态：beforecreate');
},
created: function () {
console.debug('vue对象目前状态：created');
},
beforemount: function () {
console.debug('vue对象目前状态：beforemount');
},
mounted: function () {
console.debug('vue对象目前状态：mounted');
},
beforeupdate: function () {
console.debug('vue对象目前状态：beforeupdate');
},
updated: function () {
console.debug('vue对象目前状态：updated');
},
beforedestroy: function () {
console.debug('vue对象目前状态：beforedestroy');
},
destroyed: function () {
console.debug('vue对象目前状态：destroyed');
}
});
运行一下看看控制台。
因此，就是说，vue对象从创建前到最后死亡，在各个阶段状态改变的时候，都提供了一个钩子方法，你可以注册一下，如果你希望在特定状态改变的时候干点什么的话。
到这里，基本上vue对象实例应该比较清楚了吧？看看我们的代码，应该只有那几个.vue的文件里面的东西没有说清楚了（本文就是把前面写过的代码都说清楚，后面就可以一个新知识点接着一个的来丰富项目，因为都没有疑惑了，学习起来应该不会痛苦了吧！）。
vue组件实例
说明
vue组件的定义方法不是只有我们之前写的建立.vue文件那一种，比如你还可以通过vue.component()的方法来创建，不过这些都以后吧，我们这里就只说明.vue文件这一种（不喜欢一下子说太多，而且仔细想想，不就是api吗）。
【下面都是在pagetwo.vue里面进行修改，菜单名称修改为:vue组件实例】
.vue文件的基本模板如下（下面都会是es5的写法，本人还是不太喜欢es6或者ts，原谅我，反正本质一样）：
<template>
</template>
<script>
export default {
//一些配置，和前面说的vue实例类似
}
</script>
<style>
</style>
三个地方，分工明确：模板 + 控制 + 样式
接下来我们说明配置中常用的选项（很多具体的就留到后面一点点品位，好吧，留的有点多）：
常用配置
【1】data
先看看pagetwo.vue现在的代码：
<template>
<section>
<input type="text" v-model="justdoit">
<div>
输入的数据：{{justdoit}}
</div>
</section>
</template>
<script>
export default {
//一些配置
data() {
return {
justdoit: "初始化数据"
};
}
};
</script>
<style>
</style>
模板中的代码应该不用说了吧，前面一篇文章说的很清楚了，直接看看data。
其返回了一个键值对（还有别的写法，推荐你这样写，因为这里如果"初始化数据"这几个字是变量，这种写法形成了闭包，是安全的），在这里就是给当前组件对象是data里面添加了一个justdoit的数据，然后上面或者别的地方才可以用，他就是干了这事情。
【2】methods
接着，我们添加一下methods属性：
methods: {
doit() {
alert(this.justdoit);
}
}
其实methods和data类似，只不过是用来添加的不是数据，而是方法，因此，你现在可以在模板里面添加下面代码来调用这个方法（记住，添加的全部代码必须由一个标签包裹）：
<input type="button" value="doit" v-on:click="doit()">
v-on:click就是类似原生的onclick，不过因为是vue的方法，你应该用他的。
现在，你可以点击一下页面的按钮试一下，是不是很舒服。
【3】watch
这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合，比如你添加下面的代码：
watch: {
justdoit: function(newval, oldval) {
console.log("justdoit改变了，新值为：" + newval + ",旧值为：" + oldval);
}
}
如何你运行一下，打开控制台，修改输入框的值的时候，是不是控制台时刻打印了这句话。
【4】computed
这个叫做计算属性，前面一篇文章说过了，不清楚的看看pageone.vue，应该可以明白。
简单的说就是，它用到的data里面的值改变的时候，自己会重新计算。
生命周期
和vue对象一样，也有类似的生命周期钩子，你可以试试，这里就随便提一下。
总结
说到这里，vue应该是入门了，后面开始，就会针对一个个小点来说明，祝你好运！