没有合适的资源?快使用搜索试试~ 我知道了~
看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋)。 一、使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件,方法: npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev 这样我们的一个基于webpack的vue项目目录就可以快速构建好了。 目录如下: 二、完成一个简单的todolist 接下来就看一下webpack.base.conf文件,这是核心文件,必须执行的文件,这里可以看到entry和o
资源推荐
资源详情
资源评论
使用使用Vue完成一个简单的完成一个简单的todolist的方法的方法
看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋)。
一、使用一、使用vue-cli脚手架快速搭建一个框架脚手架快速搭建一个框架
利用vue-cli来自动生成我们项目的前端目录及文件,方法:
npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
这样我们的一个基于webpack的vue项目目录就可以快速构建好了。
目录如下:
二、完成一个简单的二、完成一个简单的todolist
接下来就看一下webpack.base.conf文件,这是核心文件,必须执行的文件,这里可以看到entry和output,这就是入口和输出
路径,在入口处看到了./src/main.js,这就找到了界面的入口处了。在main.js中可以看到创建了一个vue实例,并加载了模板
组件App.vue,所以我们的todo list代码就可以写在App.vue中。
简单的简单的todolist我们可以完成这几个功能:我们可以完成这几个功能:
1、显示todo列表
2、判断列表任务完成状态,若完成则添加相应的样式
3、在输入框中动态添加todo项目,点击回车在列表中显示
4、点击相应的项目转换状态
首先我们完成显示列表的功能:
<template>
<div id="app">
<input/>
<ul>
<li v-for="item in items">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
资源评论
weixin_38638309
- 粉丝: 3
- 资源: 943
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功