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初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
随机推荐
- ASP.NET MVC 入门7、Hellper与数据的提交与绑定
View视图 我们可以手写HTML代码, 也可以采用基类提供的Helper类完成HTM代码. 示例: <%=Html.ActionLink("首页","index& ...
- Mybatis的一级缓存机制简介
1.接口 public interface MemberMapperCache { public Members selectMembersById(Integer id); } 2.配置文件xml ...
- 001_软件安装之《MATLAB2016安装》
测试电脑:win7 64位操作系统 下载地址: 链接:https://pan.baidu.com/s/1xkyhF6pdkx_kZiNjFireZw 密码:mvpp 链接:https://pa ...
- 057_统计 Linux 进程相关数量信息
#!/bin/bashrunning=0sleeping=0stoped=0zombie=0 #在 proc 目录下所有以数字开始的都是当前计算机正在运行的进程的进程 PID#每个 PID 编号的目录 ...
- CF809E 【Surprise me!】
我们要求的柿子是张这样子的: \[\frac{1}{n * (n - 1)} * \sum_{i = 1}^n\sum_{j = 1}^{n}\phi(a_i*a_j)*dis(i, j)\] 其中\ ...
- 下面的代码在Python2中的输出是什么？解释你的答案
python2 def div1(x,y): print "%s/%s = %s" % (x, y, x/y) def div2(x,y): print "%s//%s ...
- docker笔记--如何批量删掉已经停止的容器
(以下操作都是在root用户) 方法如下: (1)显示所有容器,过滤出状态为Exited的容器id,然后删除. # for i in `docker ps -a |grep Exited |awk ...
- Tcl循环语句
for 开始 判断语句 变量自增(自检) 循环体 示例代码: for {set i 0} {$i<10} {incr i} { puts "I is: $i " } 运行结果 ...
- Centos7 开启swap分区
阿里云购买的机器,默认不会开启swap分区,如有需要,需自行开启. 阿里当前的做法是: 1.不创建swap分区,由镜像决定 2.将vm.swappiness设定为0,即永不使用swap分区 开启swa ...
- [Android] i2c-toos 在 Android 上使用
CPU:RK3399 系统:Android 7.1 i2c-tools 是一款免费开源的工具,可以检测 i2c 总线上的设备,可以读写寄存器等等 可以从下面路径下载需要的版本: https://www ...