腾讯十天Vue.js课程之三:增删便签任务
2017-04-18 10:17
309 查看
v-if与v-show的区别:
v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
——来自Vue.js官网
app.js
/**
* Created by sotto on 2017-4-17.
*/
var list = [
{
title: "吃饭睡觉打豆豆1",
isChecked: false
},
{
title: "吃饭睡觉打豆豆1",
isChecked: true
},
];
new Vue({
el: ".main",
data: {
list: list,
todo: ""
},
methods: {
addTodo(data,event) {
//添加任务
//向list中添加一项任务
/*
{
title:
}
*/
console.log(event);
//事件处理函数中的this指向的是当前的根实例
// if(event.keyCode === 13){
this.list.push({
title: this.todo,
isChecked: false
});
// }
this.todo="";
},
deleteTodo(todo){
var index = this.list.indexOf(todo);
this.list.splice(index,1);
},
editorTodo(todo){//编辑任务
}
}
});
todos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<link rel="stylesheet" href="">
<style>
*{
padding:0;
margin:0;
}
.page-top{
position: fixed;
top:0;
left:0;
height: 40px;
background-color: #E8593D;
width:100%;
text-align: center;
}
.page-content{
color: #FFFFFF;
width: 70%;
margin-left: 15%;
line-height: 40px;
text-align: left;
}
.main{
margin-top: 40px;
margin-left: 15%;
width: 70%;
padding: 5px;
}
.main .task-input{
height:40px;
width:100%;
font-size: 20px;
}
.main ul li{
/*list-style-position: inside;*/
list-style-type: none;
}
.completed{
text-decoration:line-through;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div class="page-top">
<div class="page-content">
<h2>任务计划列表</h2>
</div>
</div>
<div class="main">
<h3 class="big-title">添加任务:</h3>
<input type="text" class="task-input" placeholder="例如:吃饭睡觉打豆豆; 提示:+回车即可添加任务" v-on:keyup.enter="addTodo(123,$event)" v-model="todo">
<ul class="task-count">
<li v-show="list.length">{{list.length}}个任务未完成</li>
<li class="action">
<a class="active" href="#">所有任务</a>
<a href="#">未完成的任务</a>
<a href="#">完成的任务</a>
</li>
</ul>
<h3 class="big-title">任务列表:</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<li class="todo" :class="{completed:item.isChecked}" v-for="item in list">
<div class="view">
<input class="toggle" type="checkbox" v-model="item.isChecked">
<label @dblclick="editorTodo(item)">{{item.title}}</label>
<button class="destroy" v-on:click="deleteTodo(item)">x</button>
</div>
<input class="edit" type="text">
</li>
</ul>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
——来自Vue.js官网
app.js
/**
* Created by sotto on 2017-4-17.
*/
var list = [
{
title: "吃饭睡觉打豆豆1",
isChecked: false
},
{
title: "吃饭睡觉打豆豆1",
isChecked: true
},
];
new Vue({
el: ".main",
data: {
list: list,
todo: ""
},
methods: {
addTodo(data,event) {
//添加任务
//向list中添加一项任务
/*
{
title:
}
*/
console.log(event);
//事件处理函数中的this指向的是当前的根实例
// if(event.keyCode === 13){
this.list.push({
title: this.todo,
isChecked: false
});
// }
this.todo="";
},
deleteTodo(todo){
var index = this.list.indexOf(todo);
this.list.splice(index,1);
},
editorTodo(todo){//编辑任务
}
}
});
todos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<link rel="stylesheet" href="">
<style>
*{
padding:0;
margin:0;
}
.page-top{
position: fixed;
top:0;
left:0;
height: 40px;
background-color: #E8593D;
width:100%;
text-align: center;
}
.page-content{
color: #FFFFFF;
width: 70%;
margin-left: 15%;
line-height: 40px;
text-align: left;
}
.main{
margin-top: 40px;
margin-left: 15%;
width: 70%;
padding: 5px;
}
.main .task-input{
height:40px;
width:100%;
font-size: 20px;
}
.main ul li{
/*list-style-position: inside;*/
list-style-type: none;
}
.completed{
text-decoration:line-through;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div class="page-top">
<div class="page-content">
<h2>任务计划列表</h2>
</div>
</div>
<div class="main">
<h3 class="big-title">添加任务:</h3>
<input type="text" class="task-input" placeholder="例如:吃饭睡觉打豆豆; 提示:+回车即可添加任务" v-on:keyup.enter="addTodo(123,$event)" v-model="todo">
<ul class="task-count">
<li v-show="list.length">{{list.length}}个任务未完成</li>
<li class="action">
<a class="active" href="#">所有任务</a>
<a href="#">未完成的任务</a>
<a href="#">完成的任务</a>
</li>
</ul>
<h3 class="big-title">任务列表:</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<li class="todo" :class="{completed:item.isChecked}" v-for="item in list">
<div class="view">
<input class="toggle" type="checkbox" v-model="item.isChecked">
<label @dblclick="editorTodo(item)">{{item.title}}</label>
<button class="destroy" v-on:click="deleteTodo(item)">x</button>
</div>
<input class="edit" type="text">
</li>
</ul>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
相关文章推荐
- 腾讯十天Vue.js课程之四:编辑便签任务
- 腾讯十天Vue.js课程之六:组件
- 腾讯十天Vue.js课程之二:指令与模版
- 腾讯十天Vue.js课程之一:Vue.js介绍
- vue.js+Element 增删改查
- vue.js+Element实现表格里的增删改查
- vue.js学习05之基于$.ajax的跨越增删改查
- vue.js学习笔记第一季-基础指令集(JS胖老师课程)
- 手机精华版《Vue.js 2 入门与提高》课程发布了!
- Vue.js——基于$.ajax实现数据的跨域增删查改
- Vue.js 2.0之全家桶系列视频课程——笔记(二)
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
- Vue+Mock.js模拟登录和表格的增删改查功能
- Vue.js——基于ajax实现数据的跨域增删查改
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)
- vue.js+ element 增删改查
- vue.js 实现 todo list 任务表单
- vue.js+Element 增删改查