vue-todoMvc待办事项列表
2017-03-14 本文已影响0人
龍太
ok,今天继续复盘昨天学的东西。
为了更好的理解vue，我跟着vue官网上给出的todoMvc做了一遍。
代码:https://github.com/RedDean/work/tree/master/todomvc/todo
但是官方例子只给出了代码，并没有详细步骤，所以我花了些时间又找了个教程，链接如下:
http://www.jirengu.com/app/album/66
这个例子还是以vue-cli构建工具创建的，详细如何使用就不赘述了，可看前文以及官网的解释。
本例使用了chrome的vue dev插件 ，使用这个工具可以很直观的看到Data的变化
贴出主要代码:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'todomvc-app-css/index.css'
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
let filter = {
all(todos){
return todos;
},
active(todos){
return todos.filter((todo)=>{
return !todo.completed;
})
},
completed(todos){
return todos.filter((todo)=>{
return todo.completed;
})
}
}
/* eslint-disable no-new */
let app = new Vue({
el: '.todoapp',
data:{
'redean':'awesome',
'title':'todo-Yo',
newTodo:'',
todos:[{
content:'周慧敏',
completed:false
},
{
content:'王祖贤',
completed:false
},
{
content:'钟楚红',
completed:false
}
],
edited:null,
hashName:'all'
},
computed:{
remain(){
return filter.active(this.todos).length;
},
isAll: {
get(){
return this.remain === 0;
},
set(flag){
this.todos.forEach((item)=>{
item.completed =flag;
})
}
},
filteredTodos(){
return filter[this.hashName](this.todos);
}
},
methods:{
addTodo:function (e) {
if(!this.newTodo) return;
this.todos.push({
content: this.newTodo,
completed:false
});
//还原输入项
this.newTodo = '';
},
removeTodo:function (i) {
this.todos.splice(i,1);
},
editTodo(todo){
this.editCache = todo.content;
this.edited = todo;
},
cancleEdit(todo){
this.edited = null;
todo.content = this.editCache;
},
doneEdit(todo,index){
this.edited = null;
if(!todo.content) {
this.removeTodo(index);
}
},
clear(){
this.todos = filter.active(this.todos);
}
},
directives:{
focus(el,value){
if(value){
el.focus();
}
}
}
})
window.addEventListener('hashchange',hashchanged);
function hashchanged() {
let hashName = location.hash.replace(/#\/?/,'');
if (filter[hashName]) {
app.hashName = hashName;
} else {
location.hash = '';
app.hashName = 'all';
}
}
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<!--<link rel="stylesheet" href="node_modules/todomvc-common/base.css">-->
<!--<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">-->
<!-- CSS overrides - remove if you don't need it -->
<!--<link rel="stylesheet" href="css/app.css">-->
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>{{title}}</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus v-model.trim="newTodo" @keyup.enter="addTodo">
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input class="toggle-all" type="checkbox" v-model="isAll">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<li v-for="(todo,index) in filteredTodos" :class="{completed:todo.completed,editing:edited==todo}">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
<label @dblclick="editTodo(todo)">{{todo.content}}</label>
<button class="destroy" @click="removeTodo(index)"></button>
</div>
<input class="edit"v-model="todo.content"
v-focus="edited==todo"
@blur="doneEdit(todo,index)"
@keyup.esc="cancleEdit(todo,index)"
@keyup.enter="doneEdit(todo,index)"
>
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer" v-show="todos.length">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>{{remain}}</strong> {{todos.length>1?"items":"item"}} left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a :class="{selected:hashName=='all'}" href="#/">All</a>
</li>
<li>
<a :class="{selected:hashName=='active'}" href="#/active">Active</a>
</li>
<li>
<a :class="{selected:hashName=='completed'}" href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed" @click="clear">Clear completed</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<!--<script src="node_modules/todomvc-common/base.js"></script>-->
<!--<script src="js/app.js"></script>-->
</body>
</html>
昨天的点有如下几个:
1.v-model 数据绑定
2.v-for循环时可以返回多个值，如本例中的(todo,index)
3.类的绑定使用bind,可传一个表达式动态显示样式
4.自定义指令directives对象,需要将目标元素传入，本例子中的focus指令
5.计算属性不一定要方法，也可以是包含get,set方法的对象
6.删除数组splice，妈蛋，要好好再看一遍array的api
7.vue中的双击事件是dblclick不是dbclick
8.注意一些修饰符的使用,本例中使用v-model.trim来去除输入框中的空格
以上。
