Angular基础学习(入门 --> 入坑)

目录

一、Angular 环境搭建

二、创建Angular新项目

三、数据绑定

四、ngFor循环、ngIf、ngSwitch、[ngClass]、[ngStyle]、管道、事件、双向数据绑定--MVVM

五、DOM 操作 (ViewChild)

六、组件通讯

七、生命周期

八、Rxjs 异步数据流

九、Http 请求

十、使用axios 请求数据

十一、路由

十二、动态路由 & get 传值

十三、动态路由的 js 跳转路由

十四、父子路由(嵌套路由)

十五、vdemo项目


一、Angular 环境搭建

1、安装nodejs,通过node -v查看node版本安装是否成功(自行百度安装)

2、安装npm / yarn / cnpm /pnpm,npm -v查看npm版本是否成功(自行百度安装)

3、npm install -g @angular/cli@7.0.6(学习的版本稳定)

4、ng v 验证安装是否成功

二、创建Angular新项目

1、使用命令创建

ng new vdemo

2、配置选项(1、是否使用路由 【暂时不用N】,2、会哪个选那个,上下选择,回车就会创建好项目,并且下载好依赖)

npm new vdemo --skip-install -- 创建项目不下载依赖 -- 后面 自行执行 npm i

也可以自行到目录下执行npm i 下载依赖

3、项目启动

ng serve --open

4、angular6 中使用socket.io报global is not defined 错误如何解决

angular6 中使用socket.io报global is not defined 错误如何解决

5、目录介绍

6、自定义组件命令

https://angular.dev/cli

ng g 查看模块

ng g component components/news 创建组件

在根组件引入news组件

效果:

三、数据绑定

<----! html ------->

<h1>angular模板里面绑定数据</h1>
<p>{{ title }}
</p><p>{{ msg }}</p><p>{{ username }}</p>
<p>{{ student }}</p>
<p>{{ userInfo.username }}、{{ userInfo.age }}</p>
<p>{{ message }}</p><hr />
<!-- ----------------------------------------------------------------- --><h1>angular模板里面绑定属性</h1>
<div title="我是一个属性">宇哥很帅</div><br /><div [title]="student">宇哥很帅-lalal</div><hr /><!-- ----------------------------------------------------------------- -->
<h1>angular模板里面绑定html</h1><div>{{ content }}</div>
<!-- 解析html -->
<div [innerHTML]="content" class="red"></div>
<hr>
<!-- ----------------------------------------------------------------- --><h1>angular模板里面允许做简单的运算</h1>
1+2={{ 1 + 2 }}
<hr>
<!-- ----------------------------------------------------------------- -->
<h1>angular模板里面数据循环</h1>
<br /><ul><li *ngFor="let item of arr">{{ item }}</li>
</ul><br /><ul><li *ngFor="let item2 of list">{{ item2 }}</li>
</ul>
<br /><ul><li *ngFor="let item3 of items">{{ item3 }}</li>
</ul><br />
<ul><li *ngFor="let item4 of listList">{{ item4.name }}、{{ item4.age }}</li>
</ul><br />
<ul><li *ngFor="let item5 of cars"><h2>{{ item5.name }}</h2><ol><li *ngFor="let its of item5.list">{{ its.name }} --- {{ its.price }}</li></ol></li>
</ul>

<----! ts ------->

import { Component, OnInit } from "@angular/core";@Component({selector: "app-news",templateUrl: "./news.component.html",styleUrls: ["./news.component.css"],
})
export class NewsComponent implements OnInit {// 声明属性的几种方法// public  共有(默认) 可以在这个类里面使用、也可以在类外面使用// protected  保护类型  它只有在当前类和它的子类里面访问// private   私有   当前类才可以访问这个属性只有在public title = "我是新闻组件";msg = "我是新闻组件中的msg";private username = "张三";// 推荐public student: any = "我是一个学生";public userInfo: object = {username: "张三",age: "20",};public message: any;public content="<h2>我是新闻组件中的content</h2>";// 定义数组public arr=['111','222','333']// 推荐public list:any[] = ['我是第一个',222222,'443425']public items:Array<string>=['第一个新闻','第二个新闻']// 复杂数组public listList:any[]=[{id:1,name:'张三',age:20},{id:2,name:'李四',age:22},{id:3,name:'王五',age:23}]public cars:any[]=[{name:'宝马',list:[{name:'宝马X1',price:'30W'},{name:'宝马X2',price:'20W'}]},{name:'奥迪',list:[{name:'奥迪Q1',price:'130W'},{name:'奥迪Q2',price:'1120W'}]}]constructor() {this.message = "这是给属性赋值--(改变属性的值)";this.msg = "我是新闻组件中的msg==(我是改变后的值)";}ngOnInit() {}
}

