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="
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值