2021-6-29 SDU暑期项目实训日志报告01

最新推荐文章于 2022-10-24 14:19:58 发布

原创最新推荐文章于 2022-10-24 14:19:58 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文记录了作者在两天内从零开始学习Vue.js的过程，包括安装HBuilderX、配置Vue开发环境、创建首个Vue项目及学习Vue基本语法等内容。

学习目标：

本篇日志记录我6-28及6-29两天的学习工作。
目标大致如下：

下载安装前端开发平台HBuilderX并搭建Vue开发环境，尝试创建第一个Vue项目。
学习Vue基本标签及语法，尝试使用Vue写前端网页。

学习内容：

（一）安装HbuilderX
前往官网：HBuilderX安装地址
如图所示单击如下按钮进行安装
在这里插入图片描述
（二）搭建Vue环境，创建第一个Vue项目
安装后，参考如下链接配置Vue环境HbuilderX开发vue项目
按照上面的指导我完成了我的电脑上环境的配置：

并创建了我的第一个Vue项目：

进入项目所在的文件夹，在命令行界面运行该项目
在这里插入图片描述

也可以在HBuilderX中直接运行

在这里插入图片描述

（三）学习Vue基本标签和语法
参考Vue官网提供的教学视频，完成了对Vue基础部分的学习Vue官网
我创建了另一个Vue项目，并尝试在这其中进行学习

我按照视频指导学习了如下内容

因为我在学习过程中反复更改index.html中部分代码，没有保留下来学习过程中的全部代码，下面只展示部分代码及运行成果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm = new Vue(
			{el: '#app',
			data: {msg:'test'},
			beforeCreate:function(){
				console.log('beforeCreate');
				},
			created:function(){
				console.log('created');
			},
			beforeMount:function(){
				console.log('beforemount');
			},
			mounted:function(){
				console.log('mounted');
			},
			beforeUpdate:function(){
				console.log('beforeUpdate');
			},
			updated:function(){
				console.log('updated');
			}
			});
			setTimeout(function(){vm.msg='changed...';},3000);
			
		</script>
		
	</body>
</html>

在这里插入图片描述
这部分是我学习Vue实例的生命周期用到的代码，Vue实例完整生命周期如下：

学习过程记录：

这两天是实训的头两天，我的学习热情很高，我所参与的项目是“
可视化在线选座微信小程序”，我负责PC管理员端这部分，老师要求我们使用Vue.js框架来搭建一个可视化的前端界面，分工后大家便各忙各的开始了第一周的学习，这两天主要是学习新技术，在与老师和团队成员互帮互助中我成功完成了环境搭建与项目创建，充实又愉悦。
6-28上午：项目介绍与体验小程序开发工具的使用
6-28下午：团队人员分工与Vue环境搭建
6-29上午：学习Vue基础语法
6-29下午：老师开会并继续学习Vue语法