使用Vue实现todolist小案例

最新推荐文章于 2023-03-10 10:51:34 发布

LK-初学者

最新推荐文章于 2023-03-10 10:51:34 发布

阅读量236

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63689594/article/details/128893993

版权

本文介绍了如何使用Vue.js创建一个todolist应用。通过详细解析代码实现，包括main.js的入口配置，App.vue中组件的管理和头部、内容列表以及底部组件的结构与实例化。

摘要由CSDN通过智能技术生成

效果样式

代码实现

vue组件容器的结构

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js vue的入口

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip=false

new Vue({
  el:'#app',
  render:h=>h(App)
})

App.vue管理所有的组件

<template>
  <div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader :addtodo="addtodo"/>
      <MyList :todos="todos" :isCheck="isCheck" :deleteTodo="deleteTodo"></MyList>
      <MyFooter :todos="todos" :isdonetodo="isdonetodo" :clearAlltodo="c