系统性学习vue-组件及脚手架

书接上文

Vue组件及脚手架

  • 初始化脚手架
    • 说明
    • 步骤
  • 分析脚手架结构
  • render函数
  • 修改默认配置
  • ref属性
  • props配置
  • mixin 混入/混合
    • 定义混合
    • 局部混合
    • 全局混合
  • 插件
  • scoped样式
    • 安装less-loader
  • 浏览器的本地存储 webStorage
    • localStroage 本地存储
    • sessionStorage 会话存储
  • 组件自定义事件
    • 绑定
    • 解绑
    • 组件绑定原生事件
  • 全局事件总线 GlobalEventBus
    • 安装
    • 绑定事件 接收数据
    • 触发事件 传递数据
  • 消息订阅与发布 pubsub
  • $nextTick
  • transition
    • 动画效果
    • 过渡效果
    • transition-group
    • 集成第三方动画

初始化脚手架

说明

Vue脚手架是Vue官方提供的标准化开发工具(开发平台)
CLI: command line interface (命令行接口工具) 俗称脚手架

步骤

备注:

  • 如果下载缓慢可以配置npm淘宝镜像: npm config set registry https://registry.npm.taobao.org
  • Vue脚手架隐藏了所有webpack相关配置,弱项查看具体的webpack配置,请执行vue inspect > output.js

  1. (仅第一次执行)全局安装@vue/cli, 安装好就可以使用vue命令了
    npm install -g @vue/cli

  2. 切换到要创建项目的目录(可用cd命令,也可以直接文件下shift+右键选择’在此处打开窗口’),然后使用命令创建项目
    vue create xxxxx(项目名称)
    会出现一个选项
    在这里插入图片描述
    目前先选择vue2
    又来一个问题,先选NPM吧
    在这里插入图片描述

  3. 启动项目(运行的是官方给写好的HelloWorld代码)
    来到项目目录下,执行命令
    npm run serve
    至此准备完成
    在这里插入图片描述
    如果要停止服务的话,命令行按Ctrl+c(两遍)

分析脚手架结构

整个脚手架内容如下,
在这里插入图片描述

  • .gitignore git忽略文件配置
  • babel.config.js babel的配置文件
  • package-lock.json&package.json 符合npm规范的工程都会有这两个文件
    package.json 应用包配置文件,包含名称,版本,依赖等
    在这里插入图片描述package-lock.json 包版本控制文件
  • README.md 应用描述文件
  • src/main.js 当执行npm run serve命令后直接运行的就是这个文件,是整个项目的入口文件
    逐行分析↓
import Vue from "vue"; //引入Vue
import App from "./App.vue"; //引入App组件,是所有组件的父组件

Vue.config.productionTip = false; //关闭Vue的生产提示

// 创建Vue实例对象
new Vue({
  render: (h) => h(App), //将App组件放入容器中
}).$mount("#app"); //绑定模板
  • src/assets 存放静态资源,如图片
  • src/components 存放组件文件,除了App.vue
  • public/favicon.ico 网站页签图标
  • public/index.html 页面文件
    接着分析
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置,目的是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <!-- <%= BASE_URL %>指的是public所在位置 尽量不要用相对路径 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <!-- ><%= htmlWebpackPlugin.options.title %> 将package.json中的name取来使用 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时 noscript标签中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

render函数

main.js中有一行render: (h) => h(App),
按我们的想法应该是

template: `<App></App>`,
components: { App },

替换成我们的写法运行
报错了
翻译一下就是"嘿,你这用的vue不是完全版的,要不你就用完全版的,要不就用render方法"
在这里插入图片描述
嗯?不是完全版的vue?那先找一下目前用的是哪个vue
在这里插入图片描述
因为我们引入写的是文件夹名称,默认会找到index
但其实引入的是哪个js文件呢
来到node_modules/vue/package.json文件进行查到,搜索module,这个module就是控制当使用es6模块化语法引入的时候的具体引入文件
在这里插入图片描述
这个vue.runtime.esm.js就是我们真正引入的残缺版的vue
而完整版的就是相同目录下的vue.js
那么为什么要用一个残缺版的vue呢?

