【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 指令可以绑定数组的数据来渲染一个项目列 ...
随机推荐
- C# 之多线程(二)
一.确定多线程的结束时间,thread的IsAlive属性 在多个线程运行的背景下,了解线程什么时候结束,什么时候停止是很有必要的. 案例:老和尚念经计时,2本经书,2个和尚念,一人一本,不能撕破,最 ...
- 面向对象(基础oop)之进入继承
大家好,我叫李京阳,,很高兴认识大家,之所以我想开一个自己的博客,就是来把自己所了解的知识点通过自己的话写一下,希望被博客园的朋友们点评和一起讨论一下,也希望从博客园中多认识一些软件开发人员!现在我开 ...
- layui使用 ——父,子页面传值
页面传值是非常常用的,layui自带弹窗功能,但是内置使用的是location.href 暂时没找到方法条件请求头,所以在后台需要放开拦截器, layer.open({ type : 2, title ...
- HDOJ2037 今年暑假不AC (经典的贪心问题)
Description “今年暑假不AC?” “是的.” “那你干什么呢?” “看世界杯呀,笨蛋!” “@#$%^&*%...” 确实如此,世界杯来了,球迷的节日也来了,估计很多ACMer也会 ...
- POJ 1258(最小生成树+知识)
用kruskal算法,利用w[i]给r[i]间接排序,从而r[i]可以按照边大小保存序号,同时要判断是否在一个集合里面 #include <cstdio> #include <ios ...
- hadoop fs -put localfile . 时出现如下错误: could only be replicated to 0 nodes, instead of 1
hadoop fs -put localfile . 时出现如下错误:could only be replicated to 0 nodes, instead of 1网友的说法: 这个问题是由于没有 ...
- jQuery bind()与delegate()的区别
笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2 监听个数 .bind监听个数多——每个目标元素都需要添 ...
- 您只能在 HTML 输出流中使用 document.write,啥意思
JavaScript :写入到HTML输出语法 注意:只能在HTML输出中使用,如果在文档已经加载后使用(比如在函数中) 会覆盖到整个文档 <!DOCTYPE html> <htm ...
- Linux VPS主机利用Crontab实现定时重启任务
第一.安装Crontab可执行环境 一般的VPS/服务器是支持的,但是有些可能没有支持就需要我们来给予安装. A - centos系统 #安装Crontab yum install vixie-cro ...
- kali 的端口扫描nmap
输入“nmap+空格+“-O”+空格+IP地址或域名. 扫描所有TCP端口:输入“nmap+空格+“-sT”+空格+IP地址或域名” 扫描所有开放的UDP端口:输入“nmap+空格+”-sP”+空格+ ...