效果:

四、ngFor循环、ngIf、ngSwitch、[ngClass]、[ngStyle]、管道、事件、双向数据绑定--MVVM

<----! html ------->

<h1>引入图片</h1><img style="width: 300px; height: 300px" src="assets/images/1.jpg" alt="" />
<hr /><img style="width: 300px; height: 300px" [src]="picUrl" alt="" />
<hr /><h1>循环数据 显示数据的索引(key)</h1>
<ul><li *ngFor="let item of list; let key = index">{{ key }}--{{ item.title }}</li>
</ul><hr /><h1>条件判断语句 *ngIf</h1>
<div *ngIf="flag"><img style="width: 300px; height: 300px" src="assets/images/1.jpg" alt="" />
</div>
<div *ngIf="!flag"><img style="width: 300px; height: 300px" [src]="picUrl" alt="" />
</div><hr>
<ul><li *ngFor="let item of list; let key = index"><span *ngIf="key == 1" class="reds">{{ key }}--{{ item.title }}</span><span *ngIf="key != 1">{{ key }}--{{ item.title }}</span></li>
</ul>
<hr><h1>条件判断语句 *ngSwitch</h1>
<ul [ngSwitch]="orderStatus"><li *ngSwitchCase="1">下单</li><li *ngSwitchCase="2">支付</li><li *ngSwitchCase="3">已支付</li><li *ngSwitchCase="4">已购买</li>
</ul>
<hr><h1>属性 [ngClass]、[ngStyle]</h1>
<div class="reds">ngClass1111
</div>
<hr>
<div [ngClass]="{'reds': 'true', 'blue': 'false'}">ngClass1111
</div>
<hr>
<div [ngClass]="{'orange': 'flag', 'blue': '!flag'}">ngClass1111
</div>
<hr><h1>循环数组、改变数组某一项的样式</h1>
<ul><li *ngFor="let item of list; let key = index" [ngClass]="{'reds': key == 1, 'blue':key == 2,'orange':key == 3}">{{ key }}--{{ item.title }}</li>
</ul>
<hr><p style="color: aqua;">我是一个p标签</p>
<br>
<p [ngStyle]="{'color':'pink'}">我是一个p标签</p>
<br>
<p [ngStyle]="{'color':attr}">我是一个p标签</p>
<hr><h1>管道</h1>
<p> {{ today | date:'yyyy-MM-dd HH:mm ss' }}</p>
<hr><h1>事件</h1>
<p>{{title}}</p>
<br>
<button (click)="run()">点击我</button>
<br>
<button (click)="getData()">点击我获取title</button>
<br>
<button (click)="changeData()">点击我改变title</button>
<br>
<button (click)="runEvent($event)">点击我改变颜色</button>
<hr><h1>表单事件、事件对象</h1>
keyDown:
<input type="text" (keydown)="keyDown($event)" />
<br>
keyUp:
<input type="text" (keydown)="keyUp($event)" />
<hr><h1>双向数据绑定--MVVM</h1>
<input type="text" [(ngModel)]="keywords" />
<p>{{keywords}}</p>
<br>
<button (click)="changeKeywords()">改变keyWords值</button>
<br>
<button (click)="getKeywords()">获取keyWords值</button>

<----! ts ------->

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {public title = '我是标题'public keywords = '我是默认值'public picUrl = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'public list:any[] = [{title: 'title1',},{title: 'title2',},{title: 'title3',},{title: 'title4',}]public flag:boolean = false;public orderStatus:number=1public attr:string = 'orange'public today:Date = new Date()constructor() { }ngOnInit() {}run(){alert('点击了我-哈哈')}getData(){alert(this.title)}changeData(){this.title = '我是改变后的title'}runEvent(e){let dom:any = e.targetdom.style.color = 'red'}// 表单事件keyDown(e){if(e.keyCode == 13){alert('按下回车')}else{console.log(e.target.value)}}keyUp(e){if(e.keyCode == 13){console.log(e.target.value)alert('keyUp按下回车')}}// 双向数据绑定changeKeywords(){this.keywords = '我是改变后的值'}getKeywords(){alert(this.keywords)}}

效果:

五、DOM 操作 (ViewChild)

<----! html ------->

<app-header #header></app-header><hr><div #myBox>xinwen
</div>
<button (click)="getChild()">获取header子组件值</button>

<----! ts ------->

import { Component, OnInit,ViewChild } from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {@ViewChild('myBox') myBox:any@ViewChild('header') header:anyconstructor() { }ngOnInit() {}ngAfterViewInit(){this.myBox.nativeElement.style.color = 'blue'}getChild(){this.header.run()}}
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {constructor() { }ngOnInit() {}run(){alert('我是header子组件!!!')}}

原生 js 获取DOM

<----! html ------->

<h1>DOM 操作</h1><div id="box">this is box
</div><div id="box1" *ngIf="flag">this is box1111111
</div>

<----! ts ------->

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {public flag:boolean = trueconstructor() { }ngOnInit() {let box = document.getElementById("box")box.style.color = 'red'/*使用ngif 获取不到DOM 节点let box1 = document.getElementById("box1")box1.style.color = 'yellow'*/ };// 视图加载完成,获取DOM 节点ngAfterViewInit(){let box1 = document.getElementById("box1")box1.style.color = 'pink'}}

父传子 / 获取一个组件的实例 (ViewChild)

效果图:

六、组件通讯

1、父传子 @input

获取父组件的方法

把整个父组件传给子组件 使用 this

父组件通过@ViewChild主动获取子组件的数据和方法

2、子传父 @Output 、EventEmiter

3、非父子组件的通信(eg:兄弟) todolist里有

3.1、lacalstorage

3.2、service 服务

3.3、Angular文档:https://www.angular.cn/guide/lifecycle-hooks

七、生命周期

<----! lifecycle.component.html ------->

<h1>{{msg}}</h1>
<hr>
<br>
<button (click)="changeMsg()">改变Msg</button>
<br>
<br>
<input type="text" [(ngModel)]="userinfo">

<----! lifecycle.component.ts ------->

import { Component, OnInit ,Input} from "@angular/core";@Component({selector: "app-lifecycle",templateUrl: "./lifecycle.component.html",styleUrls: ["./lifecycle.component.css"],
})
export class LifecycleComponent implements OnInit {@Input('title2') title2:string;public msg: string = "我是一个生命周期演示哦";public userinfo: string = "";public oldUserinfo: string = "";constructor() {console.log("00构造函数执行了---除了使用简单的值对局部变量进行初始化之外,什么都不应该做");}ngOnChanges() {console.log("01ngOnChanges执行了---当绑定的输入属性的值发生变化时调用 (父子组件传值会触发)");}ngOnInit() {console.log("02ngonInit执行了--- 请求数据一般放在这个里面");}ngDoCheck() {// 写一写自定义操作console.log("03ngDocheck执行了---捡测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应");if (this.userinfo !== this.oldUserinfo) {console.log(`你从${this.oldUserinfo}改成${this.userinfo}`);this.oldUserinfo = this.userinfo;} else {console.log("数据没有变化");}}ngAfterContentInit() {console.log("04ngAftercontentInit执行了---当把内容投影进组件之后调用");}ngAfterContentChecked() {console.log("05ngAftercontentchecked执行了---每次完成被投影组件内容的变更检测之后调用");}ngAfterViewInit() {console.log("06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用(dom操作放在这个里面");}ngAfterViewChecked() {console.log("07ngAfterViewchecked执行了----每次做完组件视图和子视图的变更检测之后调用");}ngOnDestroy() {console.log("08ngonDestroy执行了...");}changeMsg() {this.msg = "我是一个生命周期演示哦-- 我变了";}
}

效果图:

改变值触发哪些函数:如下

<button (click)="changeMsg()">改变Msg</button>

销毁组件

八、Rxjs 异步数据流

中文手册:​​​​​https://cn.rx.js.org/

1、创建服务:ng  g service services/request

2、引入服务

异步编程:

<----! request.service.ts ------->

import { Injectable } from "@angular/core";import { Observable } from "rxjs";@Injectable({providedIn: "root",
})
export class RequestService {constructor() {}// 同步getData() {return "this is service data";}// 异步getCallbackData(cb) {setTimeout(() => {var username = "zhangsan";// return usernamecb(username);}, 1000);}// promise异步getPromiseData() {return new Promise((resolve, reject) => {setTimeout(() => {var username = "zhangsan---promise";resolve(username);}, 2000);});}// Rsjx异步getRsjxData() {return new Observable((observer) => {setTimeout(() => {var username = "zhangsan---Rsjx异步";observer.next(username)// observer.error('错误数据')}, 2000);});}// 多次执行getPromisSeintervaleData() {return new Promise((resolve, reject) => {setTimeout(() => {var username = "zhangsan---promise多次执行";resolve(username);}, 1000);});}getRxjsSeintervaleData() {let count = 0return new Observable<any>((observer) => {setInterval(() => {count++;var username = "zhangsan---Rsjx多次执行";observer.next(username)// observer.error('错误数据')}, 1000);});}getRxjsintervaleNum() {let count = 0return new Observable<any>((observer) => {setInterval(() => {count++;observer.next(count)// observer.error('错误数据')}, 1000);});}
}

<----! home.component.ts ------->

import { Component, OnInit } from "@angular/core";
import { RequestService } from "../../services/request.service";import { filter, map } from "rxjs/operators";@Component({selector: "app-home",templateUrl: "./home.component.html",styleUrls: ["./home.component.css"],
})
export class HomeComponent implements OnInit {constructor(public request: RequestService) {}ngOnInit() {// 1、同步方法let data = this.request.getData();console.log(data);// 2、获取异步方法&数据this.request.getCallbackData((data) => {console.log(data);});// 3、promise异步var promiseData = this.request.getPromiseData();promiseData.then((data) => {console.log(data);});// 4、rxjs获取异步方法数据// var rxjsData = this.request.getRsjxData();// rxjsData.subscribe((data) => {//   console.log(data);// });// 5、rxjs unsubscribe取消订阅var streem = this.request.getRsjxData();var d = streem.subscribe((data) => {console.log(data);});setTimeout(() => {d.unsubscribe(); /* 取消订阅 */}, 1000);// 6、promise 执行多次(没有这个能力)var intervalData = this.request.getPromisSeintervaleData();intervalData.then((data) => {console.log(data);});// 7、Rxjs执行多次// var streemInterval = this.request.getRxjsSeintervaleData();// streemInterval.subscribe((data) => {//   console.log(data);// });// 8、用工具方法对返回数据进行处理/*//  filtervar streemNum = this.request.getRxjsintervaleNum();streemNum.pipe(filter((value) => {if(value%2==0){return true}}),).subscribe((data) => {console.log(data);});*//*// mapvar streemNum = this.request.getRxjsintervaleNum();streemNum.pipe(map((value) => {return value*value}),).subscribe((data) => {console.log(data);});*/// fliter & map 的结合使用var streemNum = this.request.getRxjsintervaleNum();streemNum.pipe(filter((value) => {if(value%2==0){return true}}),map((value) => {return value*value}),).subscribe((data) => {console.log(data);});}
}

九、Http 请求

1、get 请求数据

2、post提交数据

3、jsonp 请求数据

十、使用axios 请求数据

asiox : https://github.com/axios/axios

1、创建服务

ng g service services/httpservice

2、安装:asiox

npm i axios --save

3、在服务中引入axios

4、组件中引入使用

十一、路由

1、创建组件

ng g component components/homeng g component components/newsng g component components/product

2、引入组件

3、配置路由

接下来就是输入路径就可以切换页面了

4、routerLink跳转页面 默认路由

选中当前页面高亮

十二、动态路由 & get 传值

1、get 传值

1.1、跳转、引入路由

1.2、接收

2、动态路由传值

2.1、跳转

2.2、接收

效果:

十三、动态路由的 js 跳转路由

1、路由引入十二点一样

2、get 传值

十四、父子路由(嵌套路由)

1、效果图

2、创建组件&路由

ng g component components/home
ng g component components/product
...
ng g component components/home/welcome

3、根组件路由跳转

4、左边路由跳转

5、右边显示内容使用<router-outlet></router-outlet>占位

6、需要选中高亮每个父组件都要加上

routerLinkActive="active"

十五、vdemo项目

地址:https://gitee.com/xu-feiyu/angular-basice

仓库地址:https://gitee.com/xu-feiyu/angular-basice.git

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于vue2+uniapp+uview+vuex 私募基金项目小程序总结

1.关于权限不同tabbar处理 uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uniapp tabbar-CSDN博客 但是里面还有两个问题 一个是role应该被本地存储并且初始化 第二个问题是假设我有3个角色 每个角色每个tabbar不一样的&#xff0c;点击tabbar时候会导致错乱 第三个问题…

Windows11安装Docker Desktop教程

目录 一.安装前置步骤 ▐ 开启虚拟化 ▐ 安装WSL2 ▐ 安装Linux环境 二.Windows上安装Docker 一.安装前置步骤 ▐ 开启虚拟化 首先确保虚拟化的开启&#xff0c;打开任务管理器后查看&#xff1a; 确保图中的虚拟化是已启用&#xff0c;没有开启的需要通过BIOS进行开启&…

基于php的在线租房管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

MySQL-联合查询

1.简介 1.1为什么要使用联合查询 在数据设计时由于范式的要求&#xff0c;数据被拆分到多个表中&#xff0c;那么要查询⼀个条数据的完整信息&#xff0c;就 要从多个表中获取数据&#xff0c;如下图所⽰&#xff1a;要获取学⽣的基本信息和班级信息就要从学⽣表和班级表中获…

全网最全软件测试面试题(含答案解析+文档)

一、软件测试基础面试题 1、阐述软件生命周期都有哪些阶段? 常见的软件生命周期模型有哪些? 软件生命周期是指一个计算机软件从功能确定设计&#xff0c;到开发成功投入使用&#xff0c;并在使用中不断地修改、增补和完善&#xff0c;直到停止该软件的使用的全过程(从酝酿到…

修改Opcenter EXFN 页面超时时间(Adjust UI Session Extend Token)

如果你想修改Opcenter EXFN中页面Session的超时时间&#xff0c;你可以按照如下步骤修改SessionAge 这个参数&#xff1a; 管理员运行CMD执行以下命令 umconf -getconfig -file C:\temp\config.json如果第2步有报错&#xff0c;则执行步骤4;如果没有报错则执行第5步如果第2步…

react-问卷星项目(2)

流程 husky 一个git hook 工具&#xff0c;即在git commit之前执行自定义的命令&#xff0c;将规范流程化&#xff0c;如执行代码风格的检查&#xff0c;避免提交非规范的代码&#xff0c;在github搜索即可。 这两条是接着执行的&#xff0c;表示创建husky&#xff0c;在文档…

C++【类和对象】(取地址运算符重载与实现Date类)

文章目录 取地址运算符重载const成员函数取地址运算符重载 Date类的实现Date.hDate.cpp1.检查日期合法性2. 构造函数/赋值运算符重载3.得到某月的天数4. Date类 - 天数的操作4.1 日期 天数4.2 日期 天数4.3 日期 - 天数4.4 日期 - 天数 5. Date的前后置/--5.1 前置5.2 后置5.…

fastadmin搜索刷新列表,怎么限制用户频繁点击?

文章目录 fastadmin搜索刷新列表&#xff0c;怎么限制用户频繁点击&#xff1f;解决方案fastadmin事件方法实现完结 fastadmin搜索刷新列表&#xff0c;怎么限制用户频繁点击&#xff1f; fastadmin目前有个很致命的问题&#xff0c;就是用户可以频繁的点击搜索等按钮&#xf…

Linux防火墙-nat表

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们经过上小章节讲了Linux的部分进阶命令&#xff0c;我们接下来一章节来讲讲Linux防火墙。由于目前以云服务器为主&#x…

android kotlin Extension扩展函数

1、新建一个kt文件&#xff1a; 2、代码&#xff1a; class User(var name:String)/**扩展函数**/ fun User.Print(){print("用户名 $name") }// 扩展函数 swap,调换不同位置的值 fun MutableList<Int>.swap(index1: Int, index2: Int) {val tmp this[index1…

组合逻辑元件与时序逻辑元件

组合逻辑元件和时序逻辑元件都是数字电路中的基本构建块&#xff0c;但它们在功能和结构上存在显著差异。 1. 组合逻辑元件: 内容: 组合逻辑元件的输出仅取决于当前的输入&#xff0c;而与之前的输入无关。 它们没有记忆功能。 常见的组合逻辑元件包括&#xff1a; 与门 (AND…

Java_TestNg

TestNg 前言支持特性 使用步骤1.引入库 常用注解Test注解BeforeSuite AfterSuiteAfterClass BeforeClassAfterTest BeforeTestAfterGroups BeforeGroupsBeforeMethod AfterMethodDataProviderFactoryListenersPatameters断言相等 不相等true/falsenull / !nullequals / !equals…

【C++篇】启航——初识C++(上篇)

目录 引言 一、C的起源和发展史 1.起源 2.C版本更新 二、C在⼯作领域中的应⽤ 三、C入门建议 1.参考文档 2.推荐书籍 四、C的第一个程序 1.C语言写法 2.C写法 五、命名空间 1.为什么要有命名空间 2.定义命名空间 3.主要特点 4.使用示例 六、C输⼊&输出 …

系统架构师-面向服务架构(SOA)全解

1、为什么需要SOA架构 1.1 系统集成问题 异构系统整合 例如&#xff0c;一个企业可能同时拥有用 Java 开发的企业资源规划&#xff08;ERP&#xff09;系统、用 C# 开发的客户关系管理&#xff08;CRM&#xff09;系统以及用 Python 开发的数据分析系统。通过 SOA&#xff0…

Transformers 中的 Softmax 可以并行加速么?

Transformers 中的 Softmax 可以并行加速么&#xff1f; 面试题 Softmax 如何并行&#xff1f; Softmax 计算公式 安全的 Softmax 运算 Softmax函数在深度学习中广泛应用于多分类问题的输出层&#xff0c;它通过指数化和归一化将一个实数向量转换为概率分布。然而&#xff…

基于springboot vue 大学生竞赛管理系统设计与实现

博主介绍&#xff1a;专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…

YoloV10改进策略:BackBone改进|PoolFormer赋能YoloV10,视觉检测性能显著提升的创新尝试

摘要 在深度学习的广阔领域中,目标检测作为计算机视觉的基石任务之一,始终吸引着研究者的广泛关注。近期,我们大胆尝试将前沿的PoolFormer主干网络引入经典的目标检测框架YoloV10中,这一创新性融合不仅为YoloV10注入了新的活力,更在检测精度与效率上实现了双重飞跃,成为…

【Linux学习】【Ubuntu入门】2-1 Linux系统下运行C语言输出hello word

1.双击打开VMware软件&#xff0c;点击开启此虚拟机后&#xff0c;等待点击头像输入密码进入 2.“CtrlAltt”调出命令行终端&#xff0c;输入命令sudo apt-get install vim安装vim&#xff0c;输入命令sudo apt-get install gcc安装gcc 3.输入命令vi hello.c进入C语言编写环境&…

Web端云剪辑解决方案,提供多轨视频、音频、特效、字幕轨道可视化编辑

传统视频剪辑软件的繁琐安装、高昂硬件要求以及跨平台协作的局限性&#xff0c;让无数创意者望而却步。美摄科技作为云端视频编辑技术的领航者&#xff0c;携其革命性的Web端云剪辑解决方案&#xff0c;正重新定义视频创作的边界&#xff0c;让专业级视频剪辑触手可及&#xff…