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

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="密码">
            </div>
            <div>
                <button>登录</button>
                <button>注册</button>
            </div>
        </div>

</div>

引入script标签 写逻辑获取登录注册的信息：

<script>
 let vue = new Vue({
        el: '#app',
        data: {
            username:'',//利用v-model来获取input里面的值
            password:'',//利用v-model来获取input里面的值
            userList:[],//将获取到的用户名和密码循环插入数组里
        }
    })
</script>

然后给注册添加点击事件，当点击注册的时候获取输入的信息并弹出注册成功：




然后给登录按钮添加点击事件，判断输入的用户和密码是否正确
如果正确就显示todoList页面




然后去写todoList模块，用v-if来判断
首先去data里加一个属性showTodoList:false 用来作判断是否显示todoList模块

回到body里利用bootstrap写todoList模块：
先去bootstrap网站点击全局样式查看：
点击右侧的表单复制代码

复制到body里，注意用一个大盒子包起来，将用不到的代码删掉，更改一下文字内容：

利用v-if和v-else判断，
如果showTodoList的值为true，提示登录成功，todoList显示，登录界面隐藏
如果showTodoList的值为false，提示登录失败，不显示todoList界面。
如下：


返回浏览器查看结果：

Button按钮，bootstrap网站的css样式里有按钮设置，复制代码即可：


可以正常显示todoList页面，继续完善下面的表格 利用bootstrap
回到bootstrap官网——全局css样式里找到表格 选择合适的样式复制代码

在table正常写内容即可：

方便观看我们先去data里的userList里写一些信息：


然后给上面的添加重置按钮添加点击事件
点击添加按钮，获取input里的值，并添加到下面表格中
点击重置按钮，input里的内容清空


回到浏览器查看效果。

给详情、编辑、删除三个按钮添加点击事件。
点击详情，弹出具体的信息。点击删除，删除当前信息
点击编辑，弹出一个对话框和输入框，原本的数据会渲染到输入框里。还有保存和取消按钮
点击详情：



点击删除：


点击编辑：首先要先排版布局，点击编辑时出现的对话框 在表格外面写

 <style>
        #app {
            position: relative;
        }

        .win {
            background-color: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wrapper {
            display: table-cell;
            width: 400px;
            height: 300px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;
        }

        .win-content {
            margin: 10px;
        }

        .win-content input {
            width: 200px;
            height: 35px;
        }

        .win-footer {
            position: absolute;
            bottom: 20px;
            right: 20px;
            text-align: right;
        }
    </style>

然后去methods里写点击事件：