vue-模块化-组件化todolist.html(1)

最新推荐文章于 2022-02-14 10:42:36 发布
最新推荐文章于 2022-02-14 10:42:36 发布
阅读量166 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41813243/article/details/106337474
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>组件-todolist</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        * {

            padding: 0;

            margin: 0;

            box-sizing: border-box;

        }

 

        #app {

            width: 400px;

            margin: 0 auto;

            margin-top: 100px;

            padding: 12px;

            border: 1px solid rgb(176, 193, 228);

            background-color: rgb(176, 193, 228);

            color: white;

            box-shadow: 10px 10px 10px rgb(171, 174, 182);

        }

 

        .head {

            padding: 12px;

        }

 

        .input {

            margin-right: 20px;

            height: 25px;

            border-radius: 4px;

            width: 260px;

        }

 

        p {

            margin-top: 10px;

            color: rgb(95, 95, 218);

            font-size: 16px;

            text-align: center;

        }

 

        .title {

            text-align: center;

            font-size: 20px;

            color: rgb(95, 95, 218);

        }

 

        button {

            color: rgb(118, 118, 228);

            float: right;

            border-radius: 4px;

            border: 1px solid white;

            width: 40px;

            height: 25px;

            margin-top: -16px;

            margin-right: 6px;

        }

 

        .list {

            padding: 12px;

            border-bottom: 1px solid #eee;

        }

 

        .text {

            font-size: 14px;

            color: white;

        }

 

        .line-through {

            text-decoration: line-through;

        }

 

        .add {

            background-color: rgb(71, 95, 231);

            color: white;

            margin-top: 2px;

        }

    </style>

</head>

 

<body>

    <div id="app">

        <top @addclick="addBtn" v-model="message"></top>

 

        <p><strong>未完成列表</strong></p>

        <middle v-for="(item, index) in todoList" @combtnclick="comBtn" @deletebtnto="deleteBtnTo" :item="item"

            :index="index"></middle>

 

        <p><strong>完成列表</strong></p>

        <foot v-for="(item, index) in completeList" @comdeletebtnto="deleteBtnCom" :item="item" :index="index"></foot>

 

    </div>

 

    <script type="module">

        import {myComponentName1,myComponentName2,myComponentName3 } from "./js/2.js";

 

        Vue.component("top", myComponentName1);

 

        Vue.component("middle", myComponentName2);

 

        Vue.component("foot", myComponentName3);

 

        let app = new Vue({

            el: "#app",

            data: {

                message: "",

                todoList: [],

                completeList: []

            },

 

            // 初始化列表，从本地存储里面拿数据

            created() {

                if (localStorage.getItem("todolist")) {

                    this.todoList = JSON.parse(localStorage.getItem("todolist"));

                }

 

                if (localStorage.getItem("completelist")) {

                    this.completeList = JSON.parse(localStorage.getItem("completelist"));

                }

            },

 

            methods: {

                addBtn() {

                    // 不为空

                    if (this.message != "") {

                        // 不为空 且 不存在

                        if ((this.todoList).indexOf(this.message.trim()) == -1) {

                            this.todoList.push(this.message.trim());

                        }

                        else {

                            alert("输入内容不能重复！");

                        }

                    }

                    else {

                        alert("输入内容不能为空");

                    }

                    this.message = "";

                },

                // 删除  未完成

                deleteBtnTo(index) {

                    this.todoList.splice(index, 1);

                    this.refreshTodoList();

                },

 

                // 完成  未完成

                comBtn(index) {

                    this.completeList = this.completeList.concat(this.todoList.splice(index, 1));

                    this.refreshTodoList();

                    this.refreshCompleteList();

                },

 

                // 删除  完成列表

                deleteBtnCom(index) {

                    this.completeList.splice(index, 1);

                    this.refreshCompleteList();

                },

 

                // 刷新本地存储 未完成列表

                refreshTodoList() {

                    window.localStorage.setItem("todolist", JSON.stringify(this.todoList));

                },

 

                // 刷新本地存储 完成列表

                refreshCompleteList() {

                    window.localStorage.setItem("completelist", JSON.stringify(this.completeList));

                }

            }

        })

    </script>

</body>

 

</html>

