VUE学习之todomvc
TodoMVC 案例官网：http://todomvc.com/
一。nmp安装依赖
因为下载的模板没有样式 ，所以要通过 nmp 安装相关依赖，依赖配置在 package.json 文件中
通过 cmd 进入到 TodoMVC项目所在目录，执行命令： npm install
注意：要使用 npm 命令，需要安装 node.js 环境才可用。
二。安装VUE依赖
1.下载vue npm install vue@2.6.10
2.引入vue
3.在 app.js 中添加如下 Vue 入口
(function (Vue) {
//表示依赖了全局的 Vue
var app = new Vue({ el: '#todoapp' })
})(Vue);
三。app.js代码
(function (Vue) {
//定义本地存储 key
const S_KEY="items-vue"
const itemStorage={
//读取本地存储
fecth:function(){
return JSON.parse(localStorage.getItem(S_KEY)||'[]')
},
//数据保存到本地
save:function(items){
localStorage.setItem(S_KEY,JSON.stringify(items))
}
}
//注册全局指令 用户获取焦点
Vue.directive('app-focus',{
inserted(el,binding){
el.focus()
},
update (el,binding){
console.log(binding.value)
if(binding.value){
el.focus()
}
}
})
new Vue({
el:"#todoapp",
data:{
title:'hello',
state:1,
items:itemStorage.fecth(),
currentItem:null
},
watch:{//监听 items变化 自动保存
items:{
deep:true,
handler:function(newitems,olditems){
itemStorage.save(newitems)
}
}
},
//计算属性
computed:{
fitems(){ //切换 全部 已完成 未完成
switch(this.state){
case 2:
return this.items.filter(function(item){ //用filter过滤函数 筛选出未完成的
return !item.completed
})
break;
case 3:
return this.items.filter(function(item){
return item.completed
})
break;
default:
return this.items
break;
}
},
aall:{ //全选 全部取消
get(){
return this.wwc===0
},
set(value){
// console.log(value)
this.items.forEach(function(element) {
element.completed = value
});
}
},
wwc(){ //未完成数量
//使用过滤函数 filter 获得未完成的数组
const arr=this.items.filter(function(item){
return !item.completed
})
//获取数组长度 返回给计算属性
return arr.length
},
qing1(){
const arr=this.items.filter(function(item){
return item.completed
})
//获取数组长度 返回给计算属性
if(arr.length >0){
return true
}
return false
}
},
methods:{
finishEdit(item,key,event){ //编辑
const content=event.target.value.trim()
if(!content){
this.del(key)
}
item.content=content
this.currentItem=null
},
cancelEdit(){
this.currentItem=null
},
toEdit(item){
// console.log(item)
this.currentItem=item
},
addItem(event){ //添加
var content=event.target.value.trim()
if(content.length){
var id=this.items.length +1
if(id==1){
this.items=[{
id:id,
content:content,
completed:false
}]
}else{
this.items.push({
id:id,
content:content,
completed:false
})
}
event.target.value=''
}
},
del(key){
this.items.splice(key,1)
},
qing(){ //清理已完成的项目
var arr=this.items.filter(item=> { //筛选出 未完成的项目 赋值给 items
return !item.completed
})
this.items=arr
},
updateState(value){
this.state=value
}
}
})
})(Vue);
四。index.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" id="todoapp">
<header class="header">
<h1>{{title}}</h1>
<input @keyup.enter="addItem" class="new-todo" placeholder="What needs to be done?" v-app-focus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main" v-show="items.length">
<input id="toggle-all" v-model="aall" class="toggle-all" type="checkbox" >
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li v-for="(item,key) in fitems" :class="{completed:item.completed,editing:item===currentItem }">
<div class="view" >
<input class="toggle" type="checkbox" v-model="item.completed">
<label @dblclick="toEdit(item)">{{item.content}}</label>
<button class="destroy" :value="item.id" @click="del(key)"></button>
</div>
<input v-app-focus="item===currentItem"
@keyup.enter="finishEdit(item,key,$event)" @blur="finishEdit(item,key,$event)"
@keyup.esc="cancelEdit" class="edit" :value="item.content">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer" v-show="items.length">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>{{wwc}}</strong> item{{wwc==1?'':'s'}} left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a :class="{selected:state==1}" href="#/" @click="updateState(1)">All</a>
</li>
<li>
<a :class="{selected:state==2}" href="#/active" @click="updateState(2)">Active</a>
</li>
<li >
<a :class="{selected:state==3}" href="#/completed" @click="updateState(3)">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button v-show="qing1" class="clear-completed" @click="qing">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/vue/dist/vue.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<script src="node_modules/todomvc-common/base.js"></script>
</body>
</html>
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
