根组件app.vue文件
我们可以看到，一个vue文件包含三部分<template><style><script>,这三个部分正好是网页的上个基本元素HTML CSS JAVASCRIPT,一个spa页面，通过一个或多个以vue文件格式体现的组件便可以构成一个页面，我们看看他是怎么实现通过组件展示一个网页
vue文件的实现方式
组件的作用域
在组件中，变量是独立的，也就是说在<script>中定义的变量，在其他的vue文件中是不可以访问的，当组件间需要交互数据，怎么办呢，下面就全面的介绍了
父子组件的通信
子组件获取负组件的变量：在子组件中this.$parent,返回父组件的实例，便可以访问父组件的变量，也可以通过props向子组件注入变量。
子组件获取父组件的html：可以通过slot分发父组件的html。
当组件之间的关系并不是父子关系，那怎么办呢，这时我推荐大家使用vue的插件vuex，接下来的文章会专门介绍vuex
vue实例理解
如果一个应用只有一个vue组件构成的话，从MVC框架来看的话，template标签定义的就是应用的视图层VIEW，script标签中的定义的就是model层了，这样说其实不是很准确，更加确切的说应该的实例中的data对象
<script> data对象：model层
export default {
data(){
return{
//这里是一个应用的model层
text:'你好，Neho'
}
}
}
<template> 视图层
<template>
<div id="app">
{{text}}
</div>
</tempalte>
页面
你好，Neho
vue实例
一个vue组件对应一个vue实例，在script标签中，我们通过new Vue()方式创建一个vue实例，通常来说，不通过的组件vue实例是不一样的，我们可以通过向这个方法传入一个对象来实例化不同的vue实例。对象中常用的属性有data属性——定义数据，methods属性——定义操作data数据的函数，created属性——实力在一个vue实例中，不同的生命周期会调用不同的函数钩子，我们来看看一个简单的代码
根组件
效果
页面效果
响应式vue的一个很出色的特点是视图层view（template标签）和数据层model（data中定义的数据）是时时同步的，我们来看看简单的例子
写好代码我们看看效果
代码
