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

SpringBoot快速入门笔记（4）

news 2026/5/18 10:36:26

文章目录

一、Vue框架
- 1、前端环境准备
- 2、简介
- 3、快速开始
- 4、事件绑定
二、Vue组件化开发
- 1、NPM
- 2、Vue Cli
- 3、组件化开发
- 4、SayHello自定义组件
- 5、Movie自定义组件

一、Vue框架

1、前端环境准备

编码工具：VSCode
依赖管理：NPM
项目构建：VueCli

2、简介

Vue是一套用于构建用户界面的渐进式框架

3、快速开始

借助官方文档，打开VScode，新建demo.html

复制粘贴：

具体语法看不懂没关系，就是将message这个数据用{{ }}渲染出来，右键选择Open In Default Browser 在浏览器页面中打开😮
这里要安装插件：

正常运行如下：

4、事件绑定

实现按钮自增的监听器

我这里就按Vue3官网的写法改编的，注意导入createApp这里是const

const { createApp, ref } = Vue

<body><div id="app"><h1>Count的值为：{{count}}</h1><button v-on:click="addCount">方法1</button><button @click="count++">方法2</button></div><script>const { createApp, ref } = Vueconst bind = createApp({data:function(){return{count:0,}},methods:{addCount(){this.count += 1}}}).mount('#app')</script>
</body>

两种按钮都可以生效：

二、Vue组件化开发

1、NPM

NPM（Node Package Manager）是一个NodeJS包管理和分发工具

类似maven，需要下载NodeJS

2、Vue Cli

Vue官方提供的构建工具，通常称为脚手架

安装：npm install -g @vue/cli
cmd安装完上面的东西后，切换到你的代码路径，打开cmd（myDemo是项目名）

回车，由于是初学者，因此选择第三个手动选择：

安装完毕后，项目里面会多了这些东西：

可以在VSCode中打开查看：

运行测试案例可以点击上图中package.json中的调试按钮 的serve😮
也可以在终端中运行，输入npm run serve

正常运行会有两个链接，随便点击一个进去就行🤓
如果运行失败，可以重新打开VScode，选择以管理员身份打开 😨

Demo如下：

3、组件化开发

打开main.js可以看到三条代码
从vue导入createApp这个根组件，然后导入App组件，最后是将App挂载在app里
app在index.html中

Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用😀

组件的构成：
①后缀名是.vue
②每个组件包含3部分：template组件的模板结构，可以包含HTML标签和其他的组件、
script：组件的JS代码、style：组件的样式

4、SayHello自定义组件

我们可以将HelloWordl.vue组件删除，自己新建组件

如果自己嵌套多个组件或者新建多个组件出问题的，可以下载Vetur插件 😨

在sayHello.vue组件中随便写点东西：

如果刚刚删除了HelloWorld组件也没关系，清空显得直观些

5、Movie自定义组件

之前微信小程序玩过豆瓣评分的demo，这里我们可以简单模仿一下

Movie.vue组件：通过title，rating两个参数渲染，然后给按钮绑定了一个事件，对应下面的methods🤓

<template><h1>{{ title }}</h1><span>{{ rating }}</span><button @click="favor">点击三连</button>
</template>
<script>
export default{name:"Moive",props:["title","rating"],data:function(){return{}},methods:{favor(){alert("三连成功！")}}
}
</script>
<style></style>

App.vue组件：通过Movie自定义组件，利用列表循环v-for渲染电影相关参数，这里key随便给id🤓在data中我们假设有movies列表数据

<template><Movie v-for="movie in movies" key="movie.id" :title="movie.title":rating="movie.rating"></Movie>
</template>
<script>
import Movie from './components/Movie.vue'
export default {name: 'App',data:function(){return{movies:[{di:1,title:"小初生说大道理",rating:9.9},{di:2,title:"说的道莉",rating:9.8},{di:3,title:"啊米诺斯",rating:9.7},]}},components: {  Movie  }
}
</script>

运行结果如下：

SpringBoot快速入门笔记（4）

文章目录一、Vue框架1、前端环境准备2、简介3、快速开始4、事件绑定二、Vue组件化开发1、NPM2、Vue Cli3、组件化开发4、SayHello自定义组件5、Movie自定义组件一、Vue框架 1、前端环境准备编码工具：VSCode 依赖管理：NPM 项目构建：VueCl…...

编程日记 2024/4/9 20:01:57

GoPro相机使用的文件格式和频率

打开GoPro相机(以11为例)，里面是一个DCIM文件夹。 DCIM是digital camera in memory 的简写，即存照片的文件夹，常见于数码相机、手机存储卡中的文件夹名字。正常手机拍照和视频都是保存在此文件夹的。正常建议不用删，因为只要拍照…...

