前言
最近在学习 VUE的相关知识,之前学习html和css3和原生js及jq库时感觉还挺轻松,但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router,vue-cli,webpack,npm等等都得接触到一些),太庞杂了,因此因为这一个月以来看的东西太多了脑壳有点儿懵,想了想先巩固一下VUE的基础再往后面进行,所以练习写了这个 发表评论功能 的小玩意儿。
(emmmmmmmm…以上废话可忽略)
实现功能
- 一个提交评论的表单区域(包括:评论人及评论内容,组件呈现)
- 评论列表显示的区域(vue实例展现)
- 使用localStorage存储数据使得刷新或关闭浏览器不影响评论数量
效果展示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<!-- 评论列表展示区域 -->
<div id="app-listcomments">
<publish @func="getlocalinfo"></publish>
<br>
<div class="container">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
{{ item.content }}
<span class="badge badge-secondary badge-pill">{{ item.user }}</span>
</li>
</ul>
</div>
</div>
<!-- 提交评论的表单组件 -->
<template id="publish">
<div>
<div class="card border-info">
<div class="card-header">评论系统</div>
<div class="card-body">
<div class="container">
<form>
<div class="form-group">
<label for="user">
评论人:
</label>
<input type="text" class="form-control" id="user" v-model="user">
</div>
<div class="form-group">
<label for="content">
评论内容:
</label>
<textarea id="content" class="form-control" v-model="content"></textarea>
</div>
<input type="button" value="发表评论" class="btn btn-primary" @click="getinfo">
</form>
</div>
</div>
</div>
</div>
</template>
<script>
//组件创建(使用局部组件方式)
var publish = {
data() {
return {
user: '',
content: ''
}
},
template: "#publish",
methods: {
getinfo() {//获得输入框的user及content数据并更新到评论列表
if (this.user == '' || this.content == '') { //判断输入框是否为空
alert("输入框请不要留空白")
} else {
var info = {
id: Math.random(),
user: this.user,
content: this.content
} //获取用户输入的数据存到info对象中
var list = JSON.parse(localStorage.getItem('cmts') || '[]') //获取localstrage中的数据,字符串类型需要转换为json对象
list.push(info)//将得到的info对象的添加到list
localStorage.setItem('cmts', JSON.stringify(list))//将更新好的数据重新添加到localstrage
this.user = this.content = '' //清空输入框
this.$emit('func')//更新页面的评论列表
}
}
},
}
//vue实例部分创建
var listcomment = new Vue({
el: "#app-listcomments",
data: {
list: [{
id: Math.random(),
user: "林宥嘉",
content: "多久了我都没变,爱你这回事整整六年"
},
{
id: Math.random(),
user: "华晨宇",
content: "看着飞舞的尘埃掉下来"
}
]
},
created() {
var localinfo = JSON.parse(localStorage.getItem('cmts') || '[]')
if (localinfo.length == 0) {
var list = this.list
localStorage.setItem('cmts', JSON.stringify(list))
}
this.getlocalinfo()
},
components: {
'publish': publish
},
methods: {
getlocalinfo() {
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
this.list = list
}
}
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
上例整体思路
1.利用bootstrap4创建出基本的页面内容(包括 发表评论区域(vue组件)及下方的评论列表(vue实例))
2.创建vue实例
3.vue实例中 先设置data区 中的list数组对象存储初始化的评论数据
4.再添加局部组件publish
5.vue实例中 再使用生命周期钩子函数created来将初始化的list数据存储到localstrage里
6.vue实例中 然后在方法methods中写一个函数getlocalinfo()来获取localstrage中的数据并显示到列表中
7.组件中使用v-model双向绑定数据得到 需要添加的user及content
8.组件的方法methods中实现将获取到的user及content数据取出放到localstrage中并同步更新页面上的评论列表
ps:加油,进步!