【vue】todolist小练习
参考链接:
http://www.imooc.com/learn/694
http://www.cnblogs.com/Chen-XiaoJun/p/6238137.html
http://blog.csdn.net/sinat_17775997/article/details/52536010
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' //导入的时候没有花括号
html部分
<template>
<div id="app">
<h1 v-text="title"></h1>
<input v-model="newItem" @keyup.enter="addNew"/>
<ul>
<li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
<span v-on:click="deleteThis(item)">delete</span>
{{item.label}}
<hr/>
</li>
</ul>
</div>
</template>
js部分
结合localStorage和JSON将item序列化为JSON格式存储
const STORAGE_KEY = 'todos-vuejs'//es6语法 const定义一个常量
export default {
fetch () {//es6语法 相当于 fetch:function(){}
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save (items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
}
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
<script>
import Store from './assets/js/store'
import componentA from './components/componentA'
//相当于module.export
export default {
/*function data(){
return...
}*/
/*相当于var vue = new vue({data: function(){}})*/
data () {
return {
title: 'TODO LIST',
items: Store.fetch() || [],
newItem: '',
childWords: ''
}
},
components: {
componentA
},
watch: {
items: { //这是深度watch,监控items变化的时候,自动执行函数
handler: function(items){
Store.save(items)
},
deep: true //也检测item内部的变化
}
},
methods: {
toggleFinish: function(item) {
item.isFinished = !item.isFinished
},
addNew: function() {
this.items.push({
label: this.newItem,
isFinished: false
})
this.newItem = ''
},
deleteThis: function(item) {
this.items.splice(this.items.indexOf(item), 1)
Store.save(this.items)
}
}
}
</script>
CSS部分:
<style>
*{
margin:;
padding:;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
#app {
color: #2c3e50;
font-family: Source Sans Pro, Helvetica, sans-serif;
text-align: center;
width: 60%;
}
#app a {
color: #42b983;
text-decoration: none;
}
#app h1:nth-child(1) {
line-height:;
position: absolute;
top: 5%;
}
#app input {
width: 60%;
line-height: 24px;
font-size: 24px;
position: absolute;
top: 25%; left: 20%;
}
ul {
position: absolute;
top: 35%;
text-align: left;
width: 60%;
height: 55%;
overflow: auto;
}
ul li {
list-style: none;
line-height:;
font-size: 24px;
}
span {
font-size: 16px;
color: #fff;
padding: 2px 5px;
text-align: left;
background-color: indigo;
border-radius: 5px;
}
.finished {
color: #ccc;
}
hr {
border-top:1px dashed #ccc;
}
</style>
最终效果
【vue】todolist小练习的更多相关文章
- Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...
- Vue编写的todolist小例子
Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...
- Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用
Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...
- Vue之小入门
Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...
- 利用ncurses库开发终端工具箱(1)—— ToDoList小工具开发
准备工作 腾讯云服务器(Ubuntu),C++编程语言 由于想输出界面中包含中文,所以安装库 libncursesw5,依次输入下面三行命令 sudo apt-get install libncurs ...
- 跟我一起做一个vue的小项目(二)
这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...
- 基于vue 、vue-router 、firebase的todolist小项目
第一次写博客,都不知道改怎么写的好. 本着一颗学习的心,也希望一段时间后再回来在看看自己写的代码,会不会让自己有种不忍直视的念头 *-* 还是先上图吧~ 这是首页,主要是展示所有的列表页面,可以通过输 ...
- 基于Vue的小日历(支持按周切换)
基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template> <div class="date"> <!-- 年份 ...
- vue.js小总结
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...
随机推荐
- Docker学习之Centos7下安装
Docker学习之Centos7下安装 centos7 64下直接使用yum安装docker环境,步骤如下: 卸载旧版本docker sudo yum remove docker docker-com ...
- android 使用图片轮播图---banner 使用
转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...
- Dapper扩展
using Dapper; using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using Sy ...
- C# 调用C++DLL 类型转换
内容转自网上····这里做 备份··· 原文链接: http://blog.csdn.net/miss_easy/article/details/52470964 /C++中的DLL函数原型为 //e ...
- javascript判断浏览器支持CSS3属性
function getsupportedprop(proparray){ var root=document.documentElement; //reference root element of ...
- Web服务器学习总结(一):web服务器简介
一.WEB服务器 1.1.WEB服务器简介 1.Web服务器是指驻留于因特网上某种类型计算机的程序,是可以向发出请求的浏览器提供文档的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处 ...
- react打包开发文件的步骤(上传给线上环境)
cd进入ReleaseProject目录,然后运行npm start,系统会自动在public目录下面完成打包工作,然后我再把 public文件下压缩位public.rar上传即可:(public文 ...
- Leetcode算法比赛---- Lexicographical Numbers
问题描述 Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,10 ...
- java中方法调用在内存中的体现
在java中,方法以及局部变量(即在方法中声明的变量)是放在栈内存上的.当你调用一个方法时,该方法会放在调用栈的栈顶.栈顶的方法是目前正在执行的方法,直到执行完毕才会从栈顶释放.我们知道,栈是一种执行 ...
- OkHttp3源码详解(三) 拦截器-RetryAndFollowUpInterceptor
最大恢复追逐次数: ; 处理的业务: 实例化StreamAllocation,初始化一个Socket连接对象,获取到输入/输出流()基于Okio 开启循环,执行下一个调用链(拦截器),等待返回结果(R ...