关于不同版本的Vue:

  1. vue.js与vue.runtime.js的区别:
    (1). vue.js是完整版的Vue,包含:核心功能+模板解析器
    (2). vue.runtime.xxx.js是运行版的Vue,只包含核心功能,没有模板解析器
  2. 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接受到的createElement函数去指定具体内容

vue.runtime.esm.js缺少的是模板解析器,用来识别template属性内容
而打包后就已经将vue翻译成js文件了,不需要解析器
而解析器占整个vue体积的1/3,懂的都懂

render: (h) => h(App),完整写法

render(createElement) {
	return createElement(App);
},

修改默认配置

图中红色框出的文件或文件夹名称是不可以更改了, 是vue配置并将配置文件隐藏了
在这里插入图片描述
其他的就是可以修改的
官网有配置项文档
修改配置项后需要重启服务

ref属性

  • 被用来给元素或子组件注册引用信息(id的替代者)
  • 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  • 使用方式: 打标识<h1 ref="xxx">...</h1>或<School ref="xxx">...</School>
    获取 this.$refs.xxx
<div ref="h1">Hello World!</div>
<div ref="h2">Hello World!</div>
<div ref="h3">Hello World!</div>

console.log(this.$refs);

输出结果
在这里插入图片描述
给组件添加ref,就能获取到vc
而原生的document.getElementById获取到的只能是组件模板结构

props配置

让组件接收外部传过来的数据
props是只读的,Vue底层会检测你对props的修改,如果进行了修改,就会发出警告.若业务需求确实需要修改,那么请复制props的内存到data中一份,然后去修改data中的数据
注意：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

App.vue中

<HelloWorld name="Qiu" :age="20"></HelloWorld>
<HelloWorld name="Cai" :age="18"></HelloWorld>

子级组件需要接收这些数据,
有三种方法

  • props: ["name", "age"],
    这样数据类型就是传进来的类型
  • props: { name: String, age: Number, },
    这样就会对类型进行限制
  • 还有一个更加完整的
    可以控制类型,是否必输和默认值
props: {
  name: {
    type: String,
    required: true,
  },
  age: {
    type: Number,
    default: 999,
  },
},

props的优先级高于data
当我们想更改传过来的数据时,是不允许直接修改props内数据
所以可以再定义一个变量存放这个数据,再根据需求进行更改

data(){
	return {
		myName:this.name
	}
}
props:{
	name: String,
  	age: Number,
}

mixin 混入/混合

可以把多个组件共用的配置提取成一个混入对象

定义混合

创建一个js脚本,名称可以随便取，这里就用mixin了，里面可以配置所有组件可配置的属性

// mixin.js
// 分别暴露
export const mix = {
  data() {
    return {
      sex: "girl",
    };
  },
  mounted() {
    console.log("你好啊，我是mixin");
  },
};

局部混合

组件中引用

import { mix } from "../mixin.js";
export default {
  mixins: [mix],
};

直接就可以在组件里使用了

<h2>i am a {{ sex }}</h2>

组件和混入数据冲突时，会优先使用组件数据
声明周期钩子函数冲突时，如两边都定义了mounted，那都会执行, 混合的先执行

模块化小知识
export default xxx 是默认暴露，引用时是import xxx from "xxx"
export const xxx = {} 是分别暴露，引用是是import {xxx} from "xxx"

全局混合

在main.js中引入混合并配置

import { mix } from "./mixin.js"; //引入混合
Vue.mixin(mix); //全局混合

这样所有组件都不需要在引入，直接就可以只用混合的内容

插件

用于增强Vue，添加一些全局使用的功能
本质：包含install方法的一个对象，install的第一个参数是Vue（Vue构造函数），之后的参数是插件使用者传递的数据

定义插件（一般命名为plugins.js）
里面必须写install方法，默认参数是Vue构造函数

