从零开始学Vue.js（二）MVVM初探

2019-11-13 本文已影响0人 Geekholt

如需转载请评论或简信，并注明出处，未经允许不得转载

前言

上一章，我们已经搭建好了环境，并成功运行了我们的第一个Vue程序“HelloWorld”。本节将通过一个小功能来进一步理解Vue的设计思想和一些非常基础的语法

了解需求

本节我们将做一个ToDoList小工具，类似http://www.todolist.cn/。在输入框中添加任务，然后按回车，就会被添加到下方“正在进行”列表中。如下图所示

这里我们针对上面的ToDoList工具做一个小改动，就是我们会增加一个按钮来取代回车键，点击按钮，就会往列表中添加一项任务，任务添加完成后回清空输入框

实现步骤

实现页面布局

涉及到的html标签：<input/>、<button/>、<ul><li></li></ui>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div>
    <input type="text">
    <button>提交</button>
    <ul>
        <li>做饭</li>
        <li>游泳</li>
        <li>学习</li>
    </ul>
</div>
</body>
</html>

运行后效果如下所示

存储输入框中的数据

有一定前端基础的同学应该都知道，想要在页面上展现一个列表，我们往往需要一个List或Array用来存储数据。所以我们现在要实现的就是，给按钮添加一个点击事件，实现向List中添加数据的操作

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="onSubmitClick">提交</button>
    <ul>
        <li>做饭</li>
        <li>游泳</li>
        <li>学习</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            onSubmitClick: function () {
                this.list.push(this.inputValue)
            }
        }
    })

</script>
</body>
</html>

代码分析：

我们在data中初始化了两个变量，分别是list: []和inputValue: ''
通过v-model进行双向数据绑定，即输入框内文本改变后，inputValue值也随之改变；inputValue的值改变后，输入框内的值也改变
通过v-on:click给按钮设置点击事件，每次点击按钮时，将inputValue加入到list中

现在我们已经完成了存储输入框中的数据的操作，那么接下来我们如何将数据与列表进行绑定呢？

数据关联列表

Vue中使用v-for实现for循环，list的命名要和data中声明的list一致，item则表示list中的每一项数据

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="onSubmitClick">提交</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            onSubmitClick: function () {
                this.list.push(this.inputValue)
            }
        }
    })

</script>
</body>
</html>

清空输入框

现在，我们已经基本完成了我们的ToDoList小工具，但是还差最后一小步，我们需要每次点击提交后，都会自动清除我们输入框中的内容。怎么做呢？很简单，我们只需要将inputValue中的数据清空就可以了

  this.list.push(this.inputValue)
  //清空数据
  this.inputValue = ""

总结

回顾整个ToDoList小工具，我们从头到尾都没有做任何DOM操作，而是一直在操作数据。列表的数据我们放在inputValue中，列表的数据我们放在list中。触发点击事情后，我们不是去改变DOM，而是去改变数据，DOM自动就跟随着数据发生了变化

Vue的设计思想其实就是基于MVVM模式。本系列文章，不仅可以帮助你掌握Vue的基本使用方法，同时也可以学到其中的设计思想