vue实现todo应用总结

青旅半醒 2021-10-09 04:16 306阅读 0赞

慕课网上的vue+webpack实现的TODO列表的开发，本人采用vue-cli方式进行项目初始化，后面可以修改webpack配置和安装响应的包等．用了部分es6语法．

**１．项目创建**

使用vue-cli创建(ps：vue-cli: 2.9.2版本)：

$npm init  webpack   vuetodo

进入项目目录：

$ cd　vuetodo

下载依赖：

$ npm install

运行项目：

$ npm run dev

**２．在webpack.base.config.js　添加．styl　文件的处理**

{
             test: /\.styl$/,
             loader: 'style-loader!css-loader!stylus-loader'
          },

**３．methods :\{   \} 注意methods有ｓ**

data() \{   return  \{ \}  \}

props:  \{  \}

**4.   stylus文件引入： stylus是css预处理器，比较小众，一般推荐使用SCSS　或者　less 或直接用css**

要独立安装stylus, stylus-loader

$ npm install stylus stylus-loader --save-dev

需要引入的地方用 :     import './\*\*\*/\*\*.styl'

<style   lang="stylus"  scoped>  scoped表示只应用于此组件

注意styl的格式，自己引入的时候出错了，上一篇博客：　　[出错博客][Link 1]

**５．Chrome 浏览器上的vue 插件，可以方便查看项目的vue组件结构和数据内容．（浏览器上直接安装）**

![70][]

**７．数组接口：**

array.filter(function(currentValue,Index,arr),   thisValue)   过滤出得到新数组，不改变原数组．

array.findIndex(function( currentValue, Inde))  遍历数组的每个元素，找到符合的索引值

array.splice( index, howmany , item1,...,itemm) 两个参数时删除从index处删除howmany个项目；三个参数时是增加项目．

改变原来数组

array.unshift(      \{ id: id++,   complete: true,  content: e.target.value.trim() \}    ) 把内容插入到数组首位．

**８．data() \{ \}  本组件自己的数据**

**   props :\{  \}  要用到父组件的数据时，在这里说明一下．然后就可以用了**

props: {
    		todo:{
    			type:Object,
    			require:true
    		}
    	},

**９．事件传递**

子组件的时间可以自定义下事件名字，然后触发时传给子组件进行处理，传递方法：

子组件：eg:　 item.vue里　自定义的事件为del，提交del事件到父组件

method: {
    		deleteTodo() {
    			this.emit('del',this.todo.id)
    		}
    	}

父组件要在标签里写上　<item　@del = "handleDel"   /item>　eg: todo.vue里，当遇到del事件时调用handelDel()函数处理．

<item　@del = "deleteTodo"   /item>

再写处理方法：

deleteTodo(id){
    			this.todos.splice(this.todos.findIndex(todo => todo.id === id),1)  // delete id item
    		},

**１０．项目地址：**

GitHub:

[Link 1]: http://blog.csdn.net/wenjiusui8083/article/details/79460878
[70]: /images/20211009/9bd1bd38c959416ab2ba43c621cb8991.png

发表评论取消回复

表情：

评论列表（有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

相关 Kbone 基础知识—Vue + Kbone实现Todos App

1、搭建Vue开发环境在命令行输入以下命令，创建一个 `vue-todos` 项目： // 在全局安装 @vue/cli npm install -g

深藏阁楼爱情的钟/ 2023年10月06日 14:42/ 0 赞/ 37 阅读

相关 todo-vue

主要是父子间通讯和方法调用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

蔚落/ 2023年05月30日 10:52/ 0 赞/ 1 阅读

相关 Kbone 基础——Vue + Kbone 实现 Todos App

1、搭建Vue开发环境在命令行输入以下命令，创建一个 `vue-todos` 项目： // 在全局安装 @vue/cli npm install -g

红太狼/ 2022年12月03日 08:45/ 0 赞/ 156 阅读

相关 Vue入门实战-TODO记事本

效果图 ![在这里插入图片描述][20210206164153207.gif] 实现代码 <html> <head> <met

绝地灬酷狼/ 2022年10月28日 14:22/ 0 赞/ 166 阅读

相关 vue3实现一个todo-list

> 实现方式不是最优,主要是为了学习vue3的一些新语法以及属性,各位大佬勿喷~ 功能介绍 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

旧城等待，/ 2022年09月06日 14:23/ 0 赞/ 163 阅读

相关使用Vue实现todos（Vue CLI和VueX）

Vue CLI > Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统全局安装脚手架 cnpm install -g @vue/cli

Love The Way You Lie/ 2022年04月24日 13:42/ 0 赞/ 274 阅读

相关 React实现todos

TodoMVC [官网实例][Link 1] git clone https://github.com/tastejs/todomvc-app-template

﹏ヽ暗。殇╰゛Y/ 2022年02月13日 13:43/ 0 赞/ 204 阅读

相关 vue应用难点总结

一、父子组件生命周期父组件create->子组件create->子组件mounted->父组件mounted 当一个钩子函数使用了异步请求时，并不会等该钩子函数中所有异步

桃扇骨/ 2021年11月01日 07:52/ 0 赞/ 255 阅读

相关 vue实现todo应用总结

慕课网上的vue+webpack实现的TODO列表的开发，本人采用vue-cli方式进行项目初始化，后面可以修改webpack配置和安装响应的包等．用了部分es6语法．１．

青旅半醒/ 2021年10月09日 04:16/ 0 赞/ 307 阅读

相关 Vue实现Todo List

基于Vue实现的Todo List 实现效果完成功能代码传值解读实现效果 ![实现效果][20200618013705753.gi

以你之姓@/ 2021年09月11日 02:10/ 0 赞/ 296 阅读