// 插件
const obj = {
  // 固定钩子函数
  install(Vue) {
  //install(Vue, author) { //接收多个参数
    console.log("我是衩件儿", Vue);
    // 这里就可以对Vue进行各种操作
    // Vue.directives() 自定义指令
    // Vue.mixin() 混入
    // Vue.prototype.$myMthod = function{...} //添加实例方法
    // 等等...
  },
};
// 默认暴露
export default obj;

在main.js引入并使用插件

import plugins from "./plugins"; //引入插件

Vue.use(plugins); //使用插件
// Vue.use(plugins, "Cai"); //使用插件 添加参数 可多个

这样所有组件都可以使用插件里配置的东西了
相当于外挂

scoped样式

作用是让样式在局部生效，防止冲突
<style scoped>

所有组件写的样式最终都是会汇总到一起的，这就导致了相同类名的样式会互相影响
后引用的组件会覆盖前面引用的组件的样式
这时可以给style标签加上scoped标记，就可以让这个样式只服务于当前组件

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

怎么做到的？
其实就是编译时会给每一个容器添加一个随机生成的属性
在通过属性选择器来绑定样式
在这里插入图片描述
在这里插入图片描述

安装less-loader

如果想用less写样式，会发现报错说需要安装less-loader
而当我们用npm install less-loader会报错，是因为版本兼容的问题
可以看到我们的脚手架用的webpack版本是4.47，而用npm view webpack versions命令可以查看最新版本是5.88
在这里插入图片描述
而less-laoder的最新版本适用于webpack5.x，所以直接安装最新版本就会有问题，所以要选择低一些的版本，推荐的是7.x
使用命令npm i less-loader@7 安装完成

浏览器的本地存储 webStorage

不必借助Vue

  • 存储内容大小一般支持5MB左右（不同浏览器不同）

localStroage 本地存储

本地存储的数据关闭浏览器后不会丢失
只有当用户执行remove或clear 或者 进行清缓存操作才会失去数据

存储的键值对都必须是string类型，如不是会自动转化

<h2>localStorage</h2>
<button onClick="saveData()">点我保存数据</button>
<button onClick="readData()">点我读取数据</button>
<button onClick="deleData()">点我删除数据</button>
<button onClick="deleAllData()">点我清空数据</button>


<script type="text/javascript">
    function saveData(){
        let obj = {name:'cai',age:'18'}
        // 存储数据
        localStorage.setItem("msg",JSON.stringify(obj))
    }

    function readData(){
        // 读取数据
        // 读取不到数据返回null JSON.parse(null)还是null
        let obj = localStorage.getItem("msg")
        console.log(JSON.parse(obj));
    }

    function deleData(){
        // 删除数据
        localStorage.removeItem("msg")
    }

    function deleAllData(){
        // 清空数据
        localStorage.clear()
    }
</script>

在这里插入图片描述

sessionStorage 会话存储

关闭浏览器窗口后数据就会被清理

和localStorage的api完全一样就是把localStorage改为sessionStorage

// sessionStorage
function saveData(){
    let obj = {name:'cai',age:'18'}
    // 存储数据
    sessionStorage.setItem("msg",JSON.stringify(obj))
}

function readData(){
    // 读取数据
    // 读取不到数据返回null JSON.parse(null)还是null
    let obj = sessionStorage.getItem("msg")
    console.log(JSON.parse(obj));
}

function deleData(){
    // 删除数据
    sessionStorage.removeItem("msg")
}

function deleAllData(){
    // 清空数据
    sessionStorage.clear()
}

组件自定义事件

一种组件间的通信方式，适用于：子组件 ===> 父组件

绑定

子组件给父组件传递数据之前学的是通过props父组件传给子组件一个函数，子组件通过调用函数并传参给父组件传递数据
还有一种就是组件自定义事件

父组件绑定自定义事件

<HelloWorld
 v-on:getStudentName="showStudentName"
  name="Qiu"
  :age="20"
></HelloWorld>
<!--简写@getStudentName="showStudentName"-->

另一种绑定自定义事件方法（灵活性强）

mounted() {
  // 绑定组件自定义事件
  this.$refs.hw.$on("getStudentName", this.showStudentName);
},

父组件实现响应方法

