Vue.js学习TodoMVC小Demo
实现效果如下：
把玩了添加和删除功能，代码如下：
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section class="todoapp" id="app">
<header class="header">
<h1 v-on:click="f">{{ title }}</h1>
<form>
<input @keyup.enter="add" v-model="text" class="new-todo" placeholder="What needs to be done?" autofocus>
</form>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked>
<label>Taste JavaScript</label>
<button class="destroy" ></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
<li class="editing">
<div class="view">
<input class="toggle" type="checkbox">
<label>Buy a unicorn</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>
<li v-for="todo in todos">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
<label>{{ todo.text }}</label>
<button class="destroy" v-on:click="destory(todo.text)"></button>
</div>
<input class="edit" value="Rule the web">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be ` items left` by default -->
<span class="todo-count"><strong></strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<!-- <script src="node_modules/todomvc-common/base.js"></script> -->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js:
(function (window) {
'use strict';
// Your starting point. Enjoy the ride!
var todos = [
{text: '吃饭', completed: true},
{text: '睡觉', completed: false},
{text: '相亲', completed: true},
]
new Vue({
el: '#app',
data: {
title: '思思时钟',
todos: todos,
text: ''
},
methods: {
f: function() {
window.alert('思思，你好');
},
// 添加
add: function() {
// 在vue应用程序中的方法内部可以通过this来访问当前应用程序的上的data中的成员
// window.alert(this.text);
// 由于改变了数据成员，使用v-for指定的地方就会重新渲染，修改模型，就会修改视图界面
// 修改了视图界面就会修改模型数据
if (this.text.trim().length === ) {
return;
}
this.todos.push({
text: this.text,
completed: false
});
this.text = '';
},
// 删除
destory: function(text) {
// console.log(text);
var that = this;
this.todos.find(function(todo, index) {
if (todo.text === text) {
that.todos.splice(index, );
}
});
}
}
});
})(window);
对Vue突然开始产生了很大的兴趣，思思打算把玩Vue了哟，哈哈
Vue.js学习TodoMVC小Demo的更多相关文章
- 用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- vue.js学习系列-第一篇
VUE系列一 简介 vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...
- MPVUE - 使用vue.js开发微信小程序
MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
随机推荐
- 【Java】Eclipse+环境安装及新建Project
安装Eclipse 1.进入ecilpse官方下载地址:https://www.eclipse.org/downloads/?FEATURED_STORY 2.点击红色箭头指向的Download Pa ...
- Java中String、StringBuffer、StringBuilder、StringTokenizer的区别
Java语言中,有4个类可以对字符或字符串进行操作,它们是Character.String.StringBuffer.StringTokenizer,其中Character用于单个字符操作,Strin ...
- 转,SqlServer 基础之(触发器)
概念: 触发器(trigger)是SQL server 提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动,而是由事件来触 ...
- sql server 存储过程---游标的循环
sqlserver中的循环遍历(普通循环和游标循环) sql 经常用到循环,下面介绍一下普通循环和游标循环 1.首先需要一个测试表数据Student
- Jedis常用方法API
一.键操作 二.字符串操作 三.整数和浮点数操作 四.列表(List)操作 五.集合(Set)操作 六.哈希(Hash)操作 七.有序集合(Zsort)操作 八.排序操作
- Bzoj 3333 高级打字机(主席树)
3333 高级打字机 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能 ...
- unity当两个以上Android插件冲突，怎么配置manifest
https://my.oschina.net/u/3332153/blog/855798 一 问题 当unity导入两个以上package并且都有manifest配置时,unity不会自动合并而是替换 ...
- C++11多线程std::thread创建方式
//#include <cstdlib> //#include <cstdio> //#include <cstring> #include <string& ...
- 1 课务 iOS 概述
重要注意 紫色解释 蓝色分类 新内容 CS193P 本课老版本 2010 年冬 http://open.163.com/movie/2010/6/C/7/M6RU83DCT_M6RU957C7.htm ...
- 链家网爬虫同步VS异步执行时间对比
异步执行时间 import time import asyncio import aiohttp from lxml import etree start_time = time.time() asy ...