Vue.js前端开发基础及项目化应用（微课版）最新章节_古凌岚著

应用实践

项目1
历史名城简介页面

本项目通过“历史名城简介页面”任务，让学习者初步体验Vue应用程序的构建、运行和调试过程。

1. 需求描述

历史名城游网站需要制作一个HTML页面，用于介绍某个历史名城的基本情况。页面内容包括标题、介绍文字、点赞按钮和点赞数。

最终效果如图1-14所示。

图1-14　项目1最终效果

2. 实现思路

（1）使用VS Code创建一个HTML程序，引入Vue库文件，并编写相应的HTML、CSS和JavaScript代码。

（2）使用Chrome浏览器运行该程序，并通过调试工具查看相关信息。

任务1-1 构建Vue应用程序

（1）使用VS Code工具创建1-1.html文件，采用CDN方式导入Vue库文件：

<script src="https://unpkg.com/vue@next"></script>

（2）编写HTML和CSS代码。

//HTML代码
　　<body>
　　　<div id="app" class="shangxi">
　　　　<div class="wrap">
　　　　　<div class="shangxibody">
　　　　　　<h3>{{cityTitle}}</h3>
　　　　　　<p>{{cityInfo}}</p>
　　　　　　　　<button v-on:click="clickButton" class="cBtn">喜欢我就为我点赞吧
　　　　　　　　</button><span>点赞数：{{count}}</span>
　　　　　　<div class="clear"></div>
　　　　　</div>
　　　　</div>
　　　</div>
　　</body>
　　//CSS代码
　　<style>
　　　　　* {
　　　　　　　margin: 0;
　　padding: 0;
}
　　.clear {
　　　　clear: both;
　　}
　　.wrap {
　　　　width: 800px;
　　　　margin: 0 auto;
　　}
　　.shangxi{
　　　　width: 100%;
　　　　margin: 20px auto;
　　　　padding: 20px 0;
　　}
　　.shangxibody {
　　　　width: 796px;
　　　　margin: 20px 0;
　　　　padding: 20px 0 20px 20px;
　　　　box-shadow: 0 0 3px #6a3b3b;
 　}
　　.cBtn{
　　　　width: 200px;
　　　　height:30px;
　　　　line-height:30px;
　　}
　　p{
　　　　padding: 20px;
　　}
</style>

（3）编写JavaScript代码。

<script>
　　　　　　const RootComp = {//创建根组件
　　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　count:0,
　　　　　　　　　cityName:"洛阳",
　　　　　　　　　cityTitle:'洛阳简介',
　　　　　　　　　cityInfo:"洛阳市有5000多年文明史、4000多年城市史、1500多年建都史。
　　洛阳是华夏文明的发祥地之一、丝绸之路的东方起点，隋唐大运河的中心。历史上先后有13个王朝在洛阳建都。"
　　　　　　　}
　　　　　　},
　　　　　　methods:{
　　　　　　　clickButton(){
　　　　　　　　this.count=this.count+1;
　　　　　　　}
　　　　　　}
　　　　　}
　　　　　const appObj = Vue.createApp(RootComp)//创建一个Vue应用
　　　　　appObj.mount("#app") 
　　</script>

（4）代码分析：HTML代码中{{cityTitle}}、{{cityInfo}}、{{count}}执行结果为cityTitle、cityInfo和count的值，而这3个变量值均由JavaScript代码定义和控制，也就是说，如果数据改变，JavaScript代码会带动HTML页面内容同步更新；另外，JavaScript代码中对“喜欢我就为我点赞吧”按钮定义了一个单击（click）事件处理函数clickButton，每当单击该按钮时，clickButton对count变量进行加1操作，使得页面上显示的点赞数不断增加。

任务1-2 运行并调试Vue应用程序

（1）运行程序

我们可直接使用浏览器打开该程序。如果VS Code已安装open in browser插件，也可以在代码编辑器中单击鼠标右键，在弹出的快捷菜单中的“Open In Other Browsers”选项的子菜单中选择Chrome浏览器来运行程序，如图1-15所示。

图1-15　选择指定浏览器运行程序

（2）调试程序

利用Vue Devtools模拟JavaScript修改数据的操作，检验页面是否会同步更新。打开Vue Devtools调试界面，选中<Root>标签，在右下方的数据项中将cityTitle修改为“西安简介”时，页面的标题也随之发生了变化，如图1-16所示。