showStudentName(name) {
  alert(name);
},

子组件触发自定事件

this.$emit("getStudentName", this.name);

有个一需要注意的点
当我们在父组件绑定自定义事件时这样写
将子组件传来的数据赋值到父组件的数据上

this.$refs.hw.$on("getStudentName", function (name) {
  alert(name);
  this.studentName = name;
});

这样不对，因为this.studentName中的this指向的是子组件实例对象，谁触发的函数this指向谁
而当我们把响应方法放到methods中是，vue的规则是普通函数中的this均指向当前实例对象（高优先级）
所以上面改成箭头函数就可以了

解绑

除了组件或上级被销毁时自定义事件会一起被销毁
有时需求可能需要保留组件条件下主动解绑事件
子组件解绑自定义事件

this.$off("getStudentName"); //解绑一个自定义事件
this.$off(["getStudentName"]); //解绑多个自定义事件
this.$off(); //解绑所有自定义事件

组件绑定原生事件

<HelloWorld @click="showStudentName" :name="Tiger"></HelloWorld>

直接这样写，点击组件是不会触发事件的
因为vue人为click是一个自定义事件，但并没有被触发

<HelloWorld @click.native="showStudentName" :name="Tiger"></HelloWorld>

而添加了native修饰符，就会把事件添加给组件的根元素，就会正常触发点击事件

全局事件总线 GlobalEventBus

一种组件间通信的方式，适用于任意组件间通信

安装

这个总线需要满足两个条件

  1. 能被所有组件获取到
  2. 能调用自定义事件方法

还记不记得VueComponent.prototype.__proto__ === Vue.prototype
Vue.prototype上的数据，所有vc都可以拿到
而vm可以调用自定义事件方法

// main.js
new Vue({
  render: (h) => h(App), //将App组件放入容器中
  // render(createElement) {
  //   return createElement(App);
  // },
  // template: `<App></App>`,
  // components: { App },

  beforeCreate() {
    Vue.prototype.$bus = this; //安装全局事件总线
  },
}).$mount("#app"); //绑定模板

绑定事件 接收数据

记得要解绑，如不解绑即使组件被销毁$bus依然存在，事件就会越来越多
也不能直接this.&bus.%off()解绑，会把所有&bus上的事件都解除

//Student.vue
mounted() {
  this.$bus.$on("hello", (name) => {
    console.log("这里是Student组件，我收到了数据：", name);
  });
},
beforeDestroy() {
  this.$bus.$off("hello");
},

触发事件 传递数据

//HelloWorld.vue
this.$bus.$emit("hello");

消息订阅与发布 pubsub

一种组件间通信的方式，适用于任意组件间通信

pubsub （publish subscribe）是一个js第三方库，用于实现订阅发布模式
其实和自定义事件效果是一样的，一般还是用自定义事件

安装pubsub-js
npm i pubsub-js

订阅

//HelloWorld.vue
// 引入
import pubsub from "pubsub-js";
mounted() {
   // 订阅消息
   this.pubId = pubsub.subscribe("yoyo", function (magName, data) {
     console.log("有人发布了yoyo消息，回调执行了", magName, data);
   });
},

要记得解除订阅

//HelloWorld.vue
beforeDestroy(){
  pubsub.unsubscribe(this.pubId)
}

发布

// Student.vue
pubsub.publish("yoyo", 12);

输出
在这里插入图片描述

$nextTick

有一个需求是，显示一段文字，有一个编辑按钮，点击后展示可编辑文本框并获取焦点，文本框失去焦点显示文本
正常写就是

<div class="left">
<input
  v-show="isEdit"
  ref="inputText"
  type="text"
  v-model="inputContent"
  @blur="blurInput"
/>
<span v-show="!isEdit">{{ inputContent }}</span>
</div>
<button @click="focusInput">编辑</button>

focusInput() {
  this.isEdit = true;
  this.$refs.inputText.focus();
},

blurInput() {
  this.isEdit = false;
},

