关键词：
一、环境搭建
1.npm
大型应用时推荐用npm安装，npm能很好的和webpack等模块打包器配合使用。具体安装步骤请参考网上的诸多教程。完成后使用如下命令安装vue。
$ npm install vue
安装完成后，命令行运行命令 vue ，看到如下效果表示vue安装成功：
2.vue-cli
vue-cli是vue提供的一个官方命令行工具。可用于快速搭建大型的单页应用。
# 全局安装 vue-cli $ npm install --global vue-cli
二、项目搭建
安装完成之后我们就可以开始搭建我们的项目了。本次项目是基于webpack模板来构建的。参考下图：
这样我们就创建了一个项目。可以看到在todo文件夹下生成了如下文件：
接着使用npm install 安装项目所需的依赖。这个过程可能有点慢。推荐使用淘宝镜像。安装完成使用npm run dev。浏览器中可以看到如下图。说明我们的项目已经搭建完成。
二、todoList实现
1.首先介绍几个重要的文件
index.html：这是项目的入口html文件。
main.js：这是项目的入口js文件，在webpack.config.js可以看到。
main.js主要是初始化vue实例。"el"是将vue实例挂载到index.html中的id为app的元素上。“render”在这里是给绑定的节点渲染一个vue组件。
App.vue：这是我们的主组件。
2.现在开始项目的编写。这个例子很简单，适用于刚开始接触vue的人群。
在App.vue中代码如下：
<template>
<div id="app">
<todoList :list="lists"></todoList>
</div>
</template>
<script>
import todoList from "./component/todoList.vue";
export default{
name:"app",
data(){
return {
lists:[
{id:1,text:"吃饭"},
{id:2,text:"睡觉"},
{id:3,text:"打豆豆"}
]
}
},
components:{
"todoList":todoList
}
}
</script>
引入了一个新的组件todoList显示列表项。使用自定义属性list将父组件的值传递到子组件。
在todoList.vue中如下所示：
<template>
<div>
<ul>
<li v-for="listItem in list">{{listItem.text}}</li>
</ul>
</div>
</template>
<script>
export default{
name:"todoList",
props:{
list:{
type:Array
}
}
}
</script>
props用于接收从父组件传递过来的值，试用v-for循环显示列表项。页面显示：
这样一个简单的todoList就做完了。用到了vue的组件化，以及父子组件间的值传递。
————— 本文部分参考vue官方网站，如需转载请联系作者
尚硅谷vue系列教程学习笔记(代码片段)
...#xff1a;vue01目录尚硅谷Vue系列教程学习笔记（8）071-TodoList案例-初始化列表072-TodoList案例-添加数据073-TodoList案例-勾选动作实现074-TodoList案例-删除动作075-TodoList案例-底部统计功能实现076-TodoList案例-底部交互动作实现077-TodoLi... 查看详情
vue学习笔记のtodolist的实现
...vue有了初步的了解，通过数据直接影响视图。通过vue实现todolist任务来巩固相关知识点。Todolist需要实现的主要功能有：任务的添加，回车添加（v-model、v-on）、删除（v-on）、选定重编辑（@dblclick）及取消重编辑（按esc）、对已... 查看详情
尚硅谷vue系列教程学习笔记(代码片段)
...#xff09;081-组件自定义事件-解绑082-组件自定义事件-总结083-TodoList-自定义事件084-全局事件总线1085-全局事件总线2086-TodoList案例-使用事件总线087-消息订阅与发布088-TodoList案例-使用消息订阅和接收方法实现089-TodoList案例-编辑090-$nextT... 查看详情
vue2.0学习—todolist案例（五十九）(代码片段)
【Vue2.0学习】—Todolist案例（五十九）组件化编码流程1、实现静态组件：抽取组件，使用组件实现静态效果2、展示动态数据：数据的类型、名称是什么数据保存在哪个组件3、交互—从绑定事件监听开始废话不... 查看详情
vue学习笔记——制作一个todolist
列表渲染v-for指令根据一组数组的选项列表进行渲染语法：value,keyinitems | value,keyofitems变异方法vue提供一组方法，对数组进行操作的时候，会触发视图更新。push() pop() shift() unshift() splice() sort() reverse(... 查看详情
vue3.0实现todolist-实现todolist每个组件需要用到的方法
参考文档参考视频：https://www.imooc.com/learn/1300官方文档查看文档：https://v3.cn.vuejs.org/NavHrader中绑定键盘事件<div><inputplaceholder="请输入任务名称"v-model="value"@keydown.enter="enter"/></div>在set 查看详情
vue3.0实现todolist-实现todolist每个组件需要的数据
参考文档参考视频：https://www.imooc.com/learn/1300官方文档查看文档：https://v3.cn.vuejs.org/Home<template><div><nav-header></nav-header><nav-main></nav-main><nav-footer&g 查看详情
vue学习笔记の实现select组件
通过腾讯训练营这几天的学习，初步实现了自定义的选择下拉框组件，其中，可以把下拉选项抽离出来作为子组件，整个组件为父组件，其主要由<div>、<input>、<custom-select>、<ul>、<li>等标签构... 查看详情
vue第四天学习笔记之组件化高级(代码片段)
...访问-父访问子-children-refs1.4组件访问-子访问父-parent-root2.组件化高级2.1slot-插槽的基本使用2.2slot-具名插槽的使用2.3什么是编译的作用域2.4作用于插槽的案例3.前端模块化3.1CommonJS3.2ES6的模块化实现1.父子组件通信 查看详情
vue学习笔记入门篇——组件的内容分发(slot)
本文为转载，原文：Vue学习笔记入门篇——组件的内容分发(slot)介绍为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发(或“transclusion”如果你熟悉Angular)。Vue.js实现了一... 查看详情
基于vue的todolist案例(代码片段)
前言：todolist案例真的算是经典了，不管你是学习原生js，还是学习jq，还是学习vue，亦或者是react，todolist是练习必不可少的练习demo了，下面我们来看看这个案例。需要完整代码的小朋友戳这里获取资... 查看详情
使用vue父子组件通信实现todolist的功能示例代码
...="handleClick">submit</button></div><ul><todolistv-for="(item,index)oflist":key="index":content="item":index="index"@delete="handle"></todolist></ul></div><script>Vue.component("todoli... 查看详情
vue初体验——用vue实现简易版todolist
...部分，想练一下手熟悉一下基本用法，做了一个简易版的TodoList 效果： 代码：HTML：1<!DOCTYPEhtml>2<html>34<head>5<title>TodoList</title>6<metacharset="utf-8">7&l 查看详情
vue学习笔记入门篇——组件的使用
本文为转载，原文：Vue学习笔记入门篇——组件的使用组件定义组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情... 查看详情
vue框架制作todolist
...步学习了vue之后，我们可以使用vue的基础知识来实现一个todolist列表，主要功能是通过一个输入框来输入，然后将输入的内容同步的显示在页面上，当点击其中的一项时，出现一条下划线。首先列出在实现功能的过程中需要使用... 查看详情
vue学习笔记
组件：分三步创建组件：varmyComponent=Vue.extend({template:‘<div>Thisismyfirstcomponent</div>‘});注册组件：Vue.component(‘firstcomponent‘,firstcomponent);使用组件<firstcomponent></firstcomponent>学到 查看详情
##vue学习笔记--简单父子组件--
##vue学习笔记###组件之间的通讯1.父组件到子组件```js//father<div><sonmsg="父组件的信息写在这"></son><sontitle="title"></son><!--:title--></div><script>exportdefault{data(){return{t 查看详情
vue学习笔记vue单组件(代码片段)
本文是阅读1所做的笔记。组件的生命周期vue3组件的生命周期写法称为CompositionAPI（组合式API）。vue3组件的生命周期的函数统一放在setup里运行：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onErro... 查看详情