今天我将跟大家一起做一个项目，以此来巩固一下之前所学习的基础知识。
首先介绍一下这个小项目的功能需求：在input框里输入内容后，点击提交按钮，会将所有提交的内容在列表里罗列出来。
功能介绍完后，我们不着急做，先来分析一下步骤，一个小目标一个目标地去完成〜下面来分解功能：
步骤1: 看到input，我们就应该想到双向绑定，这样才能改变data数据，继而对显示也可以进行操作。所以呢，就会用到v-model这个属性，定义content用来保存input输入的值。
步骤2: 既然有列表罗列，肯定需要一个列表啦，list用于存储或者说记忆所有存储的内容。list是个数组。
步骤3: 有了input以及list之后，我们需要将input推送到list，我们就需要一个点击事件触发--@click
步骤4: 万事俱备了，还差最后一步，聪明的你一定知道是什么。那当然是把list罗列到页面上进行显示啊！用到什么知识咧？--v-for！没错！
分析完这些步骤后，我们就开始动工喽！
首先：将静态模板做一下：
<div id="root">
<input type="" name="" v-model="content">
<button @click="submit">提交</button>
<ul>
<li></li>
</ul>
</div>
接下来是js部分，定义data：
data() {
return {
content: '',
list: []
}
}
步骤1和步骤2已经完成，接下来就完成步骤3和步骤4,首先做一下如何将input里的内容推送到list里，当然要写在methods里：
methods: {
submit () {
this.list.push(this.content) //用push推到列表栈里
}
}
最后一步，将列表展示在页面上〜很好做了吧：
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
看一下效果吧！哇吼！欢呼吧！是不是有一种成就感呢，短短几天就可以做一个小项目了呢！
只要坚持不懈，持之以恒，总会有收获的！加油💪接下来我们将去挑战更艰巨的任务！
欢迎关注微信公众号：duzhan99
