案例笔记 : 一个简单的Vue评论框组件

在写完案例 : 一个基于Vue.js的简单信息管理页后,小哥又初步学习了Vue.js组件的定义及基本用法,来为此再写一个小总结案例吧~ 这是一个简单的评论框组件 : 发表评论(将其存储到Local Storage)~ 该程序其它版本见 : https://github.com/YUbuntu0109/vue-learning

(simple component for comment v1.0/comment-component-1.0.html)程序如下所示 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../resources/vue.js"></script>
		<link rel="stylesheet" href="../../resources/bootstrap.css" />
		<title>the comment component v.10</title>
	</head>
	<body>
		<div id="app">
			<!-- use the comment component -->
			<comm-component @fun-init="initComments" @fun-clear="clearLocalStorage"></comm-component>
			<!-- comments -->
			<ul class="list-group">
				<li class="list-group-item" v-for="comment in comments" :key="comment.id">
					<span class="badge">commenter : {{comment.commenter}}</span>
					contents : {{comment.content}}
				</li>
			</ul>
		</div>
		<!-- the template of the component -->
		<template id="commTemplate">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">A SIMPLE COMMENT COMPONENT FOR VUE</h3>
				</div>
				<div class="panel-body form-inline">
					<div class="form-group">
						<label class="label label-default" style="font-size: 17px;">commenter</label>
						<input type="text" class="form-control" style="width: 180px;" v-model="commenter" v-focus v-color="'#777'" />
					</div>
					<div class="form-group" style="padding-left: 15px;">
						<label class="label label-default" style="font-size: 17px;">content</label>
						<input type="text" class="form-control" style="width: 500px;" v-model="content" v-color="'#777'" @keyup.enter="commit" />
					</div>
					<label style="padding-left: 5px;">
						<button class="btn btn-success" @click="commit">COMMIT</button>
						<button class="btn btn-warning" style="margin-left: 10px;" @click="reset">RESET</button>
						<button class="btn btn-danger" style="margin-left: 10px;" @click="delAll">CLEAR STORAGE</button>
					</label>
				</div>
			</div>
		</template>

		<script>
			//declare the comment component
			var commComponent = {
				template: '#commTemplate',
				data() {
					return {
						commenter: '',
						content: ''
					}
				},
				methods: {
					commit() {
						var comment = {
							id: Date.now(),
							commenter: this.commenter,
							content: this.content
						}
						var commentList = JSON.parse(localStorage.getItem('cmts') || '[]') //get all of comments from the local storage
						commentList.unshift(comment)
						localStorage.setItem('cmts', JSON.stringify(commentList)) //save the new comment list
						this.$emit('fun-init')
						this.commenter = ''
						this.content = ''
					},
					reset() {
						this.commenter = ''
						this.content = ''
					},
					delAll() {
						this.$emit('fun-clear')
						this.$emit('fun-init')
					}
				}
			}

			//custom directive
			Vue.directive('focus', {
				inserted: function(el) {
					el.focus()
				}
			});
			Vue.directive('color', {
				bind: function(el, colorStr) {
					el.style.color = colorStr.value
				}
			});

			var vm = new Vue({
				el: '#app',
				data: {
					idStr: [],
					comments: [{
						id: '',
						commenter: '',
						content: ''
					}]
				},
				methods: {
					//initializes the list of comments on the page
					initComments() {
						var commentList = JSON.parse(localStorage.getItem('cmts') || '[]')
						this.comments = commentList
					},
					//delete all of comments from the local storage
					clearLocalStorage() {
						localStorage.clear()
					}
				},
				components: {
					commComponent
				},
				created() {
					this.initComments() //(reflush)reload comments
				}
			});
		</script>
	</body>
</html>

程序运行效果如下图所示 :