但效果如下，点击后展示了编辑文本框，但是没有获取焦点，需要再次点击文本框或编辑按钮
在这里插入图片描述
这是因为点击编辑按钮后，先执行了this.isEdit = true;后接着执行this.$refs.inputText.focus();注意此时并没有重新解析模板，文本框还是隐藏状态，所以此时focus并没有效果
怎么解决呢
就要用到$nextTick,

$nextTick指定的回调会在DOM更新之后再执行

focusInput函数改为
（箭头函数或普通函数中this都是指向vc）

focusInput() {
  this.isEdit = true;
  this.$nextTick(function () {
    console.log(this);
    this.$refs.inputText.focus();
  });
},

transition

可以看官网文档

作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
写法：
1.准备好样式

  • 元素进入的样式
    1）v-enter：进入的起点
    2）v-enter-active：进入过程中
    3）v-enter-to：进入的终点
  • 元素离开的样式
    1）v-leave：离开的起点
    2）v-leave-active：离开过程中
    3）v-leave-to：离开的终点
  1. 使用<transition>包裹要过渡的元素，并配置name属性
    备注：若有多个元素需要过渡，则需要使用<transition-group>，且每个元素都要指定key值

动画效果

希望效果如下（不知道为啥录制有灰块）
在这里插入图片描述
用<transition></transition>标签包裹需要展示动画的部分，就会在合适的时候加上对应名称的样式
样式名称是固定的，如果transition没有加name那么就是v-xxx-active，如果加了name属性如<transition name="hello">那样式名称就要改为hello-xxx-active

<div class="fadeDemo">
  <button @click="isShow = !isShow">显示/隐藏</button>
  <transition>
    <h1 v-show="isShow">Hello World</h1>
  </transition>
</div>

样式

