This article has shared the specific code for commenting on the implementation of vue component for your reference. The specific content is as follows
Today I watched a video related to vue, so I followed a small demo to connect the knowledge. The content is very simple, but it is also a little improvement on the road of learning.
1 Idea Analysis
The post comment module writes a component to improve reusability.
Key points:
1) The child component passes the value to the parent component through localStorage
2) The child components have their own data storage user and content, that is, the commenter and comment content, that is, the data bound to the dom element.
3) After clicking 'Post Comment', first save each comment into localStorage, and then load the comment by calling loadComments() in the parent component in the bound function in the component.
4) Familiarity with vue life cycle. Write loadComments() in created(), and the comment data will be loaded every time the page loads.
2 Source Code
Need and two files
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../lib/"></script>
<link rel="stylesheet" href="../lib/">
<style>
li{
list-style:none;
}
</style>
</head>
<body>
<div >
<com @func="loadComments"></com>
<ul class="list-group">
<li class="list-group-item" v-for="item in list">
{{}}<span class="badge">{{}}</span>
</li>
</ul>
</div>
<!-- Comment section component -->
<template >
<div>
<div class="form-group"><label>Commenter</label><input class="form-control" v-model:value="user"/></div>
<div class="form-group"><label>Comment content</label><input class="form-control" v-model:value="content"/></div>
<div><input type="button" class="btn btn-primary" value="Leave a Comment" @click="postComments"/></div>
</div>
</template>
<script>
var tmp={
template:"#tmp",
data:function(){
return {
user:'',
content:''
}
},
methods:{
postComments(){
var comment={user:,content:};
var list=(('cmts')||'[]');
(comment);
('cmts',(list));//The process of converting array objects and strings to each other ='';
='';
this.$emit('func');
}
}
}
var vm=new Vue({
el:"#app",
data:{
list:[]
},
created(){
();
},
methods:{
loadComments(){
=(('cmts')||'[]');
}
},
components:{
'com':tmp
}
});
</script>
</body>
</html>The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.