vue-cli单文件组件的简单应用

一、简介

为了更好地理解单文件组件的使用以及巩固vue的基础知识，写了一个简单的评论系统

二、功能实现

1、组件的划分

实现步骤分为两个部分：静态页面的实现 动态功能的实现

1）、静态页面的划分

静态页面主要分为三个部分：红框的为父组件，即App；绿框的为添加组件Add；黄框的为评论显示组件List。

2）、动态功能的实现

这里的功能很简单，即添加、动态显示和删除一个评论数组。用到了点击函数和父子间的数据交流
注意：这里为了操作的简便，将数据和操作数据的函数均放到父组件中

2、组件的使用

组件的使用分为以下三个步骤：
1、引入组件
2、渲染组件
3、使用组件
下面详细说明：

1）、引入组件

在引入组件之前，需注意组建的基本结构

<template>    //这里写页面结构，注意要用一个div包裹起来
	<div>
	</div>
</template>

<script>
	export default {
     //这里写vue的实例对象，可匿名
	                  //注意data必须为函数，防止修改时相互影响
		}
</script>

<style>
</style>

在vue-cli中，每一个组件均是一个vue文件，放在components文件夹下，若想使用子组件，则需要在父组件中
import+组件名+from+组件路径

例如：在入口文件中引入父组件

import App from './App'

2）、渲染组件

与局部组件相同，一般使名称和引入组件名相同，可缩写

export default {
   
	components: {
   
				Add,  //缩写前 Add：Add；
				List
			}
}

3）、使用组件

在父组件合适的位置中使用，下面为一个引入<Item>组件完整的实例

<template>
	<div id="list">
		<