新增
- 生成列表结构(v-for 数组)
- 获取用户输入(v-model)
- 回车,新增数据(v-on .enter添加数据)
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
}
}
})
</script>
删除
- 点击删除指定内容(v-on splice 索引)
- 数据改变,和数据绑定的元素同步改变
- 事件的自定义参数
<body>
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
},
remove:function (index) {
this.list.splice(index,1);
}
}
})
</script>
</body>
统计和清空
- 统计信息个数(v-text length)
- 基于数据的开发方式
- 点击清空所有信息(v-on)
<body>
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count">
<strong>{{ list.length }}</strong> items left
</span>
<button class="clear-completed" @click="removeAll">
clear
</button>
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
},
remove:function (index) {
this.list.splice(index,1);
},
removeAll:function () {
// this.list.splice(index);
this.list = []
}
}
})
</script>
</body>
隐藏
- 没有数据时 隐藏元素(v-show v-if 数组非空)
- 列表结构可以通过v-for指令结合数据生成
- v-on结合事件修饰符可以对事件进行限制 比如.enter
- v-on在绑定事件时 可以传递自定义参数
- 通过v-model可以快速的设置和获取表单元素的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<!-- main area -->
<section id="todoapp">
<!-- input -->
<header class="header">
<h1>NOTE</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="input todo task" class="new-todo">
</header>
<!-- list -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class>
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count" v-if="list.length != 0">
<strong>{{ list.length }}</strong> items left
</span>
<button v-show="list.length != 0" class="clear-completed" @click="removeAll">
clear
</button>
</footer>
</section>
<!-- bottom -->
<footer class="info">
</footer>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:'#todoapp',
data:{
list:[
'code',
'eat',
'sleep'
],
inputValue:'study'
},
methods:{
add:function () {
this.list.push(this.inputValue);
},
remove:function (index) {
this.list.splice(index,1);
},
removeAll:function () {
// this.list.splice(index);
this.list = []
}
}
})
</script>
</body>
</html>
