vue+vuex+localStorage实现记事本

vue实现记事本

vue数据双向绑定的原理
实现简单版vue的过程，主要实现{{}}.v-model和事件指令的功能。

实现数据绑定 的做法:
数据劫持:
vue.js采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。

思路整理:
已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的。

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
Object.defineProperty(obj,prop,descriptor)
mvvm框架

view相当于dom元素
ViewModel相当于vue框架
Model–js中的对象
viewModel主要进行–DOM事件的监听，数据的绑定
一方面从view层监听到dom哪个操作，要让它干什么，然后通知model层，现在改变数据，改变数据之后viewmodel中有个数据绑定，通知view层进行改变。
总的来说，就是监听你要干什么，再把最新的数据返回。

参数:obj —需要被操作的目标对象
prop —目标对象需要定义或修改的属性的名称
descriptor
将被定义或修改的属性的描述符。
返回值:
被传递给函数的对象

vuex状态管理 vuex

执行事件的函数:

export default{
//添加事件函数
addevent:({commit}),param)=>commit(‘addevent’,{items:param}),
//事件已完成函数
eventdone:({commit},param)=>commit(‘eventdone’),{id:param}),
//事件编辑函数
eventcancel:({comit},param)=>commit(‘eventcancel’),{id,param}),
//事件清除函数
clearevent:({commit})=>commit(‘clearevent’),{id,param}),
//事件删除函数
deletevent:({commit})=>commit(‘deletevent’),{id,param}),
//编辑事件函数
editevent:({commit})=>commit(‘editevent’),{id,param}),

}

事件获取函数
export default{
//获取事件列表
getEventList(states){
return states.event;
},
//获取要完成的事件
getToDo(states){
return states.event.filter(function(d){
if(d.type===1){
return d;
}
}
}
}

getDone(states){
return states.event.filter(function(d){
if(d.type===2){
return d;
}
});
},

getCancel(states){
return states.event.filter(function(d){
if(d.type===3){
return d;
}
}
}