此案例主要实现点击发送留言的按钮，将我们的留言以及留言人的信息展示在留言板上，下面就是具体的步骤：
一 、搭建整个留言板页面结构
- 为了页面整体效果稍微好看一点，此案例运用
bootstrap框架对页面表单结构进行渲染 - 利用前面学过的
Vue组件将表单结构渲染出来
(指路忘记组件知识的同学—>组件的创建)
<div id="app">
<cmt-box></cmt-box>
<template id="temp1">
<div>
<div class="form-group">
<label for="">留言人</label>
<input type="text" name="" id="" class="form-control">
</div>
<div class="form-group">
<label for="">留言内容</label>
<input type="text" name="" id="" class="form-control">
</div>
<div class="form-group">
<input type="button" value="发送留言" class="btn btn-primary">
</div>
</div>
</template>
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
<script>
var mycon1={
template:'#tmp1'
}
new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
'cmt-box':mycon1
}
})
</script>
整个页面展示如下：
二 、将上面的一些假数据 (item1)删掉，利用v-for指令将数据遍历出来并显示在表单里
<div id="app">
<cmt-box></cmt-box>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.name">
<div class="pane panel-info">
<div class="panel-heading">
<h3 class="panel-title">{
{item.userName}}:{
{item.id}}</h3>
</div>
<div class="panel-body">
{
{item.content}}
<span class="label label-info pull-right">未读留言</span>
</div>
</div>
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[
{
id:new Date(),userName:'迪丽热巴',content:'三生三世枕上书'},
{
id:new Date(),userName:'郑秀晶',content:'继承者'},
{
id:new Date(),userName:'宋茜',content:'风起洛阳'},
]
},
methods:{
},
components:{
'cmt-box':mycon1
}
})
</script>
效果如下：
三 、 获取留言人信息和留言，并将其显示在表单中
- 在子组件中利用
v-model指令进行双向绑定，实现获取数据信息，并在子组件中加入相应的属性data - 给发送留言按钮绑定点击事件，实现发送内容的功能，同时在子组件中加入相应的属性
methods - 同时实现子组件向父组件传递方法，将数据信息传递给父组件中的
list中去
(忘记父子组件之间的如何通信的同学指路—>组件之间的通信)
<div id="app">
<cmt-box @func='refresh'></cmt-box>
</div>
<template id="temp1">
<div>
<div class="form-group">
<label for="">留言人</label>
<input type="text" name="" id="" class="form-control" v-model='msgSonData.userName'>
</div>
<div class="form-group">
<label for="">留言内容</label>
<input type="text" name="" id="" class="form-control" v-model='msgSonData.content'>
</div>
<div class="form-group">
<input type="button" value="发送留言" @click='postContent' class="btn btn-primary">
</div>
</div>
</template>
<script>
var mycon1={
template:'#temp1',
data(){
return{
msgSonData:{
userName:'',
content:'',
}
}
},
methods:{
postContent(){
// console.log(this.msgSonData.name);
this.$emit('func',this.msgSonData)
}
}
}
new Vue({
el:'#app',
data:{
newSonData:'',
list:[
{
id:new Date(),userName:'迪丽热巴',content:'三生三世枕上书'},
{
id:new Date(),userName:'郑秀晶',content:'继承者'},
{
id:new Date(),userName:'宋茜',content:'风起洛阳'},
]
},
methods:{
refresh(data){
// console.log(data);
this.newSonData=data;
this.newSonData['id'] = new Date();
this.list.push(this.newSonData);
}
},
components:{
'cmt-box':mycon1
}
})
</script>
效果如下：
当我们输入留言信息之后点击发送留言：
大功告成！！！
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<cmt-box @func='refresh'></cmt-box>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.name">
<div class="pane panel-info">
<div class="panel-heading">
<h3 class="panel-title">{
{item.userName}}:{
{item.id}}</h3>
</div>
<div class="panel-body">
{
{item.content}}
<span class="label label-info pull-right">未读留言</span>
</div>
</div>
</li>
</ul>
</div>
<template id="temp1">
<div>
<div class="form-group">
<label for="">留言人</label>
<input type="text" name="" id="" class="form-control" v-model='msgSonData.userName'>
</div>
<div class="form-group">
<label for="">留言内容</label>
<input type="text" name="" id="" class="form-control" v-model='msgSonData.content'>
</div>
<div class="form-group">
<input type="button" value="发送留言" @click='postContent' class="btn btn-primary">
</div>
</div>
</template>
<script>
var mycon1={
template:'#temp1',
data(){
return{
msgSonData:{
userName:'',
content:'',
}
}
},
methods:{
postContent(){
// console.log(this.msgSonData.name);
this.$emit('func',this.msgSonData)
}
}
}
new Vue({
el:'#app',
data:{
newSonData:'',
list:[
{
id:new Date(),userName:'迪丽热巴',content:'三生三世枕上书'},
{
id:new Date(),userName:'郑秀晶',content:'继承者'},
{
id:new Date(),userName:'宋茜',content:'风起洛阳'},
]
},
methods:{
refresh(data){
// console.log(data);
this.newSonData=data;
this.newSonData['id'] = new Date();
this.list.push(this.newSonData);
}
},
components:{
'cmt-box':mycon1
}
})
</script>
</body>
</html>