Vue学习：简单的ToDoList开发

最新推荐文章于 2025-04-29 19:24:04 发布

Licheng Xu

最新推荐文章于 2025-04-29 19:24:04 发布

阅读量197

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43912883/article/details/102828754

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何使用Vue进行简单的ToDoList应用开发，涵盖了v-for用于数据循环，v-on用于事件绑定，以及v-model实现数据双向绑定的关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue学习：简单的ToDoList开发

一、知识点

1.1 v-for

v-for=“item in list”，这里告诉vue需要去循环list里面的数据，循环的每一项我都放进item里面，然后利用插值表达式{{}}去使用item，

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text"/>
            <button>提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </body>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:['Jessica1','Jessica2','Derrick']
            }
        })
    </script>
</html>

1.2 v-on

代表在这个DOM上绑定一个时间，冒号后面代表需要绑定的事件，这里绑定的是click事件，handleBtnClick这里是方法的名字，而方法是需要定义在Vue实例里面的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </body>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[]
            },
            methods:{
                handleBtnClick:function(){
                    alert('click')
                }
            }
        })
    </script>
</html>

1.3 v-model

v-model指的是数据的双向绑定，这里例子中，当input框里面的内容发生变化的时候，vue实例的inputValue也会发生变化，当vue实例的inputValue发生变化的时候，input框里面的内容也会发生变化

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </body>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    alert('click')
                }
            }
        })
    </script>
</html>

在这里插入图片描述

二、ToDoList例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </body>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue),
                    this.inputValue=''
                }
            }
        })
    </script>
</html>

在这里插入图片描述