vue.js学习笔记十三——组件的基本应用之发表评论

最新推荐文章于 2023-06-20 10:21:23 发布

武汉小喽啰

最新推荐文章于 2023-06-20 10:21:23 发布

阅读量233

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/94398526

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. 案例用到的知识点

1.1 在组件与父组件的传值

1.2 本地字符串localStorage的用法

1.3 vue的双向绑定与基本事件

1.4 vue的声明周期钩子函数的应用

1.5 组件模板的定义方式

2. 完整案例

<!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>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.css"></link>
    <style>
    	
    </style>
</head>
	<body>
		<div id="app">
			<!-- 描述：引用组件 
				这里需要将子组件的数据传到父组件中， 子组件通过事件调用向父组件传值
			-->
            <comments v-on:func="loadComments"></comments>
            
            <!-- 描述：评论列表 -->
             <ul class="list-group">
             	 <li class="list-group-item" v-for="item in list" >
             	 	<span class="badge">评论人：{{item.user}}</span>
             	 	{{item.content}}
             	 </li>
             </ul>
		</div>
		<!--
        	作者：zoudmbean@163.com
        	时间：2019-07-01
        	描述：定义组件模板
        -->
        <template id="comment">
        	<div>
        		<div class="form-group">
        			 <label>评论人：</label>
        			<input class="form-control" v-model="user"/>
        		</div>
        		<div class="form-group">
        			 <label>评论内容：</label>
        			<input class="form-control" v-model="content"/>
        		</div>
        		<div class="form-group">
        			<input class="btn btn-primary" type="button" value="发表评论" @click="postcomment"/>
        		</div>
        	</div>
        </template>
	</body>
	<script>
			// 定义发表评论组件模板对象
			var comments = {
				template:'#comment',
				data(){
					return {
						user:'',
						content:'',
					};
				},
				methods:{
					postcomment(){	// 发表评论的方法
						// 分析：发表评论的业务逻辑
          				// 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          				// 2. 先组织出一个最新的评论数据对象
          				// 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
          				//  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
          				//  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
          				//  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
          				//  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()
						var comment = { id: Date.now(), user: this.user, content: this.content };
						// 判断comment是否为空
						if(comment.user != "" || comment.content != ""){
							// 从 localStorage 中获取所有的评论
	          				var list = JSON.parse(localStorage.getItem('cmts') || '[]');
	          				list.unshift(comment);// 新添加的评论放在第一行
	          				// 重新保存最新的 评论数据
	          				localStorage.setItem('cmts', JSON.stringify(list));
	          				this.user = this.content = '';
	          				
	          				// 子组件通过emit调用父组件的方法
	          				this.$emit('func');
						}else{
							alert("请输入评论人与评论内容");
						}
						
					}
				}
			};
			// 创建Vue实例，得到viemodel
			var vm = new Vue({
				el:'#app' ,
				data:{
					list:[
//						{id:1001,user:'张三',content:'第一条评论'},
//						{id:1002,user:'李四',content:'第二条评论'},
//						{id:1003,user:'王五',content:'第三条评论'}
					]
				},
				components:{
					comments
				},
				beforeCreate(){ 
				// 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好
      			//localStorage.setItem("cmts",'')
				},
      			created(){
			        this.loadComments()
			    },
				methods:{
					loadComments() { // 从本地的 localStorage 中，加载评论列表
			          	var list = JSON.parse(localStorage.getItem('cmts') || '[]')
			          	this.list = list
			        }
				}
			});
		</script>
</html>

3. 案例思路

3.1 首先创建vm对象

3.1.1 data域定义列表展示数组list，并定义默认值

3.1.2 定义私有的组件模块components

3.1.3 定义函数模块methods

var vm = new Vue({
	el:'#app' ,
	data:{
			list:[
//						{id:1001,user:'张三',content:'第一条评论'},
//						{id:1002,user:'李四',content:'第二条评论'},
//						{id:1003,user:'王五',content:'第三条评论'}
					]
		},
	components:{
					
	}
	methods:{
					
	}
});

3.2 再创建组件模板对象comments

3.2.1 定义组件模板template，id为comment

        <template id="comment">
        	<div>
        		<div class="form-group">
        			 <label>评论人：</label>
        			<input class="form-control" v-model="user"/>
        		</div>
        		<div class="form-group">
        			 <label>评论内容：</label>
        			<input class="form-control" v-model="content"/>
        		</div>
        		<div class="form-group">
        			<input class="btn btn-primary" type="button" value="发表评论" @click="postcomment"/>
        		</div>
        	</div>
        </template>

3.2.2 定义组件模板对象comments

			var comments = {
				template:'#comment',
				data(){
					return {
						user:'',
						content:'',
					};
				},
				methods:{
					postcomment(){	// 发表评论的方法
						
						
					}
				}
			};

3.2.3 写发表评论函数业务逻辑

postcomment(){	// 发表评论的方法
    // 分析：发表评论的业务逻辑
    // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中          l        localStorage.setItem('cmts', '')
    // 2. 先组织出一个最新的评论数据对象
    // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
    //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
    //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
    //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
    //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用     localStorage.setItem()
var comment = { id: Date.now(), user: this.user, content: this.content };
    // 判断comment是否为空
    if(comment.user != "" || comment.content != ""){
	    // 从 localStorage 中获取所有的评论
	    var list = JSON.parse(localStorage.getItem('cmts') || '[]');
	    list.unshift(comment);// 新添加的评论放在第一行
	    // 重新保存最新的 评论数据
	    localStorage.setItem('cmts', JSON.stringify(list));
	    this.user = this.content = '';
	          				
	     // 子组件通过emit调用父组件的方法
	     this.$emit('func');
    }else{
	    alert("请输入评论人与评论内容");
    }
						
}

3.3 在App中定义评论列表

            <!-- 描述：评论列表 -->
             <ul class="list-group">
             	 <li class="list-group-item" v-for="item in list" >
             	 	<span class="badge">评论人：{{item.user}}</span>
             	 	{{item.content}}
             	 </li>
             </ul>

3.4 引入组件，并定义子组件的事件绑定机制

 <comments v-on:func="loadComments"></comments>

武汉小喽啰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习笔记十三——组件的基本应用之发表评论

1. 案例用到的知识点1.1 在组件与父组件的传值1.2 本地字符串localStorage的用法1.3 vue的双向绑定与基本事件1.4 vue的声明周期钩子函数的应用1.5 组件模板的定义方式2. 完整案例<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