当前位置: 首页 > news >正文

前端实验(一)单页面应用的创建

实验目的

  • 掌握使用vite创建vue3单页面程序命令
  • 熟悉所创建程序的组织结构
  • 熟悉单页面程序运行原理
  • 能够编写简单的单页面程序

实验内容

  • 创建一个名为vue-demo的单页面程序
  • 编写简单的单页面程序页面
  • 运行单页面程序

实验步骤

  1. 使用vite创建单页面程序
    创建项目名为目录vue-demo的目录(注意:项目的路径名不要出现中文),以管理身份打开命令命令行窗口。
    在命令行窗口,执行创建命令:npm init vite@latest,按照提示输入项目名称、选择vue和脚本语言,出现下图界面代表项目创建成功。
    在这里插入图片描述
    在命令行窗口,执行cd 项目名称,npm install 和npm run dev 运行程序,就可以看到vite创建的工程项目运行如下图所示。
    在这里插入图片描述

  2. 分析项目结构
    进入工程目录后,vite自动生成项目的结构及说明如下图所示。
    在这里插入图片描述
    其中,src目录用于存放源代码,是开发人员主要工作目录。
    在src目录中有assets、components两个文件夹,assets目录用于存放全局使用的样式、图片等文件,如:logo、js,css,img,fonts等;components目录用于存放全局使用的组件。
    在src目录中还包括app.vue和main.js两个文件。其中app.vue是项目的根组件,相当于网站的首页,该组件的实例将挂载到index.html页面中,在根组件中使用路由完成页面的展示与跳转,其代码结构如下所示

<template>  <div id="app">  <img src="./assets/logo.png">  <router-view />  </div>  
</template>  <script>  export default {  name: 'App'  }  
</script>

代码中1-6行是使用模板标签和vue模板语言完成的视图文件,第4行是前端路由标签;8-12行是JavaScript代码块,默认导出根组件app对象。
Main.js文件是应用入口函数,类似c语言的main函数,主要任务是引入全局使用的插件、组件、模块库、样式等,将根组件挂载到页面的某一个dom结点上。在项目启动时,首先加载此文件,创建根组件实例,其代码如下所示。

//引入组件或js插件或文件
import { createApp } from 'vue'    //引入createApp函数,用于创建vue实例
import App from './App'    //引入根结点组件,定义其名称为“App”
import router from './router'  //引入路由
import { createPinia } from 'pinia'  //引入状态管理组件函数const app = createApp(App)  //创建vue实例/* app.use(组件)语句,在此定义后,可以在这个vue项目任意地方使用该组件*/
app.use(router)
app.use(createPinia())
app.mount('#app')

在index.html中有一个id为app的div元素,这个div就是vue根组件的挂载点。一般情况下,除在这里修改页面的标题外,很少在这里面编写代码。

  1. 编写简单的单页面应用程序
    在新建的项目中,编写一个vue的欢迎页面。打开app.vue文件,在此文件中编写欢迎信息,示例代码如下所示。
