用vue3.0写一个简单的todo功能

最新推荐文章于 2024-06-02 22:12:52 发布

ssypp

最新推荐文章于 2024-06-02 22:12:52 发布

阅读量483

点赞数

分类专栏： vue 文章标签： vue javascript html

本文链接：https://blog.csdn.net/Mrbignose/article/details/107435223

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

用vue3.0写一个简单的todo功能

vue3.0bate版文档

创建项目

1.创建一个index.html文件，并引入<script src=“https://unpkg.com/vue@next”>

touch index.html

开始写入代码

1.写好基本的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        //App组件
        const App = {}
        //挂在组件到app上
        const app = Vue.createApp(App).mount("#app")
    </script>
</body>
</html>

创建一个app-nav组件

1.注册一个app-nav组件并传值给父组件

let appNav = `<div>
            <label for="inputValue">大宝剑服务项目:</label>
            <input id="inputValue" v-model="inputval"/>
            <button @click="handleAddItem">添加</button>
        </div>`
 //注册一个组件app-nav
app.component("app-nav", {
	//模板
    template: appNav,
    data() {
        return {
        	//输入框的值
            inputval:""
        }
    },
    methods: {
        handleAddItem() {
        	//传给父组件
            this.$emit("add-item", this.inputval)
            this.inputval = ""
        }
    }
})

2.父组件接口子组件传过来的值

<app-nav class="app-nav"  @add-item="addItem"></app-nav>

methods: {
    addItem(e) {
        if(this.list.includes(e)){
            alert("该项目已存在");
            return
        }
        this.list.push(e);
    }
}

创建一个app-view组件

1.注册一个app-view组件并接收父组件的值

let appView = `<div>
        <ul>
            <li>
                <span style="flex:1">项目</span>
                <span style="flex:1">操作</span>
            </li>
            <li v-for="(item,index) in list" :key="index+item" >
                
                <span style="flex:1">{{item}}</span>
                <div style="flex:1">
                    <span @click.self="handleDelete(index)">删除</span>
                </div>
            </li>
        </ul>
    </div>
`
app.component("app-view", {
    template: appView,
    props: ['list'],
    data() {
        return {}
    },
    methods: {
        handleDelete(index) {
            this.$emit('delete-item', index)
        }
    }
})

2.父组件传值给子组件

<app-view class="app-view" :list="list" @delete-item="deleteItem"></app-view>

methods: {          
	deleteItem(e) {
	     this.list.splice(e, 1)
	 }
}

完整的案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3.0初体验</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        #app{
            max-width: 600px;
            height: 400px;
            margin: 30px auto;
            box-shadow: 0 0 10px #ccc;
            padding:20px 10px;
        }
        .app-nav{
            text-align: center;
        }
        .app-view {
            max-width:400px;
            margin:0 auto;
        }
        .app-view ul,.app-view li{
            list-style: none;
            padding: 0;
        }
        .app-view li{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content:space-around;
            text-align: center;
        }
        .app-view li:hover{
            background-color: rgb(206, 248, 234);
        }
    </style>
</head>

<body>
    <div id="app">
        <app-nav class="app-nav"  @add-item="addItem"></app-nav>
        <app-view class="app-view" :list="list" @delete-item="deleteItem"></app-view>
    </div>
    <script>
        const App = {
            data() {
                return {
                    message: "hello Vue3.0",
                    list: ['精油推背', '泰式洗头', '冰火两重天']
                }
            },
            methods: {
                addItem(e) {
                    if(this.list.includes(e)){
                        alert("该项目已存在");
                        return
                    }
                    this.list.push(e);
                },
                deleteItem(e) {
                    this.list.splice(e, 1)
                }
            }
        }
        const app = Vue.createApp(App)
        let appNav = `<div>
            <label for="inputValue">大宝剑服务项目:</label>
            <input id="inputValue" v-model="inputval"/>
            <button @click="handleAddItem">添加</button>
        </div>`
        app.component("app-nav", {
            template: appNav,
            data() {
                return {
                    inputval:""
                }
            },
            methods: {
                handleAddItem() {
                    this.$emit("add-item", this.inputval)
                    this.inputval = ""
                }
            }
        })
        let appView = `
            <div>
                
                <ul>
                    <li>
                        <span style="flex:1">项目</span>
                        <span style="flex:1">操作</span>
                    </li>
                    <li v-for="(item,index) in list" :key="index+item" >
                        
                        <span style="flex:1">{{item}}</span>
                        <div style="flex:1">
                            <span @click.self="handleDelete(index)">删除</span>
                        </div>
                    </li>
                </ul>
            </div>
        `
        app.component("app-view", {
            template: appView,
            props: ['list'],
            data() {
                return {}
            },
            methods: {
                handleDelete(index) {
                    this.$emit('delete-item', index)
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

运行结果

在这里插入图片描述

ssypp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用vue3.0写一个简单的todo功能

用vue3.0写一个简单的todo功能 vue3.0bate版文档创建项目1.创建一个index.html文件，并引入<script src=“https://unpkg.com/vue@next”>touch index.html开始写入代码1.写好基本的结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam
复制链接

扫一扫