Vue 响应式渲染 - 待办事项简单实现

news2025/1/30 12:42:02

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现

待办事项简单实现

页面初始化

双向绑定的指令

增加留言列表设置

增加删除按钮

最后优化

总结

待办事项简单实现

页面初始化

对页面进行vue的引入、创建输入框和按钮及实例化Vue。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" />
    <button>Add</button>
</div>
<script>
    new Vue({
        el: "#box", // element
    })
</script>
</body>
</html>

双向绑定的指令

使用v-model对input元素进行双向绑定，并在按钮上设置点击事件。

V-model只能绑定在表单元素上。

示例如下：

<div id="box">
    <input type="text" v-model="mytext"/>
    <button @click="handelAdd()">Add</button>
</div>
<script>
    new Vue({
        el: "#box", // element
        data:{
            mytext:'今日任务'
        },
        methods:{
            handelAdd() {
                console.log('点击add按钮')
            }
        }
    })
</script>

增加留言列表设置

设置ul元素用以渲染留言列表数据。

并在点击事件中对留言列表数据通过push方式增加。

示例如下：

<div id="box">
    <input type="text" v-model="mytext"/>
    <button @click="handelAdd()">Add</button>
    <ul>
        <li v-for="item in datalist">
            {
  
  {item}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#box", // element
        data:{
            mytext:'今日任务',
            datalist:["第一件事", "第二件事", "第三件事"]
        },
        methods:{
            handelAdd() {
                console.log('点击add按钮')
                this.datalist.push(this.mytext)
            }
        }
    })
</script>
<div id="box">
    <input type="text" v-model="mytext"/>
    <button @click="handelAdd()">Add</button>
    <ul>
        <li v-for="item in datalist">
            {
  
  {item}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#box", // element
        data:{
            mytext:'今日任务',
            datalist:["第一件事", "第二件事", "第三件事"]
        },
        methods:{
            handelAdd() {
                console.log('点击add按钮')
                this.datalist.push(this.mytext)
            }
        }
    })
</script>

实现效果：

增加删除按钮

在原来基础上增加删除已完成的事件或留言功能。

示例如下：

<li v-for="item in datalist">
    {
  
  {item}}
    <button>Del</button>
</li>

按钮绑定删除事件

示例如下：

<li v-for="(item, index) in datalist">
    {
  
  {item}}
    <button @click="handelDel(index)">Del</button>
</li>

删除事件处理

示例如下：

handelDel(index) {
    this.datalist.splice(index, 1)
}

最后优化

通过判断datalist显示和隐藏列表和提示。

示例如下：

<div id="box">
    <input type="text" v-model="mytext"/>
    <button @click="handelAdd()">Add</button>
    <div v-show="!datalist.length">待办事项暂时没有了，快添加吧！</div>
    <ul v-show="datalist.length">
        <li v-for="(item, index) in datalist">
            {
  
  {item}}
            <button @click="handelDel(index)">Del</button>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#box", // element
        data:{
            mytext:'今日任务',
            datalist:["第一件事", "第二件事", "第三件事"]
        },
        methods:{
            handelAdd() {
                console.log('点击add按钮')
                this.datalist.push(this.mytext)
                // 置空mytext内容
                this.mytext = ''
            },
            handelDel(index) {
                this.datalist.splice(index, 1)
            }
        }
    })
</script>

最终效果：