根组件app.vue文件

我们可以看到，一个vue文件包含三部分<template><style><script>,这三个部分正好是网页的上个基本元素HTML CSS JAVASCRIPT,一个spa页面，通过一个或多个以vue文件格式体现的组件便可以构成一个页面，我们看看他是怎么实现通过组件展示一个网页

vue文件的实现方式

• 组件的作用域

在组件中，变量是独立的，也就是说在<script>中定义的变量，在其他的vue文件中是不可以访问的，当组件间需要交互数据，怎么办呢，下面就全面的介绍了

• 父子组件的通信

子组件获取负组件的变量：在子组件中this.$parent,返回父组件的实例，便可以访问父组件的变量，也可以通过props向子组件注入变量。

子组件获取父组件的html：可以通过slot分发父组件的html。

当组件之间的关系并不是父子关系，那怎么办呢，这时我推荐大家使用vue的插件vuex，接下来的文章会专门介绍vuex

• 理解

如果一个应用只有一个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中定义的数据）是时时同步的，我们来看看简单的例子

• 写好代码我们看看效果

代码