效果
1，打开vue官网，引入Vue.js
2，所有的dom操作都由vue处理 v-on:事件绑定 v-model：数据双向绑定 v-for：根据一组数组的选项列表进行渲染
3，push方法 push() 方法可把它的参数顺序添加到 arrayObject 的尾部。 它直接修改 arrayObject，而不是创建一个新的数组。
4，html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="inputValue"> <button @click="handleBtnClick">按钮</button> <ul> <li v-for="item of list">{{item}}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { list: [], inputValue: '' }, methods: { handleBtnClick: function () { this.list.push(this.inputValue) this.inputValue = '' } } }) </script> </body> </html> 下一篇博客 使用父子组件传值编写TodoList如有错误，望各位大佬指正
