Vue实践TodoList（v-for、v-model、v-on）

最新推荐文章于 2023-02-06 15:03:01 发布

是Ryan吖

最新推荐文章于 2023-02-06 15:03:01 发布

阅读量187

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45497246/article/details/104910420

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文通过一个Vue TodoList实例，讲解了如何使用v-for指令渲染列表，v-on指令添加事件监听以及v-model实现双向数据绑定。在例子中，数据变化自动触发视图更新，体现了MVVM设计模式的优势，简化了DOM操作。

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

通过v-for指令绑定数组的数据，来渲染一个项目列表：

<body>
    <div id="todo">
        <input type="text">
        <button>commit</button>
        <ul>
            <li v-for = "item in list">{{item}}</li>	//遍历vue实例中data的list数组里的每一个item的内容，渲染项目列表
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el:'#todo',
            data:{
                list:['01','02']
            }
        })
    </script>
</body>

用 v-on 指令添加一个事件监听器，给按钮添加绑定事件，通过它调用在 Vue 实例中定义的方法：

<button v-on:click="handleClickBtn">commit</button>

methods: {
                handleClickBtn(){
                    alert('hhh')
                }
            }

通过v-model实现表单输入和应用状态之间的双向绑定：


<input type="text" v-model="inputValue">
//把input文本框里的value值和data里的inputValue进行绑定，一个变化，另一个会随之改变

data:{
                list:[],
                inputValue:''
            }

data中的inputValue实际上就相当于input输入框里的值

如何通过methods里的handleClickBtn方法获取到inputValue？

methods: {
                handleClickBtn(){
                    alert(this.inputValue)
                }
            }

如何把获取到的 input内容（inputValue），添加到data中的list数组？

methods: {
                handleClickBtn(){
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                }
            }

如何在获取到 input内容（inputValue）后，自动清空文本框？

methods: {
                handleClickBtn(){
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue=''
                }
            }

这种模式就是MVVM设计模式，它实现了View和Model的自动同步

也就是我们无需手动操作Dom元素来改变View的显示，只需要修改数据层，
vue的底层就会自动地根据数据的不同进行页面的渲染。

html部分相当于View层，View通过模板语法将数据渲染进DOM元素，当ViewModel对Model进行更新时，通过数据绑定更新到View。

data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。

完整代码：

<!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="/JS/vue.js"></script>
</head>
<body>
    <div id="todo">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleClickBtn">commit</button>
        <ul>
            <li v-for = "item in list">{{item}}</li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el:'#todo',
            data:{
                list:[],
                inputValue:''
            },
            methods: {
                handleClickBtn(){
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue=''
                }
            },
        })
    </script>
</body>
</html>