用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localstorage里面,而且下方的列表点击之后也会有变化:
完整代码:
app.vue
<template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newitem" v-on:keyup.enter="addnew" ></input> <ul> <li v-for="item in items" v-bind:class="{finished:item.isfinished}" v-on:click="togglefinish(item)">{{item.label}}</li> </ul> </div> </template> <script> import store from './store' export default { data:function(){ return { title:"this is a todolist", items:store.fetch(), newitem:"" } }, watch:{ items:{ handler:function(items){ store.save(items) }, deep:true } }, methods:{ togglefinish:function(item){ item.isfinished = !item.isfinished }, addnew:function(){ this.items.push({ label:this.newitem, "isfinished":false }) this.newitem="" } } } </script> <style> .finished{ text-decoration:underline; } li{ list-style:none; font-size:1.6em; margin-top:10px; } #app { font-family: 'avenir', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } input{ width:230px; height:40px; border-radius:20px; padding: 0.4em 0.35em; border:3px solid #cfcfcf; font-size: 1.55em; } </style>
store.js:
const storage_key='todos-vuejs' export default { fetch:function(){ return json.parse(window.localstorage.getitem(storage_key)||'[]'); }, save:function(items){ window.localstorage.setitem(storage_key,json.stringify(items)) } }
详细解析
es6的写法:
export default { name: 'hello', data () { return { msg: 'welcome to your vue.js app' } } }
export default 和 export 区别:
1).export与export default均可用于导出常量、函数、文件、模块等
2).你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3).在一个文件或模块中,export、import可以有多个,export default仅有一个
4).通过export方式导出,在导入时要加{ },export default则不需要
1.export
//demo1.js export const str = 'hello world' export function f(a){ return a+1} 对应的导入方式: //demo2.js import { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号
2.export default
//demo1.js export default const str = 'hello world' 对应的导入方式: //demo2.js import str from 'demo1' //导入的时候没有花括号
当最简单导入的时候,这个值是将被认为是”入口”导出值。
在app.vue中完成项目编写:
组件布局将在这里设置,.vue文件将由vue-loader进行加载,.vue内同时包含html、css、js源码,使组件的独立,组件之间可以尽可能地解耦,便于开发维护
先看一个简单示例:只要isfinished为true就加下划线,false就不加下划线:
<template> <div id="app"> <h1 v-html = "title"></h1> <ul> <li v-for="item in items" v-bind:class="{finished:item.isfinished}">{{item.label}}</li> </ul> </div> </template> <script> import hello from './components/hello' export default { data:function(){ return { title:"this is a todolist", items:[ { label:"coding", "isfinished":false }, { label:"walking", "isfinished":true } ] } } } </script> <style> .finished{ text-decoration:underline; } #app { font-family: 'avenir', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
对于class的控制如上:如果是数组的话则可以渲染多个。
再进一步完成功能:点击没有下划线的li就会加下划线,有下划线就会去除下划线。
需要绑定事件:
还要添加方法togglefinish():
methods:{ togglefinish:function(item){ item.isfinished = !item.isfinished } }
将input输入的值添加到列表下面
添加input:
<input v-model="newitem" v-on:keyup.enter="addnew" ></input>
data对象添加:
newitem:""
添加方法:
//addnew:function(){ // alert(this.newitem) // this.newitem="" //添加后加输入框清空 //} addnew:function(){ this.items.push({ label:this.newitem, "isfinished":false }) this.newitem="" }
使用localstorage来存储
使用store.js:
const storage_key='todos-vuejs' export default { fetch:function(){ return json.parse(window.localstorage.getitem(storage_key)||'[]'); }, save:function(items){ window.localstorage.setitem(storage_key,json.stringify(items)) } }
两个方法:一个设置,一个获取
导入:
import store from './store'
打印一下store,console.log(store),可以看到:
由于加入代码中每次都需要添加还有删除等等,如果每次都用到store的方法,这就有点麻烦了,所以这里就要用到watch观察。
watch:{ items:{ handler:function(val,oldval){ console.log(val,oldval) }, deep:true } },
可以看到打印出:
使用save()方法:
watch:{ items:{ handler:function(items){ store.save(items) }, deep:true } },
一有变化就会触发。
将fetch()方法也加进去:
<script> import store from './store' export default { data:function(){ return { title:"<span>?</span>this is a todolist", items:store.fetch(), newitem:"" } }, watch:{ items:{ handler:function(items){ store.save(items) }, deep:true } }, methods:{ togglefinish:function(item){ item.isfinished = !item.isfinished }, addnew:function(){ this.items.push({ label:this.newitem, "isfinished":false }) this.newitem="" } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
vue中的@click.native.prevent,点击事件加上native.prevent究竟有什么用呢?
vue+element导出excel并通过xlsx-style修改样式
uniapp-iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab
网友评论