Vue入门 ---- 简易留言板_vue 使用 v-on 指令来创建一个留言板-CSDN博客

本文为博主原创文章，未经许可，不得转载，侵权必究。

本文链接：https://blog.csdn.net/qq_39630587/article/details/79808964

本文介绍了一个结合Vue和Bootstrap实现的简单应用案例，通过实例演示了如何使用Vue进行数据绑定及列表渲染，并利用Bootstrap构建响应式的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##简述
初学vue，比Angular要简单易学一点，基本就是html代码+json。这是第一个小的例子，用到了vue的几个常用方法，其中v-for的$index稍微有点迷惑，也影响了完成的速度，网上说是vue2.0已经取消了这种用法，也不是很明白，跟着教程走的，后面的教程有讲解vue2.0的新特性，所以到后面完善吧。同时复习到了bootstrap的知识，之前知识稍微用过，现在才渐渐的明白这种css框架的内涵—赋class和角色role，bootstrap依赖于jQuery，所以库文件也要有jQuery的文件，而bootstrap.js主要提供各种组件，诸如模态框之类的。
注：不要弄混v-model和模态框的modal

##基本知识：
vue

v-model
v-for
v-on:xxx
v-show

bootstrap:

//class
.container（外部容器）
.fade（从上滑入）
.data-toggle和.data-target（处理模态框）
.text-muted（文本灰色）

//role
form
dialog
modal-dialog

##配置库文件

    <!-- 引入bootstrap.min.css -->
    <link rel="stylesheet" href="lib\bootstrap.min.css">
    <!-- 引入jquery -->
    <script src="lib\jquery-3.3.1.min.js"></script>
    <!-- 引入bootstrap.js -->
    <script src="lib\bootstrap.js"></script>
    <!-- 引入vue.js -->
    <script src="lib\vue.js"></script>

##Script

<script>
        window.onload = function() {
            new Vue({
                el: '#box',
                // 注意这里面的内容为json，不要出现"="
                data: {
                    myData: [],
                    username: '',
                    age: '',
                    nowIndex: -100,
                    deletemsg: '',
                },
                methods: {
                    add: function() {
                        this.myData.push({
                            name: this.username,
                            age: this.age,
                        });
                        this.username = '';
                        this.age = '';
                    },
                    deleteMsg: function(n) {
                        if (n == -1) {
                            this.myData = ''; 
                        };
                        this.myData.splice(n, 1);
                    }
                },
            })
        }
    </script>

两个方法：add()，添加数据；deleteMsg()，删除数据
##html

<body>
    <!-- 这里注意是class，container是控制全局居中在一个合适的位置 -->
    <div class="container" id="box">
        <form role="form">
            <!-- 将标签和控件放在一个.form-group的<div>中，是获得最佳的间距所必需的 -->
            <div class="form-group">
                <label for="username">用户名：</label>
                <!-- bootstrap向所有的文本元素input、textarea、select添加.form-control -->
                <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username">
            </div>
            <div class="form-group">
                <label for="age">年龄：</label>
                <input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age">
            </div>
            <div class="form-group">
                <!-- 这里注意是button，如果写submit每次都会刷新页面，数据一闪而过 -->
                <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </form>

        <hr>

        <!-- .table-bordered边框  .table-hover移入效果-->
        <table class="table table-bordered table-hover">
            <caption class="h3 text-info text-center">用户信息表</caption>
            <tr class="text-danger">
                <th class="text-center">序号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">年龄</th>
                <th class="text-center">操作</th>
            </tr>
            <!-- 此处注意vue2.0中不支持{{$index}} -->
            <tr class="text-center" v-for="(item, index) in myData">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index; deletemsg='确认删除吗？'"">删除</button>
                </td>
            </tr>
            <tr v-show="myData.length != 0">
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-1"; deletemsg='确认删除全部吗？'">全部删除</button>
                </td>
            </tr>
            <tr v-show="myData.length == 0">
                <td colspan="4" class="text-center text-muted">
                    <p>暂无数据...</p>
                </td>
            </tr>
        </table>

        <!-- 对话层，即模态框 -->
        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- button放下面会出现错位 -->
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">{{deletemsg}}</h4>
                    </div>
                    <hr>
                    <div class="modal-body text-right">
                        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                        <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

##效果
这里写图片描述