vue学习笔记---vue实现ToDoList

  • ToDoList初级功能描述:
    1. 增加任务:通过在文本框中输入任务内容,点击添加按钮,任务会自动添加到任务列表之中.
  • 实现思路:vue的思想是根据MVVM设计思想,也就是说,当程序中的数据被改变的时候,则视图上的对应内容也会自动发生变化.
  • 主要使用到vue的一下几个几个指令:
    1. v-model:创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
    2. v-on:指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。还可以接收一个需要调用的方法名称。
    • v-on:click—处理点击事件
    • v-on-keyup.enter—处理回车事件
    1. v-for:v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
  • 具体代码:
<html>
	<head>
		<title>todolisttitle>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="vue.js">script>
	head>
	<body>
	<div id="app">
		待办事项:<input type="text" id="todoList" v-model="todo" v-on:keyup.enter="addList"/>
		<input type="submit" value="提交" v-on:click="addList" />
		<ul>
			<li v-for="item in list">{{item}}li>
		ul>
	div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					list:[],
					todo:""
				},
				methods:{
					addList:function(){
						this.list.push(this.todo);
						this.todo="";
					}
				}
			})
		script>
	body>
html>
  • 效果

vue学习笔记---vue实现ToDoList_第1张图片

你可能感兴趣的:(vue学习笔记---vue实现ToDoList)