用vue.js实现一个todolist项目&＃xff1a;input输入框输入的值会呈现在下方&＃xff0c;并且会保存在localStorage里面&＃xff0c;而且下方的列表点击之后也会有变化&＃xff1a;
完整代码&＃xff1a;
App.vue
"title">
"newItem" v-on:keyup.enter&＃61;"addNew" >
store.js:
const STORAGE_KEY&＃61;&＃39;todos-vuejs&＃39;
export default {fetch:function(){return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||&＃39;[]&＃39;);},save:function(items){window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))}
}
详细解析
ES6的写法&＃xff1a;
export default {name: &＃39;hello&＃39;,data () {return {msg: &＃39;Welcome to Your Vue.js App&＃39;}}
}
export default 和 export 区别&＃xff1a;
1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import&＃43;(常量 | 函数 | 文件 | 模块)名的方式&＃xff0c;将其导入&＃xff0c;以便能够对其进行使用
3.在一个文件或模块中&＃xff0c;export、import可以有多个&＃xff0c;export default仅有一个
4.通过export方式导出&＃xff0c;在导入时要加{ }&＃xff0c;export default则不需要
1.export
//demo1.js
export const str &＃61; &＃39;hello world&＃39;
export function f(a){ return a&＃43;1}
对应的导入方式&＃xff1a;//demo2.js
import { str, f } from &＃39;demo1&＃39; //也可以分开写两次&＃xff0c;导入的时候带花括号2.export default
//demo1.js
export default const str &＃61; &＃39;hello world&＃39;
对应的导入方式&＃xff1a;//demo2.js
import str from &＃39;demo1&＃39; //导入的时候没有花括号
当最简单导入的时候&＃xff0c;这个值是将被认为是”入口”导出值。
在App.vue中完成项目编写&＃xff1a;
组件布局将在这里设置&＃xff0c;.vue文件将由vue-loader进行加载&＃xff0c;.vue内同时包含html、css、js源码&＃xff0c;使组件的独立&＃xff0c;组件之间可以尽可能地解耦&＃xff0c;便于开发维护
先看一个简单示例&＃xff1a;只要isFinished为true就加下划线&＃xff0c;false就不加下划线&＃xff1a;
"title">
对于class的控制如上&＃xff1a;如果是数组的话则可以渲染多个。
再进一步完成功能&＃xff1a;点击没有下划线的li就会加下划线&＃xff0c;有下划线就会去除下划线。
需要绑定事件&＃xff1a;
还要添加方法toggleFinish()&＃xff1a;
methods:{toggleFinish:function(item){item.isFinished &＃61; !item.isFinished}}
将input输入的值添加到列表下面
添加input&＃xff1a;
"newItem" v-on:keyup.enter&＃61;"addNew" >
data对象添加&＃xff1a;
newItem:""
添加方法&＃xff1a;
//addNew:function(){
// alert(this.newItem)
// this.newItem&＃61;"" //添加后加输入框清空
//}
addNew:function(){this.items.push({label:this.newItem,"isFinished":false })this.newItem&＃61;""
}
使用localStorage来存储
使用store.js&＃xff1a;
const STORAGE_KEY&＃61;&＃39;todos-vuejs&＃39;
export default {fetch:function(){return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||&＃39;[]&＃39;);},save:function(items){window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))}
}
两个方法&＃xff1a;一个设置&＃xff0c;一个获取
导入&＃xff1a;
import Store from &＃39;./store&＃39;
打印一下Store,console.log(Store)&＃xff0c;可以看到&＃xff1a;
由于加入代码中每次都需要添加还有删除等等&＃xff0c;如果每次都用到store的方法&＃xff0c;这就有点麻烦了&＃xff0c;所以这里就要用到watch观察。
watch:{items:{handler:function(val,oldVal){console.log(val,oldVal)},deep:true}},
可以看到打印出&＃xff1a;
使用save()方法&＃xff1a;
watch:{items:{handler:function(items){Store.save(items)},deep:true}},
一有变化就会触发。
将fetch()方法也加进去&＃xff1a;
Vue.js计算属性和样式 --2017.03.07
京公网安备 11010802041100号