继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第11天-vue3.0实现todolist

max666
关注TA
已关注
手记 21
粉丝 1
获赞 0

第一模块

课程名称:vue3.0实现todolist

章节名称:

  • 3-1 介绍定义组件

讲师姓名:五月的夏天

第二模块

课程内容(概述)

1、组件是什么?组件是维护单一功能,可复用的单个个体

2、组件复用的优点。方便维护,复用性增强,需求改动修改组件会非常方便

3、如何创建组件并引入使用

第三模块

创建组件文件

在views底下新建一个父组件Home.vue,在components中创建三个文件夹,三个子组件navheadernavmainnavfooter

编写代码

Home.vue文件代码内容如下

  • 引入3个子组件组件

    import NavHeader from '@/components/navHeader/NavHeader.vue'
    import NavMain from '@/components/navMain/NavMain.vue'
    import NavFooter from '@/components/navFooter/NavFooter.vue'
    
  • 把定义组件的函数defineComponent从vue中解构出来

    import { defineComponent } from 'vue'
    
  • 定义组件结构脚本并注册使用NavHeaderNavMainNavFooter组件

    export default defineComponent({
      name: "Home",
      props: {},
      components: {
        NavHeader,
        NavMain,
        NavFooter,
      },
      setup(props, ctx) {
      }
    });
    
  • 使用NavHeaderNavMainNavFooter组件

    <template>
      <div>
        <nav-header></nav-header>
        <nav-main></nav-main>
        <nav-footer></nav-footer>
      </div>
    </template>
    

定义组件,在Vue3需要用到的Api都要先从vue对象中解构出来。并通过export default导出。

引入使用

App.vue引入使用

<template>
  <HomeView />
</template>
<script>
import HomeView from './views/Home.vue'
export default {
  name: 'App',
  components: {
    HomeView
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第四模块

学习截图
图片描述
图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP