springboot+vue全栈开发【4.前端篇之Vue组件化开发】

news2024/12/25 0:56:59

目录

  • 前言
  • NPM使用
    • NPM简介
    • nodejs安装
    • npm命令
  • Vue CLI使用
    • 用vue CLI创建一个vue项目
  • 组件化开发
    • 组件的构成
    • 组件怎么用
      • 1.创建一个组件
      • 2.在父组件中使用子组件
      • 3. 传递数据给子组件
      • 4. 监听子组件事件

前言

hi,这个系列是我自学开发的笔记,适合具有一定编程基础(html、css那些基础知识要会!)的同学,有问题请及时指正!

NPM使用

NPM简介

  • NPM (Node Package Manager)是一个NodeJS包管理和分发工具。
  • NPM以其优秀的依赖管理机制和庞大的用户群体,目前已经发展成为整个JS领域的依赖管理工具
  • NPM最常见的用法就是用于安装和更新依赖。要使用NPM,首先要安装Node工具

nodejs安装

下载地址:https://nodejs.org/en/download 链接直达

npm命令

贴个基础命令博客:http://t.csdnimg.cn/EM8XM,链接直达

Vue CLI使用

  • Vue CLI是Vue官方提供的构建工具,通常称为脚手架。
  • 用于快速搭建一个带有热重载 (在代码修改后不必刷新页面即可呈现修改后的效果)及构建生产版本等功能的单页面应用。
  • Vue CLI基于webpack构建,也可以通过项目内的配置文件进行配置。
  • 安装: npm install -g @vue/cli
  • 如果安装不成功
    npm uninstall -g vue-cli , 再 npm install -g @vue/cli

在我们想要放vue项目的目录下,打开cmd,输入上方的命令进行安装;安装成功后,之后我们就可以快速建vue项目而不用像之前那样从vscode建html再引用vue的script

用vue CLI创建一个vue项目

创建一个vue项目,hello是项目名字
在这里插入图片描述

选择最后一个选项,eslint是检查语法风格的,学习初期不推荐用。
在这里插入图片描述
按空格取消linter/formatter,然后回车
在这里插入图片描述
选择3.x,再按回车
在这里插入图片描述
这一步是问把选择安装的依赖记录在哪个文件,选择package.json,这个json文件功能类似maven的pom.xml
在这里插入图片描述
这一步是问要不要创建快照,之后可以快速创建项目,选N
在这里插入图片描述
创建好之后,在我们刚刚的目录下会出现一个hello文件夹,点进去后完整的目录格式如下:
在这里插入图片描述
一个vue项目就创建好了!这和我在之前的博客 springboot+vue全栈开发【2.前端准备工作篇】
中创建vue项目的方法完全不一样
在这里插入图片描述

组件化开发

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。
Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。

组件的构成

  • Vue 中规定组件的后缀名是.vue
  • 每个.vue组件都由3部分构成,分别是
  •  template,组件的模板结构,可以包含HTML标签及其他的组件
    
  •  script,组件的JavaScript代码
    
  •  style,组件的样式
    

以app.vue进行分析。如图,helloworld就是我们自定义的组件。在使用自定义组件的时候,我们需要在开头对其进行引用。
在这里插入图片描述

  • export default {...}:导出一个对象,这个对象是当前组件的配置。其中:
  •  name: 'App':指定了当前组件的名称。
    
  •  components: { HelloWorld }:注册了HelloWorld组件,这样在模板中就可以使用<HelloWorld/>标签。
    
  • #app:选择器,指定了样式应用到哪个元素上。
  • 样式属性如font-family、-webkit-font-smoothing等用于定义元素的外观。

组件怎么用

1.创建一个组件

首先,你需要创建一个Vue组件。一个Vue组件通常包括三个部分:<template>(HTML模板)、<script>(JavaScript逻辑)和<style>(CSS样式)。一般我们将自定义组件放在component目录下:
在这里插入图片描述

2.在父组件中使用子组件

在父组件中,可以通过注册和引用的方式使用子组件。以下hello.vue是我的组件文件名,HelloWorld是我给组件起的名字。

局部注册
在父组件的<script>中局部注册子组件:

<script>
import HelloWorld from './components/hello.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

然后在父组件的模版中使用:

<template>
  <div>
    <HelloWorld :msg="message" />
  </div>
</template>

全局注册
也可以全局注册组件,使其在应用的任何地方都可用:

