下载vue.js的网址为：https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
<!-- 这里是直接引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 这里是引入本地的 -->
<!--<script src="./vue.js"></script>-->
</head>
<body>
<div id="app">
<!-- {{content}}<br/> -->
<h1>实现待办事项功能</h1>
<!-- v-model是一个指令，来对input标签里的数据进行绑定，
限制在<input>、<select>、<textarea>、components中使用 -->
输入未完成的事项:<input type="text" v-model="thing">
<button type="submit" @click=add()>确定</button>
<h2>待办事项</h2>
<ul>
<!-- v-for 用于循环待办事项数组 其中item代表每条事项，index代表数组索引(0开始) -->
<li v-for='(item,index) in todo'>
<!-- <span>{{item}}:{{index}}</span> -->
<span>{{item}}</span>
<button type="submit" @click=finish(index)>完成</button>
<button type="submit" @click=deleteTodo(index)>删除</button>
</li>
</ul>
<h2>完成事项</h2>
<ul>
<!-- v-for 用于循环完成事项数组 其中item代表每条事项，index代表数组索引(0开始) -->
<li v-for='(item,index) in finished'>
<span>{{item}}</span>
<button type="submit" @click=changeTodo(index)>未完成</button>
<button type="submit" @click=deleteFinished(index)>删除</button>
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
content:"hello vue",
thing:'', //v-model绑定
todo:[],
finished:[]
},
methods:{
// 将input标签里的内容加入到todo(待办事项数组)
add(){
this.todo.push(this.thing);
this.thing='';
},
// 将待办事项里完成的加入到finished(完成事项数组)
finish(index){
// console.log(1);
this.finished.push(this.todo[index]);
// 数组.splice(index,howmany)方法
// index代表此项目位置(即在数组中的索引) howmany代表从此位置开始删除多少个
this.todo.splice(index,1);
},
// 将完成事项改成待办事项
changeTodo(index){
this.todo.push(this.finished[index]);
this.finished.splice(index,1);
},
// 对待办事项删除
deleteTodo(index){
this.todo.splice(index,1);
},
// 对完成事项删除
deleteFinished(index){
this.finished.splice(index,1);
}
}
})
</script>
</body>
</html>
