Vue入门（十二）

todolist之基本结构——介绍定义组件

开始学习之前你需要一些基础知识

组件： 

什么是组件：

        组件是维护单一功能，可复用的单个个体

单文件组件：

        官网说明：Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。下面是 SFC 示例：

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

<template>
	<!-- 编写 HTML 内容-->
</template>

<script>
	// 编写 js 内容
</script>

<style scoped lang="scss">
	// 编写样式内容
</style>

 官网说明：正如所见，Vue SFC 是经典的 HTML、CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue 文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>：

• <script> 部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。
• <template> 部分定义了组件的模板。
• <style> 部分定义了与此组件关联的 CSS。

---

开始编写代码 

首先打开 src/views/ 中的 HomeView.vue 文件进行代码编写

定义组件：

setup

使用 setup 函数时，它将接收两个参数：

1. props
2. context

在 setup 中无法使用 this 关键字

<script>
	// 编写 js 内容
	import {
		defineComponent
	} from 'vue'
	
	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 接收父组件的数据
		props: {

		},
		// 定义子组件
		components: {
			
		},
		setup(props,ctx) {
			return{
				
			}
		}
	})
</script>

---

视频学习地址：

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)