爱学习的小饼干
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
todolist.html
09-28
实现todolist，可以让相互切换，块来下载吧，免费哟！，够够够，去挨个领，----------------------------------------------------------------------------------------------------------------------------
todoList.html
weixin_34150503的博客
03-18 134
待做的事情 {{item}} 完成 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .done .content{ ...
vue-模块化-组件化todolist.js(2)
weixin_41813243的博客
05-25 180
varmyComponentName1={ props:["value"], template:` <div> <pclass="title"> <strong>备忘录</strong> </p> <divclass="head"> ...
vue.js 模块化html,模块化的 Vue.js 项目《 Vue.js：应用案例（Vuex） 》
weixin_29982199的博客
06-30 130
之前我们在学习 Vue.js 的时候，创建的项目都是直接在 html 文档里链接的需要的资源，比如一些 css 还有 js 文件 ..现在我们用 vue-cli 创建的这个 webpack 模板项目里面，用了 webpack 打包工具 ... 所以项目的结构跟我们之前见的会有些不一样 ..这里很多文件你都不用管 .. 大部分都是一些配置文件 .. 我们真正要关心的主要是这个 src 目录下面...
个人 的todolist.html
SHIKIO的博客
07-26 697
HTML CSS JS
vue-todolist:Vue中的待办事项清单
03-30
总的来说，"Vue-todolist"项目是一个实践Vue基础知识的好例子，它涵盖了组件化、数据绑定、事件处理、条件渲染和循环渲染等核心概念。通过构建这样一个应用，开发者可以更好地理解和掌握Vue.js的用法，为后续更复杂...
todo-list(模块化,组件化)
01-07
在IT行业中，模块化和组件化是现代前端开发中的核心概念，尤其是在Vue.js框架中尤为重要。Vue.js是一款轻量级的、高性能的JavaScript框架，它以其易学易用、高效可复用的特性深受开发者喜爱。在“todo-list”这个...
vue-todolist案例
最新发布
03-08
1. **组件化开发**：Vue的核心特性之一就是组件化，它允许我们将UI拆分成独立、可重用的部件。在`src`目录下，我们可能找到名为`TodoList.vue`或类似名称的文件，这是案例中的主要组件，负责展示和管理待办事项。 2...
vue-todolist
03-25
1. **组件化**：Vue.js的核心之一是组件系统，它允许我们将UI拆分为可复用的模块。在这个项目中，`TodoList`和`TodoItem`可能就是两个主要的组件。`TodoList`管理整个列表，而`TodoItem`代表单个待办事项。组件通过...
todolist-Vue.rar
11-05
【标题】：“todolist-Vue.rar”是一个使用Vue.js框架构建的待办事项列表应用，它结合了jQuery库，提供了一种简洁的方式来管理个人任务。这个应用的数据存储机制是利用浏览器的本地存储（localStorage），使得用户...
vue.js 模块化html,详解如何用模块化的方式写vuejs
weixin_33724264的博客
06-22 120
详解如何用模块化的方式写vuejs2019-01-07编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了详解如何用模块化的方式写vuejs，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。引子vuejs 是一个入门简单的框架，具有使用简单，扩展方便的特点。随着webpack的流行，vuejs也推出了自己的load，vue-loader，可以方便的打包代码...
vue.js 模块化html,Vue开发技巧—前端模块化
weixin_42510446的博客
06-22 182
Vue Day 11——前端模块化概述为什么需要前端模块化CommonJS(了解)ES6中的export指令11.1. 为什么需要前端模块化11.1.1. JavaScript原始功能在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在随着ajax异步请求的出现，慢慢形成了前后端的分离客户端需要完成的事情...
解决： 在使用vue的.html文件的script标签中，引入import模块化js文件。
qq_38969618的博客
02-14 7621
现代浏览器支持用script标签引入模块或脚本，如果要引入模块，在script标签中需添加type="module"，如果引入脚本，则不需要type。 <script type="module" src="xxx.js"> // 模块a.js export default { ... } // 页面test.html <!-- 如果使用模块化语句如import、export等，script元素必须添加type=module --> <script type="
使用HTML布局实现TODOLIST效果图
伍婷的专栏
01-24 2133
对于一个前端菜鸟的我，总是在想，怎么才能学习好前端，如何能够深入一个前端框架，经常在百度中徘徊，总是寻找大神的经验，每次看到一个大神的分享代码或者讲解后，感觉好像一下子会了...
一个最简单的todolist网页实现
u011932817的博客
06-19 8012
&lt;%--实现功能：1添加功能：将任务输入到编辑框回车会判断有没有内容 如果有内容就会添加到任务列表中 没有内容不添加 （+号实现相同功能） 2.删除功能：将要删除的勾选上然后单击‘-’会删除选择内容 如果没有多选，默认会从删除最后一个--%&gt;&lt;%-- Created by IntelliJ IDEA. User: zmillionaire Date: 18-6-5 Ti...
分享一个用vue写的todolist的待办事宜
qq_40816649的博客
05-30 2777
通过数据的双向绑定，列表循环渲染和localstorage本地缓存完成。虽然是个简单的例子但是这里面包含的东西对vue的初学者来说还是挺多的。直接贴上代码吧&lt;template&gt; &lt;div id="app"&gt; &lt;input type="text" v-model="todo" @keydown="add($event)"&gt; &a
vue css js html 进行分离
秦璐璐的博客帝国
05-14 9997
引入 引入 直接引入 <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></sty...
Vue.js组件化开发实战与ES6特性探讨
"VUE.JS组件化开发实践" 在前端开发中，Vue.js是一个流行的JavaScript框架，尤其适合进行组件化的应用开发。组件化开发允许开发者将复杂的用户界面拆分成可重用、独立的模块，提高了代码的复用性和可维护性。在本文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值