学习记录——用vue写一个简单的todoList案例

最新推荐文章于 2023-08-10 10:19:27 发布

　　　SakuraZr

最新推荐文章于 2023-08-10 10:19:27 发布

阅读量411

点赞数 2

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/sakura_zr/article/details/115024004

版权

本文记录了使用Vue.js构建一个TodoList应用的过程，涉及Vue的基本用法、Bootstrap样式引入以及交互逻辑实现。通过创建index.html，引入Vue.js和Bootstrap样式，实现登录注册功能，并根据登录状态展示TodoList模块。TodoList模块包含增删查改功能，利用v-if、v-else进行条件渲染。

摘要由CSDN通过智能技术生成

ps：大概是在学习怎么用webpack搭建vue脚手架之前写的。
用了Bootstrap框架定义样式啥的

todoList案例

在这里插入图片描述
新建一个文件夹，然后在里面新建index.html
打开命令行工具执行 npm init -y
然后下载vue ：npm install vue -S
当前文件夹内会生成一个node_modules文件，找到里面的vue.js 路径如下：

去index.html里引入：

<script src="./node_modules/vue/dist/vue.js"></script>

然后去引入bootstrap插件里的css样式 Bootstrap官网：https://v3.bootcss.com/
点击起步：在这里插入图片描述

复制css链接：在这里插入图片描述
引入：

然后点击：在这里插入图片描述

回到body写内容：

<div id="app">
        <!-- 登录注册页面 -->
        <div class="login">
            <div>
                <input type="text" placeholder="用户名">
                <input type="text" placeholder