前面给大家介绍了Vue的组件功能,本文我们通过一个评论列表的案例来巩固下组件的内容,具体效果如下:
我们先来整理下基础的页面如下:
<!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">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
在基础页面的基础上我们来添加 底部的 评论列表,用bootstrap来实现。如下
<!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">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<ul class="list-group">
<!--循环取出列表数据-->
<li class="list-group-item" v-for="(item ,i) in list" :key="item.id">
<span class="badge">{{item.name}}</span>
{{item.content}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
list: [
{id: Date.now(),name:"波波烤鸭1",content:"非常棒..."},
{id: Date.now(),name:"波波烤鸭2",content:"非常棒..."},
{id: Date.now(),name:"波波烤鸭3",content:"非常棒..."}
]
},
methods: {}
})
</script>
</body>
</html>
现在我们通过Vue的组件来添加 评论的头部,
组件使用
效果
组件添加好后,我们通过点击 发表评论 来添加内容到 评论列表中。实现的逻辑是
效果
添加的效果是实现了,但是在 第一次刷新的时候显示的还是 固定的数据,这时我们可以 在Vue实例的生命周期的方法的 created 中再显示的调用一次 加载数据的方法
这样开始加载的就是 localStorage中的数据了。搞定~