Vue组件化认识

想更好的学习vue，首先就要清楚什么是组件，组件是局部功能界面，是一个界面的局部功能模块，而vue就是典型的由组件组成的框架布局。

vue文件的组成

1.模板页面

<template> 
		页面模板
</template>

2.JS 模块对象

 <script> 
	  export default {
	   data() {
		   	return {}
		 },
		 methods: {},
		 computed: {},
		 components: {}
	    }
	 </script> 

3.样式

 <style>

基本使用方法

1.拆分组件
2.静态组件
3.动态组件：初始化数据，交互
1) 引入组件
2) 映射成标签
3) 使用组件标签
下面以一个例子说明：
首先将要编写的静态页面拆分成如下组件

根据拆分的组件简历好vue文件

接着就可以根据vue文件的组成，进行组件化编码了，一下是App.vue文件

<template>
  <div>
    <div class="title">
      <header>请发表对Vue的评论</header>
    </div>

    <div class="container">
      <div class="row">
      <!--使用组件标签-->
      <Form/>
      <!-- 声明传递数据-->
      <List ：comments="comments"/>
      </div>
    </div>
  </div>
</template>
<script>
  //引入组件
  import Form from './components.Form.vue'
  import List from './components.List.vue'

    export default {
    //建立数据，传递给Item
      data(){
        return{
          comments:[
            {name:'ttt',content:'hhhhh'},
            {name:'tet',content:'gghhh'},
            {name:'tst',content:'hgghh'}
          ]
        }
      },
      name: "app.vue",
      //映射成标签
      components:{Form,List}

  }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .title{
    width: 100%;
    height:200px;
    background-color:#99CC66;
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    color:#2a3133;
  }
  .container{
    width:100%;
    height: 400px;
    position: absolute;
  }
  .row{
    width:900px;
    height:300px;
    background-color:#F5F5F5;
    border-radius: 20px;
    position:relative;
    margin: auto;
    margin-top: 50px;
  }
</style>

vue文件组成实现了视图，逻辑，样式的分离，简单易懂，是目前很火的框架之一。