收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

基于vuejs实现一个todolist项目

用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就会加下划线,有下划线就会去除下划线。

需要绑定事件:

<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</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>


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

详解AngularJs HTTP响应拦截器实现登陆、权限校验
$httpAngularJS的$http服务允许我们通过发送HTTP请求方式与后台进行通信。在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行

详解angular用$sce服务来过滤HTML标签
angularjs的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的

Vue 实用分页paging实例代码
直接上代码。只有一个小小的需要注意的点:vue1.x的v-for循环是从0开始,遵从了程序语言设计的一贯的做法,而vue2.x是从1开始的,符合我们平常的习惯

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号