<template>   //模板语言<div id="app">  <h1>{{msg}}</h1>  </div>  
</template>  <script>  export default {  name: 'helloWorld',  data() {  return {     //vue组件中的数据msg: '欢迎学习vue单页面开发'  }  }  }  
</script>  <style scoped="scoped">   //定义该组件的样式#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -Webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;  }  
</style>  

代码中第1-5行是视图层代码,展示人机交互界面,第3行使用模板语言将data中的数据渲染到模板中;第7-16行是视图模型层部分,处理相关业务逻辑。第18-27行是样式部分内容。输入命令:npm run dev运行程序,运行结果如下图所示。
在这里插入图片描述

  1. 程序进阶
    通常app.vue是单页面程序中的根组件,职责是与外壳页面建立联系和页面导航,不承担具体的业务功能,业务功能通常写在子组件中。编写一个名为HelloWorld的组件,它是App.vue的子组件,根据输入的姓名,展示“欢迎学习vue,winkle”,代码如下所示
<template>  <div>  <h1>{{ msg }},{{userName.toUpperCase()}}!</h1>  <label>姓名:<input type="text" v-model="userName" placeholder="请输入用户姓名" /></label>  </div>  
</template>  <script>  
export default {  name: 'HelloWorld',  data () {  return {  msg: '欢迎学习Vue',  userName: 'winkle'  }  }  
}  
</script>  <style scoped>  h1{  font-weight: normal;  }  
</style>

修改app.vue文件中模板文件,引入组件HelloWorld,代码如下所示。

<template>  <div id="app">  <hello-world></hello-world>  </div>  
</template>     
<script>
import HelloWorld from '@/view/helloWorld'   export default {  name: 'App',components: {  HelloWorld: HelloWorld  } 
}
</script>

打开命令行窗口,进入项目所在的目录,输入npm run dev,进入编译状态,编译完成后显示应用输出地址,如图6-8所示:
在这里插入图片描述
复制终端输出的路径在浏览器打开,即可查看运行的Web程序。运行结果如下图所示
在这里插入图片描述
Vue是通过构造vue实例方式渲染成浏览器可识别html页面,渲染方式还是使用视图模板引擎,其工作原理与在网页中使用vue工作原理是相同的。
单页面应用入口处使用接口函数createApp(app)创建vue的实例对象,函数中参数app就是项目的根组件,其他vue文件均作为该根组件的子组件,通过模块引入使用完成调用,最终形成一棵组件树。
每个组件可以看成一个页面片段,运行在外壳页面内部,所谓的页面跳转实际是页面片段跳转,是把一个页面片段删除或者隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有离开壳页面。

相关文章:

前端实验(一)单页面应用的创建

实验目的 掌握使用vite创建vue3单页面程序命令熟悉所创建程序的组织结构熟悉单页面程序运行原理能够编写简单的单页面程序 实验内容 创建一个名为vue-demo的单页面程序编写简单的单页面程序页面运行单页面程序 实验步骤 使用vite创建单页面程序 创建项目名为目录vue-demo的…...

数字人小灿:始于火山语音,发于 B 端百业

火爆的数字人市场又有新消息来袭&#xff1a;火山语音的数字人小灿来了&#xff01; 数字人小灿首曝视频 今年以来&#xff0c;在生成式AI浪潮的助推下&#xff0c;大量企业争相布局数字人赛道。市场之所以如此火热&#xff0c;是因为AI数字人已被视为人工智能时代智能交互的入…...

蓝桥杯刷题

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; &#x1f449;&#x1f3fb;最大降雨量 原题链接&#xff1…...

Go Metrics SDK Tag 校验性能优化实践

背景 Metrics SDK 是与字节内场时序数据库 ByteTSD 配套的用户指标打点 SDK&#xff0c;在字节内数十万服务中集成&#xff0c;应用广泛&#xff0c;因此 SDK 的性能优化是个重要和持续性的话题。本文主要以 Go Metrics SDK 为例&#xff0c;讲述对打点 API 的 hot-path 优化的…...

二叉树问题——前/中/后/层遍历问题(递归与栈)

摘要 博文主要介绍二叉树的前/中/后/层遍历(递归与栈)方法 一、前/中/后/层遍历问题 144. 二叉树的前序遍历 145. 二叉树的后序遍历 94. 二叉树的中序遍历 102. 二叉树的层序遍历 103. 二叉树的锯齿形层序遍历 二、二叉树遍历递归解析 // 前序遍历递归LC144_二叉树的前…...

Vue3问题:如何实现级联菜单的数据懒加载?

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约3100字&#xff0c;整篇阅读大约需要5分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …...

STM32-电源管理(实现低功耗)

电源管理 STM32 HAL库对电源管理提供了完善的函数和命令。 工作模式&#xff08;高功耗->低功耗&#xff09;&#xff1a;运行、睡眠、停止、待机。 若备份域电源正常供电&#xff0c;备份域内的RTC都可以正常运行&#xff0c;备份域内的寄存器的数据会被保存&#xff0c;不…...

vue 自己捣鼓周日程日历组件

需求:想要一个周日程表,记录每天的计划,点击可查看详情。可自定义时间段通过后台获取时间段显示 分析: 通过需求,超级课程表app这款软件其中课表和这个需求很像,只不过这个需求第一列的时间段是自定义的,不是上午下午两个,但是原理都差不多 原本想找一些第三方插件使…...

【力扣】2127. (分类讨论 + 拓扑排序)参加会议的最多员工数

【力扣】2127. &#xff08;分类讨论 拓扑排序&#xff09;参加会议的最多员工数 文章目录 【力扣】2127. &#xff08;分类讨论 拓扑排序&#xff09;参加会议的最多员工数1. 题目介绍2. 思路&#xff08;**分类讨论 拓扑排序**&#xff09;3. 解题代码4. Danger参考 1. 题…...

Flutter——最详细(Map)使用教程

Map简介 键值对的集合&#xff0c;您可以使用其关联的键从中检索值。 普通的 HashMap是无序的&#xff08;不保证顺序&#xff09;&#xff0c;LinkedHashMap 按键插入顺序迭代&#xff0c;而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1&#xff0c;添加元素 addEntri…...

vue的入门第一课

Vue.js是一款流行的JavaScript框架&#xff0c;用于构建交互式Web应用程序。本文将详细介绍Vue.js的基础知识&#xff0c;包括Vue.js的历史、设计模式、构造函数参数、el、data、computed、method、watch以及差值的使用。 Vue.js是什么&#xff1f; Vue.js是一款用于构建用户…...

已解决:conda找不到对应版本的cudnn如何解决?

1.解决方法 配置深度学习环境时&#xff0c;打算安装cudatoolkit11.2和cudnn8.1&#xff0c;当使用conda install cudnn8.0时&#xff0c;却搜索不到这个版本的包&#xff0c;解决方法如下&#xff1a; conda search cudnn -c conda-forge然后就可以使用如下命令进行安装对应…...

大语言模型的学习路线和开源模型的学习材料《二》

第三层 LLMs to Artifact 第一重 langchain 【LLMs 入门实战 —— 十二 】基于 本地知识库 的高效 🤖langchain-ChatGLM 介绍:langchain-ChatGLM是一个基于本地知识的问答机器人,使用者可以自由配置本地知识,用户问题的答案也是基于本地知识生成的。【LLMs 入门实战 ——…...

Flask-SQLAlchemy事件钩子介绍

一、前言 前几天在搜资料的时候无意中看到有介绍SQLAlchemy触发器&#xff0c;当时感觉挺奇怪的&#xff0c;触发器不是数据库层面的概念吗&#xff0c;怎么flask-SQLAlchemy这个ORM框架会有这玩意。 二、SQLAlchemy触发器一个简单例子 考虑到效率博客表中有两个字段&#xf…...

C++——list

目录 list介绍 list的函数接口 构造函数 push_front和pop_front push_back和pop_back insert erase 迭代器 front和back size resize empty clear list::sort unique reverse 迭代器的实现 list介绍 list是一种可以在常数范围内在任意位置进行插入和删除的序列…...

【Linux】第九站:make和makefile

文章目录 一、 Linux项目自动化构建工具make/Makefile1.make/makefile工作现象2.依赖关系与依赖方法3.如何清理4.为什么这里我们需要带上clean5.连续的make6.特殊符号 二、Linux下实现一个简单的进度条1.回车换行2.缓冲区3.倒计时的实现 一、 Linux项目自动化构建工具make/Make…...

一文了解什么是WebSocket

WebSocket 允许我们创建“实时”应用程序&#xff0c;与传统 API 协议相比&#xff0c;该应用程序速度更快且开销更少。​ 一、WebSocket 是如何工作的 按照传统的定义&#xff0c;WebSocket是一种双工协议&#xff0c;主要用于客户端-服务器通信通道。它本质上是双向的&…...

redis是什么

redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。和Memcached类似。redis支持存储的value类型相对更多&#xff0c;包括string(字符串)、list(链表)、set(集合)和zset(有序集合)。 一、 基本…...

基于深度学习的人脸专注度检测计算系统 - opencv python cnn 计算机竞赛

文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的人脸专注度…...

跨境电商的新引擎:崛起的网红经济

随着全球数字化时代的崛起&#xff0c;跨境电商成为了国际贸易的新引擎&#xff0c;而在这个巨大的变革浪潮中&#xff0c;网红经济正在崭露头角&#xff0c;成为这一引擎的有力推动者。在这篇文章中&#xff0c;我们将深入探讨网红经济如何催生跨境电商的新动力&#xff0c;以…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...