Vue实现留言板功能以及原生js实现留言板对比

先看效果：
在这里插入图片描述
原生js实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .box{
            width: 800px;
            margin: 120px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxs"></div>
        <input type="text" name="texts" id="texts"><button id="send">发送</button>
    </div>
    <script>
        var box = document.querySelector(".box");
        var boxs = document.querySelector(".boxs");
        var btn = document.querySelector("#send");
        var texts = document.querySelector("#texts");
        btn.addEventListener("click",clickHander);

        function clickHander(e){
            var p = document.createElement("p");
            var span = document.createElement("span");
            span.textContent = texts.value;
            p.appendChild(span);
            var change = document.createElement("button");
            change.textContent = "修改";
            change.className = "change";
            change.addEventListener("click",clickChange);
            var del = document.createElement("button");
            del.className = "del";
            del.addEventListener("click",clickChange);
            del.textContent = "删除"
            p.appendChild(change);
            p.appendChild(del);
            boxs.appendChild(p);
            texts.value = '';
        }

        function clickChange(e){
            if(e.target.className === "change"){
                var span =  e.target.parentElement.firstElementChild;
                var value = prompt("当前留言为："+span.textContent) || span.textContent;
                span.textContent =  value;
            }else if(e.target.className === "del"){
                e.target.parentElement.remove();
                document.firstElementChild
            }
        }
    </script>
</body>
</html>

先写一个输入框，以及一个发送按钮，当点击发送的时候，创建元素，填充用户输入内容以及添加修改和删除按钮。再给修改和删除按钮添加点击事件，用于操作Dom元素，思路比较简单，但是操作比较复杂。

Vue实现留言板效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #box{
            width: 800px;
            margin: 120px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <div v-for="(item,index) in list">
            <p>
                {{item.title}}
                <button @click="change(item,index)">修改</button>
                <button @click="del(item,index)">删除</button>
            </p>
        </div>
        <p>
        	<input type="text" v-model="msgText" @keyup.enter="send(msgText)">
        	<button @click="send(msgText)">发送</button>
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                list: [{
                        title: "XXXXXXXXXXX",
                    },
                    {
                        title: "跟随大佬的脚步..."
                    },
                    {
                        title: "XXXXXXXXXXXXXX"
                    }
                ],
                msgText: '',
            },
            methods: {
                send(data) {
                    this.list.push({
                        title: data
                    })
                    this.msgText = ''
                },
                change(item, index) {
                    var value = prompt("当前留言为：" + item.title) || item.title;
                    this.list.splice(index, 1, {
                        title: value
                    })
                },
                del(item, index) {
                    this.list.splice(index, 1);
                }
            }
        })
    </script>
</body>
</html>

Vue的一个神奇的指令就是v-model，他能实现数据的双向绑定，当修改input里面的内容时，对应的标签里面的值也会发生改变，当修改对应标签里面的值时，对应的input的值也会发生改变。
上面操作中，使用了一些Vue的基本指令，v-for（用于循环数组和对象），v-model（用于绑定input的value值和标签内容），v-on（用于绑定操作事件）

虽然这些功能原生也能实现，但是代码量很大。框架不仅能方便我们的操作，还能提高我们的生产力，节省我们的时间，所以使用框架也是我们完成项目不错的选择

Vue实现留言板功能以及原生js实现留言板对比

猜你喜欢