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初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
随机推荐
- Nginx入门（二）——双机热备
upstream backend { server ; server backup; } server { listen ; server_name localhost; #charset koi8- ...
- 微服务，开源 RPC 框架 - Spring Cloud
Spring Cloud:国外 Pivotal 公司 2014 年对外开源的 RPC 框架,仅支持 Java 语言 Spring Cloud 利用 Spring Boot 特性整合了开源行业中优秀的组 ...
- PL/SQL嵌入SQL语句
一.PL/SQL块中只能直接嵌入SELECT.DML(INSERT,UPDATE,DELETE)以及事务控制语句(COMMIT,ROLLBACK,SAVEPOINT), 而不能直接嵌入DDL语句(CR ...
- java中byte的范围计算
概念:java中用补码表示二进制数,补码的最高位是符号位,最高位为“0”表示正数,最高位为“1”表示负数.正数补码为其本身:负数补码为其绝对值各位取反加1:例如:+21,其二进制表示形式是000101 ...
- django.db.models.fields.related_descriptors.RelatedObjectDoesNotExist
Enrollment has no customer.
- 【排序算法】冒泡排序（Bubble Sort）
一.简介 冒泡排序(Bubble Sort)也是一种简单直观的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换, ...
- ModelAndView返回Json格式的数据
第一种方式: 1.自定义类JacksonUtil.java,类中实现tojson方法(即将数据转成json类型): 2.自定义类JsonView 继承 AbstractView 3.xml中配置bea ...
- Mybatis延迟加载， 一级缓存、二级缓存
延迟加载 概念:MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时,按照设置延迟规则推迟对关联对象的select查询.延迟加载可以有效的减少数据库压力. (注意:MyBatis的延迟加载只 ...
- php面向对象之数据隐藏
什么是数据隐藏? 看到这个有的人会觉得挺不理解的.在前面的文章中,介绍类的时候,我们说定义变量用的关键词是public,但是不止这一个,还有public.private.protected.stati ...
- hive表的DDL
查看表 hive> show tables;创建表 hive> create table t1(id int);查看表结构 ...