【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 指令可以绑定数组的数据来渲染一个项目列 ...
随机推荐
- linux中find与rm实现查找并删除文件
find命令: find . -name '*.log' #查找当前目录下的log文件 查找并删除: find . -name '*.log' -type f -print -exec rm -rf ...
- MVC中学到的小知识(MVC中的跳转,传参)
1.mvc中视图中的href="XXX",这个XXX是控制器地址,不是另一个视图.(这里的href语句只能转向控制器,不能直接转向视图),如果要实现转向视图,可以先转到控制器,然后 ...
- [PHP] apache在worker模式配置fastcgi使用php-fpm
1.准备: dpkg -L apache2查看所有安装的apache2的应用 a2query -M查看apache2使用的模式 httpd -l旧版本查看当前apache模式 2.查看apache的进 ...
- java加载redis以及基本操作
前言: Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure server).Redis的键值可以包括字符串(st ...
- HDU 4489(DP)
http://acm.hdu.edu.cn/showproblem.php?pid=4489 解题思路这里已经说的很清楚了: http://blog.csdn.net/bossup/article/d ...
- Redis实现分布式锁1
Jedis结合setNX方法实现分布式锁 public boolean lock(String key, int exprie) { try { exprie = exprie <= 0 ? 6 ...
- js-99乘法表的练习
<html> <head> <title>World</title> <style type="text/css"> & ...
- Freebsd10.3(FreeBSD11 Beta1)使用手记
Freebsd10.3(FreeBSD11 Beta1)使用手记 1.安装系统. 2.设置ssh2登录,并开启ftp. (1)编辑/etc/ssh/sshd_config文件,设置如下: Permit ...
- Bzoj3197: [Sdoi2013]assassin
题面 传送门 Sol 套路:找出重心,如果有两个就新建一个点 然后把这棵树hash一下 设\(f[i][j]\)表示第一颗树到\(i\)第二棵树到\(j\),子树\(i,j\)同构的付出的最小代价 转 ...
- git分支无法获取
git 上新建的分支,本地想要拉取该分支,但是找不到这个分支 使用 git branch -a 也看不到该分支 使用命令: git checkout -b branch_nameA origin/ ...