先看效果:
原生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(用于绑定操作事件)
虽然这些功能原生也能实现,但是代码量很大。框架不仅能方便我们的操作,还能提高我们的生产力,节省我们的时间,所以使用框架也是我们完成项目不错的选择