编程日记 2024/4/9 20:00:56

Redis Stack 安装部署

参考：Run Redis Stack on Docker | Redis Redis-stack 初体验_redis stack-CSDN博客【docker】运行redis_docker run redis-stack-server requirepass-CSDN博客 Redis Stack 是一组软件套件，它主要由三部分组成。一个是 Redis Stack Server&#x…...

编程日记 2024/4/9 19:59:55

【经典算法】LeetCode 5: 最长回文子串(Java/C/Python3实现含注释说明,Medium)

目录题目描述思路及实现方式一：动态规划法思路代码实现Java版本C语言版本Python3版本复杂度分析方式二：中心扩展法思路代码实现Java版本C语言版本Python3版本复杂度分析总结相似题目标签(题目类型)：回文串、动态规划题目描述给定一…...

编程日记 2024/4/9 19:58:54

39.Python从入门到精通—parseString 方法 Python 解析XML实例使用xml.dom解析xml

39.Python从入门到精通—parseString 方法 Python 解析XML实例使用xml.dom解析xml parseString 方法Python 解析XML实例使用xml.dom解析xml parseString 方法 parseString 方法是 Python 标准库中 xml.dom.minidom 模块中的一个函数，用于解析 XML 字符串并构建 DO…...

编程日记 2024/4/9 19:55:51

【蓝桥杯第九场小白赛】（部分）

最近写的零零散散的，感觉这两天遇到的题对于短时间提升意义已经不大了，还是做简单题保持手感吧哎盖印章 #include <iostream> using namespace std; using LLlong long; int main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);LL n,m…...

编程日记 2024/4/9 19:54:50

【Linux】Supervisor 基础

要在Linux上启动Supervisor，你可以按照以下步骤进行操作： 确保你已经安装了Supervisor。使用适合你的Linux发行版的包管理器进行安装。例如，对于Ubuntu，可以运行以下命令安装Supervisor： sudo apt-get update sudo apt…...

编程日记 2024/4/9 19:53:49

48 全连接卷积神经网络 FCN【动手学深度学习v2】

全连接卷积神经网络：神经网络处理语义分割问题的奠基性工作，目前已不太常用。了解一下全卷积网络模型最基本的设计。如下图所示，全卷积网络先使用卷积神经网络抽取图像特征，然后通过11卷积层将通道数变换为类别个数&#xff0…...

编程日记 2024/4/9 19:47:40

pytorch中的nn.MSELoss()均方误差损失函数

一、nn.MSELoss()是PyTorch中的一个损失函数，用于计算均方误差损失。均方误差损失函数通常用于回归问题中，它的作用是计算目标值和模型预测值之间的平方差的平均值。具体来说，nn.MSELoss()函数的输入是两个张量，即模型的真实值…...

编程日记 2024/4/9 19:46:39

三国游戏(贪心排序)

三国游戏利用贪心、排序、前缀和的计算方法，特别注意不要数据溢出了，sum 加long long s[i] x[i]-y[i]-z[i]输入: 3 1 2 2 2 3 2 1 0 7输出: 2#include <bits/stdc.h> using namespace std;const int N 1e5100;typedef long long ll;bool cm…...

编程日记 2024/4/9 19:45:36

GPU环境安装与虚拟环境安装(适用于Windows下的李沐GPU)

之前我是用的都是VMware的虚拟机且安装的是cpu的pytorch版本,因为想要使用GPU,最终实现了在Windows上使用GPU,并且相关原理也在参考文章或视频内,可以通过原理自行挑选自己所需的配置并安装。文章目录 1.GPU安装1.1 名词解释1.2 卸载旧版本的CUDA1.3 版本选择步骤(Nivida显卡…...

编程日记 2024/4/9 19:44:35

Http / Https 下载文件，startWith不能验证https，测试地址：https://storage.googleapis.com/golang/go1.7.3.windows-amd64.msi private static final Logger logger Logger.getLogger(MethodHandles.lookup().lookupClass());private static…...

编程日记 2024/4/9 19:42:33

【Android】Glide加载SVG，SVG转PNG

Dependency plugins {id kotlin-kapt }dependencies {api com.github.bumptech.glide:glide:4.12.0kapt com.github.bumptech.glide:compiler:4.12.0api com.caverock:androidsvg:1.4 }SvgDecoder 负责解码SVG资源 import com.bumptech.glide.load.Options import com.bumpte…...

编程日记 2024/4/9 19:36:26