如需转载请评论或简信，并注明出处，未经允许不得转载
目录
前言
上一章，我们已经搭建好了环境，并成功运行了我们的第一个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的基本使用方法，同时也可以学到其中的设计思想
网友评论