// main.js or any main entry file
import Vue from 'vue'
import App from './App.vue'
import HelloWorld from './components/hello.vue'

Vue.component('HelloWorld', HelloWorld)

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 传递数据给子组件

可以通过props向子组件传递数据:

<HelloWorld :msg="message" />

在子组件中接受并使用这些数据,子组件就会显示父组件传递的message数据。

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

4. 监听子组件事件

可以监听子组件的事件并在父组件中处理:

<!-- 在子组件中 -->
<button @click="$emit('custom-event', eventData)">Click me</button>

<!-- 在父组件中 -->
<HelloWorld @custom-event="handleCustomEvent" />
// 在父组件的 methods 中
methods: {
  handleCustomEvent(data) {
    console.log('Received custom event with data:', data);
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1613085.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

配置 rust国内源

rust crate.io 配置国内源&#xff08;cargo 国内源&#xff09; warning: spurious network error (2 tries remainin..._warning: spurious network error (3 tries remaining-CSDN博客

Boximator: Generating Rich and Controllable Motions for Video Synthesis

模型添加控制的方式是利用bbox和move path&#xff0c;在训练的时候冻结原始视频生成模型的参数&#xff0c;只是训练新添加的control module&#xff0c;修改的位置是在spatial attetion里面&#xff0c;新添加了一个self attention v v S e l f A t t n ( v ) v v T S (…

node的事件循环

异步同步啥的就不多说了&#xff0c;直接看node中有哪些是异步 其中灰色部分和操作系统有很大的关系&#xff0c;就不多说了&#xff0c;其中定时器属于timers队列&#xff0c;I/O操作属于poll队列&#xff0c;setImmediate属于check队列&#xff0c;其中nextTick和promise不属…

补档 -- 测试的分类(1)

最近有很多人私信我说: 灰灰你什么时候写测试分类阿, 本来我要开始肝性能测试的, 我一看, 奥, 之前摸鱼忘写了, 所以这里补档(叶问指着一边笑.jpg). 总览 标红的需要注意一下. 为什么要对软件测试进行分类? 软件测试是软件生命周期的一个重要环节, 具有较高的复杂性, 对于软…

【JAVA】实现只有一个窗口弹出的底层逻辑——单身模式

目录 背景说明 代码实现 手写笔记 背景说明 有的时候&#xff0c;当你点击一个选项时会弹出来多个窗口&#xff0c;而有的时候只会弹出一个。 实际上&#xff0c;弹出多个窗口就是创建了多个相同的对象&#xff0c;而只弹出一个就是我们今天即将分享的单身模式——一个类只产生…

java:基于javase上实现的图书管理系统

目录 大概功能&#xff1a; 主要步骤&#xff1a; Main类 book包 Book类 BookList类 operation包 AddOperation类 BorrowedOperation类 DelOperatoion类 ExitOpration类 FindOperation类 IoPeration接口 ReturnOperation类 ShowOperation类 user包 AdminUser类 大概功…

【高校科研前沿】东北地理所孙敬轩博士为一作在《中国科学:地球科学(中英文版)》发文:气候变化下东北地区农业绿水安全风险评估

目录 01 文章简介 02 研究内容 03 文章引用 04 期刊简介 01 文章简介 论文名称&#xff1a;Risk assessment of agricultural green water security in Northeast China under climate change&#xff08;气候变化下东北地区农业绿水安全风险评估&#xff09; 第一作者及…

CSS显示模式

目录 CSS显示模式简介 CSS显示模式的分类 块元素 行元素 行内块元素 元素显示模式的转换 使块内文字垂直居中的方法 设计简单小米侧边栏&#xff08;实践&#xff09; CSS显示模式简介 元素显示模式就是元素&#xff08;标签&#xff09;以什么方式进行显示&#xff0…

在 Linux 中复制文件和目录

目录 ⛳️推荐 前言 在 Linux 命令行中复制文件 将文件复制到另一个目录 复制文件但重命名 将多个文件复制到另一个位置 复制时处理重复文件 交互式复制文件 在 Linux 命令行中复制目录 仅复制目录的内容&#xff08;不是目录&#xff09; 复制多个目录 测试你的知…

顺序表leetcode刷题(C语言版)

一.移除元素 对于本题&#xff0c;共有两种解法&#xff1a; 思路一&#xff1a;创建新的数组&#xff0c;遍历原数组&#xff0c;将不为value的值放到新数组中&#xff0c;但本题不允许使用新的数组&#xff0c;因此该方法不行 思路二&#xff1a;使用快慢指针&#xff0c;原数…

用Cmake编译程序时,链接到FFmpeg库

用Cmake编译程序时&#xff0c;链接到FFmpeg库 一、前言 可喜可贺&#xff0c;折腾了一晚上终于把这个勾八链接成功了&#xff0c;已经要吐了。看到下面控制台的输出&#xff0c;吾心甚慰呀&#x1f62d; [100%] Linking CXX executable rknn_yolov5_demo [100%] Built targe…

[数据结构]——排序——插入排序

目录 ​编辑 1 .插入排序 1.基本思想&#xff1a; 2.直接插入排序&#xff1a; ​编辑 1.代码实现 2.直接插入排序的特性总结&#xff1a; 3.希尔排序( 缩小增量排序 ) 1.预排序 2.预排序代码 3.希尔排序代码 4.希尔排序的特性总结&#xff1a; 1 .插入排序 1.基本思…

C语言联合体详解

下午好诶&#xff0c;今天小眼神给大家带来一篇C语言联合体详解的文章~ 目录 联合体 1. 联合体类型的声明 2. 联合体的特点 代码一&#xff1a; 代码二&#xff1a; 3. 相同成员的结构体和联合体对比 ​编辑4. 联合体大小的计算 5. 联合体的优点 联合体 1. 联合体…

电脑显示缺失d3dx9_43.dll文件如何修复?分享5种详细的修复方法

在日常使用计算机的过程中&#xff0c;当我们尝试启动某个软件或运行一款游戏时&#xff0c;系统可能会弹出一个错误提示信息&#xff0c;明确指出“d3dx9_43.dll文件缺失”。这个情况表明&#xff0c;作为Windows操作系统中不可或缺的一部分&#xff0c;DirectX 9.0c的一个关键…

数电期末复习(二)逻辑代数基础

这里写目录标题 2.1 二值逻辑变量与基本逻辑运算2.1.1 与运算2.1.2 或运算2.1.3 非运算2.1.4 常用复合逻辑运算 2.2 逻辑函数的建立及其表示方法2.2.1 真值表表示2.2.2 逻辑函数表达式表示2.2.3 逻辑图表示方法2.2.4 波形图表示方法 2.3 逻辑代数2.3.1 逻辑代数的基本定律和恒等…

MySQL数据库基础知识(数据库/表的基础操作 + 基本类型)

文章目录 数据库的操作显示当前数据库服务器上有哪些数据库创建数据库使用数据库删除数据库 常用数据类型数值类型字符串类型日期类型小结(主要使用) 表的操作创建表查看表结构列出当前数据库的表删除表 注释MySQL创建的数据库/表存储在系统的位置 数据库的操作 输入的单词之间…

算法入门——二分查找

目录 1、二分模板 2、习题 1.704.二分查找 2.35.搜索插入位置 3.744. 寻找比目标字母大的最小字母 4.69. x 的平方根 5.1351. 统计有序矩阵中的负数 6.74. 搜索二维矩阵 7.34. 在排序数组中查找元素的第一个和最后一个位置 8.33. 搜索旋转排序数组 9.153. 寻找旋转排…

政企版 WPS Pro 专业版注册安装教程

政企版 WPS Pro 专业版安装及激活步骤 第 1 步&#xff1a;下载压缩包&#xff08;内含注册码&#xff09;【无解压密码】。 第 2 步&#xff1a;解压缩后&#xff0c;运行 exe 文件&#xff0c;默认步骤安装即可。 第 3 步&#xff1a;安装完成后&#xff0c;新建一个 Word …

【ThinkPHP框架教程·Part-04】URL访问模式

文章目录 一、URL解析1、URL解析格式2、URL解析示例说明3、设置URL重写 二&#xff0e;URL 兼容模式 本章节我们来简单了解一下 ThinkPHP6.0 的 URL 访问模式&#xff0c;解析它的访问方法。 一、URL解析 ThinkPHP 框架非常多的操作都是通过 URL 来实现的。 1、URL解析格式 由…

利用RFID无线射频技术,实现商品防伪和溯源信息管理

近几年来&#xff0c;伴随着信息化产业的快速发展&#xff0c;企业对于产品在生产、流通、分销和零售等环节的实时跟踪和监管的需求日趋强烈。同时企业在经营过程中不可避免地要在不同区域实行差异化的经销商拿货价格&#xff0c;从而导致窜货现象时有发 生&#xff0c;为企业带…