/* 渐入动画 */
@keyframes fade {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
/* 展示后激活样式 */
.v-enter-active {
  animation: fade 1s;
}
/* 隐藏前激活样式 */
.v-leave-active {
  animation: fade 1s reverse;
}

过渡效果

希望效果同上

<div class="transitionDemo">
  <h2>过渡效果</h2>
  <button @click="isShow2 = !isShow2">显示/隐藏</button>
  <transition name="trans">
    <h1 v-show="isShow2" class="trans-h1">Hello World</h1>
  </transition>
</div>

.trans-h1 {
  /* 需要配置时间 */
  transition: 0.5s;
}
/* 过渡起点 */
.trans-enter {
  transform: translateX(-100%);
}
/* 过渡终点 */
.trans-enter-to {
  transform: translateX(0);
}
.trans-leave {
  transform: translateX(0);
}
.trans-leave-to {
  transform: translateX(-100%);
}

其实也可以简写，将进入的终点和离开的起点整合，进入的起点和离开的重点整合

.trans-enter,
.trans-leave-to {
  transform: translateX(-100%);
}

.trans-enter-to,
.trans-leave {
  transform: translateX(0);
}

transition-group

就是可以包裹多个元素，但元素上必须有key
文档

集成第三方动画

一个第三方动画库 Animate.css
怎么用呢↓

安装： npm install animate.css --save
引入： import 'animate.css';
使用： 在网站右侧找想要的动画效果，配置在代码里

<transition
  name="animate__animated animate__bounce"
  enter-active-class="animate__backInLeft"
  leave-active-class="animate__backOutRight"
>
  <h1 v-show="isShow3" class="trans-h1">Hello World</h1>
</transition>

下一篇：Vue中的ajax

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SQLServer 为角色开视图SELECT权限，报错提示需要开基础表权限

SQLServer 为角色开视图SELECT权限，报错提示需要开基础表权限

问题&#xff1a; 创建了个视图V&#xff0c;里面包含V库的a表&#xff0c;和T库的b表 为角色开启视图V的SELECT权限&#xff0c;提示T库的b表无SELECT权限&#xff0c;报错如下 解决方案&#xff1a; ①在T库建个视图TV&#xff0c;里面包含b表&#xff08;注意是在b表的对…
阅读更多...
【Qt 学习之路】关于C++ Vlc视频播放

【Qt 学习之路】关于C++ Vlc视频播放

文章目录 1、简介2、效果2.1、视频2.2、动态图 3、核心代码3.1、判断视频3.2、视频核心类调用3.3、视频核心类3.3.1、头文件3.3.2、源文件 1、简介 最近有童鞋咨询VLC相关的问题&#xff0c;公布一个 5年前 编写的 VLC示例 代码供参考学习。包括正常对视频各种常用的操作&…
阅读更多...
微信小程序快速入门03

微信小程序快速入门03

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java项目分享》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、生命周期生…
阅读更多...
【Java数据结构】04-图（Prim,Kruskal,Dijkstra,topo）

【Java数据结构】04-图（Prim,Kruskal,Dijkstra,topo）

5 图 推荐辅助理解 【视频讲解】bilibili Dijkstra Prim 【手动可视化】Algorithm Visualizer &#xff08;https://algorithm-visualizer.org/&#xff09; 【手动可视化】Data Structure Visualizations (https://www.cs.usfca.edu/~galles/visualization/Algorithms.ht…
阅读更多...
基于k8s Deployment的弹性扩缩容及滚动发布机制详解

基于k8s Deployment的弹性扩缩容及滚动发布机制详解

k8s第一个重要设计思想&#xff1a;控制器模式。k8s里第一个控制器模式的完整实现&#xff1a;Deployment。它实现了k8s一大重要功能&#xff1a;Pod的“水平扩展/收缩”&#xff08;horizontal scaling out/in&#xff09;。该功能从PaaS时代开始就是一个平台级项目必备编排能…
阅读更多...
cookie和session的工作过程和作用：弥补http无状态的不足

cookie和session的工作过程和作用：弥补http无状态的不足

cookie是客户端浏览器保存服务端数据的一种机制。当通过浏览器去访问服务端时&#xff0c;服务端可以把状态数据以key-value的形式写入到cookie中&#xff0c;存储到浏览器。浏览器下次去服务服务端时&#xff0c;就可以把这些状态数据携带给服务器端&#xff0c;服务器端可以根…
阅读更多...
OceanBase架构概览

OceanBase架构概览

了解一个系统或软件&#xff0c;比较好的一种方式是了解其架构&#xff0c;下图是官网上的架构图&#xff0c;基于V 4.2.1版本 OceanBase 使用通用服务器硬件&#xff0c;依赖本地存储&#xff0c;分布式部署在多个服务器上&#xff0c;每个服务器都是对等的&#xff0c;数据库…
阅读更多...
如何画出优秀的系统架构图-架构师系列-学习总结

如何画出优秀的系统架构图-架构师系列-学习总结

--- 后之视今&#xff0c;亦犹今之视昔&#xff01; 目录 早期系统架构图 早期系统架构视图 41视图解读 41架构视图缺点 现代系统架构图的指导实践 业务架构 例子 使用场景 画图技巧 客户端架构、前端架构 例子 使用场景 画图技巧 系统架构 例子 定义 使用场…
阅读更多...
Keepalived 双机热备

Keepalived 双机热备

本章主要内容&#xff1a; Keepalived 双机热备基础知识学会构建双机热备系统学会构建LVSHA 高可用群集 简介 在这个高度信息化的IT时代&#xff0c;企业的生产系统&#xff0c;业务运营&#xff0c;销售和支持&#xff0c;以及日常管理等环节越来越依赖于计算机和服务&#…
阅读更多...
class_1:qt的安装及基本使用方式

class_1:qt的安装及基本使用方式

一、选择组件&#xff1a; 1、windows编译工具&#xff1a;MinGW 7.30 32-bit MinGW 7.30 64-bit 2、QT源代码&#xff1a;sources 3、QT的绘图模块&#xff1a;QT charts 4、QT虚拟键盘&#xff1a;QT Virtual Keyboard 5、QT Creational 4.12.2 GDB 二、新建QT项目 文…
阅读更多...
【MATLAB】 HANTS滤波算法

【MATLAB】 HANTS滤波算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 1 基本定义 HANTS滤波算法是一种时间序列谐波分析方法&#xff0c;它综合了平滑和滤波两种方法&#xff0c;能够充分利用遥感图像存在时间性和空间性的特点&#xff0c;将其空间上的分布规律和时间上的变化规律联系起来…
阅读更多...
构建 Maven 项目时可能遇到的问题

构建 Maven 项目时可能遇到的问题

文章目录 构建 Maven 项目时可能遇到的问题1. Maven 自动下载依赖后&#xff0c;在本地仓库中找不到2. 运行时报错如下&#xff1a;Error: java 不支持发行版本 53. 创建 Maven 项目后 pom.xml 文件为空4. 在 Settings 中 Update 了阿里云远程仓库&#xff0c;导致整个项目不能…
阅读更多...
美国智库发布《用人工智能展望网络未来》的解析

美国智库发布《用人工智能展望网络未来》的解析

文章目录 前言一、人工智能未来可能改善网络安全的方式二、人工智能可能损害网络安全的方式三、人工智能使用的七条建议四、人工智能的应用和有效使用AI五、安全有效地使用人工智能制定具体建议六、展望网络未来的人工智能&#xff08;一&#xff09;提高防御者的效率&#xff…
阅读更多...
数据结构学习 jz29 顺时针打印矩阵

数据结构学习 jz29 顺时针打印矩阵

关键词&#xff1a;模拟 题目&#xff1a;螺旋遍历二维数组 简单题做了超过40分钟 调了很久 不好 方法一&#xff1a; 我自己做的。 思路&#xff1a; xy_t&#xff1a; 记录xy的方向&#xff0c;往右走&#xff0c;往下走&#xff0c;往左走&#xff0c;往上走 t控制方…
阅读更多...
算法第十八天-打家劫舍Ⅱ

算法第十八天-打家劫舍Ⅱ

打家劫舍Ⅱ 题目要求 解题思路 [打家劫舍Ⅱ]是说两个相邻的房间不能同时偷&#xff0c;并且首尾两个房间是相邻的&#xff08;不能同时偷首尾房间&#xff09;明显是基于[打家劫舍Ⅰ]做的升级。[打家劫舍Ⅰ]也是说两个相邻的房间不能同时偷&#xff0c;但是首尾房间不是相邻的…
阅读更多...
Java多线程基础：虚拟线程与平台线程解析

Java多线程基础：虚拟线程与平台线程解析

在这篇文章中&#xff0c;主要总结一些关于线程的概念&#xff0c;以及更近期的名为虚拟线程的特性。将了解平台线程和虚拟线程在性质上的区别&#xff0c;以及它们如何促进应用程序性能的改进 经典线程背景&#xff1a; 让我们以调用外部API或某些数据库交互的场景为例&…
阅读更多...
JVM篇--Java内存区域高频面试题

JVM篇--Java内存区域高频面试题

java内存区域 1 Java 堆空间及 GC&#xff1f; 首先我们要知道java堆空间的产生过程&#xff1a; 即当通过java命令启动java进程的时候&#xff0c;就会为它分配内存&#xff0c;而分配内存的一部分就会用于创建堆空间&#xff0c;而当程序中创建对象的时候 就会从堆空间来分…
阅读更多...
918. 环形子数组的最大和

918. 环形子数组的最大和

参考题解&#xff1a;https://leetcode.cn/problems/maximum-sum-circular-subarray/solutions/1152143/wo-hua-yi-bian-jiu-kan-dong-de-ti-jie-ni-892u/ class Solution {public int maxSubarraySumCircular(int[] nums) {int n nums.length;int sum nums[0], minSum nums…
阅读更多...
【目标跟踪】跨相机如何匹配像素

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…
阅读更多...
快速入门Java NIO（Not I/O）的网络通信框架--Netty

快速入门Java NIO（Not I/O）的网络通信框架--Netty

Netty 入门 了解netty前需要对nio有一定认识,该笔记基础来自bilinbili黑马,在此基础上自己学习的笔记,添加了一些自己的理解 了解java 非阻塞io编程 1. 概述 1.1 Netty 是什么&#xff1f; Netty is an asynchronous event-driven network application framework for rapid …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站