[iOS] 用 Swift 开发一个 TODO 应用

原文地址:http://blog.callmewhy.com/2014/09/15/todo-list-in-swift/背景相信不少 iOS 程序员对于 Swift 依旧持以观望的态度,一来是这小家伙刚出来没几天,本身还处于完善的阶段;二来是学习的成本较高,看完官方文档怎么也要个几天的时间;三来是反正最近几年很难在工程项目里推广使用,工作又用不到,那我学个锤子呐。是的,我一开始也是这么想的。直到
摘要由CSDN通过智能技术生成

原文地址:http://blog.callmewhy.com/2014/09/15/todo-list-in-swift/




背景

相信不少 iOS 程序员对于 Swift 依旧持以观望的态度,一来是这小家伙刚出来没几天,本身还处于完善的阶段;二来是学习的成本较高,看完官方文档怎么也要个几天的时间;三来是反正最近几年很难在工程项目里推广使用,工作又用不到,那我学个锤子呐。

是的,我一开始也是这么想的。直到有一天,我遇到了它:Swift Tutorial - To Do List App。这是 YouTube 上的一个很好地视屏教程,手把手教你如何完成一个 TODO 的应用,功能很简单,就是添加任务和浏览任务。将视屏内容整理了一下。虽然没有什么高深的内容,但是作为一个入门的小程序还是挺适合的。

适用人群:有一定 Objective-C 的开发基础但是还没怎么接触 Swift 不过装有 Xcode6 想感受一下的 iOS 开发者。

客官,都看到这里了,何不打开 Xcode6 耍两把?玩一玩噻!来吧。来嘛!

需求

我们想做一个很简单的小东西,和官网的 Demo 一样,是一个 TODO 列表 (TODO:待办事项) ,具有以下功能:

  • 有一个列表显示 TODO
  • 有一个页面添加 TODO
  • 点击添加按钮,在列表显示新的 TODO 列表

揍是这么简单,让我们开始吧!

新建项目

新建一个项目,选择 Tabbed Application 模板,项目名称为:MyTodoList。记得选中 Swift 作为开发语言。Xcode 会创建一个 Swift 的项目:

添加管理类

我们需要的第一个类是一个 TodoList 的管理器,用来存储 TODO 列表的数据,进行一些增删改查的基本操作。我们将其命名为 TodoManager 。

在左侧文件夹上右击,选择 New File,选择 Cocoa Class ,类名为 TodoManager ,继承自 NSObject , Xcode 会自动为我们添加一个 TodoManager.swift 文件。

我们在 Swift 里定义的变量和函数都是全局属性的,这样我们可以在类的外面定义一个 TodoManager 的对象todoManager,简单的实现了单例模式:

import UIKit

var todoManager : TodoManager = TodoManager ()

class TodoManager: NSObject {

}

接下来定义一个结构体 (struct) 来表示一个 TODO 项,它有两个属性,一个是任务名称,一个是任务描述:

struct todo {
    
  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
好的,下面是使用Vue.js创建一个Todo List应用的步骤: 1. 创建Vue.js应用程序 你可以使用Vue CLI来创建一个新的Vue.js应用程序。打开终端并输入以下命令: ``` vue create todo-list ``` 这将创建一个名为“todo-list”的新Vue.js应用程序,并在其中包含所有必要的文件和依赖项。 2. 创建Todo组件 在src文件夹下创建一个名为“components”的新文件夹,并在其中创建一个名为“Todo.vue”的新文件。在这个文件中,你可以创建一个新的Vue组件,用于渲染Todo List应用程序的界面。 ```html <template> <div> <h1>Todo List</h1> <form v-on:submit.prevent="addTodo"> <input v-model="newTodo" placeholder="Add a new todo"> <button type="submit">Add</button> </form> <ul> <li v-for="(todo, index) in todos" v-bind:key="index"> <input type="checkbox" v-model="todo.completed"> <span v-bind:class="{ completed: todo.completed }">{{ todo.text }}</span> <button v-on:click="deleteTodo(index)">Delete</button> </li> </ul> </div> </template> <script> export default { data() { return { newTodo: '', todos: [] } }, methods: { addTodo() { if (this.newTodo.trim()) { this.todos.push({ text: this.newTodo, completed: false }) this.newTodo = '' } }, deleteTodo(index) { this.todos.splice(index, 1) } } } </script> <style> .completed { text-decoration: line-through; } </style> ``` 在这个组件中,我们定义了一个名为“newTodo”的data属性,用于存储新的Todo项的文本内容。我们还定义了一个名为“todos”的data属性,用于存储所有的Todo项。在template中,我们使用v-for指令来遍历todos数组,并为每个Todo项渲染一个li元素。我们还使用v-bind指令来将每个Todo项的completed属性绑定到一个复选框上,以便用户可以标记已完成的Todo项。最后,我们还定义了两个方法:addTodo方法用于添加新的Todo项,deleteTodo方法用于删除现有的Todo项。 3. 在应用程序中使用Todo组件 打开src文件夹下的“App.vue”文件,并将Todo组件导入到该文件中。然后在template中使用Todo组件。 ```html <template> <div id="app"> <Todo /> </div> </template> <script> import Todo from './components/Todo.vue' export default { name: 'app', components: { Todo } } </script> ``` 4. 运行应用程序 现在你可以运行应用程序并查看Todo List应用程序的界面。在终端中输入以下命令: ``` npm run serve ``` 这将启动开发服务器,并在浏览器中打开Todo List应用程序。你可以添加新的Todo项,并标记已完成的Todo项。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值