vue 基础入门笔记 14:发表评论 demo
0 / 0 / 创建于 5年前 /
September 的个人博客
vue 基础入门笔记 14
<!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="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!-- 传递的方法名不要是驼峰命名，这是个坑 ，找了好久没找到原因 -->
<!-- 定义了两个组件，一个是发表组件，一个是评论列表组件 -->
<submit @func='addMessage'></submit>
<list2 :list='list'></list2>
</div>
<template id="list">
<div class="list-group">
<a v-for="item in list" href="#" class="list-group-item active">
<h4 class="list-group-item-heading">{{item.name | addS}}</h4>
<p class="list-group-item-text">{{item.content}}</p>
</a>
</div>
</template>
<template id="submit">
<form action="" method="POST" role="form">
<legend>发表评论</legend>
<div class="form-group">
<label>用户名</label>
<input v-model="name" type="text" class="form-control" id="" placeholder="输入用户名">
<label>评论框</label>
<textarea v-model="content" class="form-control" id="" placeholder="输入内容"></textarea>
</div>
<button @click.prevent='addMessage' type="submit" class="btn btn-primary">提交</button>
</form>
</template>
<script>
//添加过滤器 增加：
// Vue.filter('addS', function (msg) {
// return msg + ":"
// })
var vm = new Vue({
el: '#app',
data: {
name: '',
content: '',
list: [{
'name': '勒布朗',
'content': '谁来湖人呀'
}],
},
methods: {
addMessage(name, content) {
console.log(name, content, "父组件事件")
this.list.push({ 'name': name, 'content': content })
this.name = this.content = ''
//this.list = newlist
},
show(data) {
console.log("执行了事件A------" + data)
}
},
components: {
'list2': {
template: '#list',
props: ['list']
},
'submit': {
template: '#submit',
props: ['name', 'content'],
methods: {
// 添加评论方法
addMessage() {
console.log(this.name, this.content)
// 使用$emit调用func 传递 name,content
this.$emit('func', this.name, this.content)
},
},
}
}
});
Vue.config.devtools = true
</script>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号