Vue基础9之脚手架的使用、ref属性、props配置项和mixin混入

news2024/10/6 6:45:49

Vue基础9

  • 使用Vue脚手架
    • 初始化脚手架
      • 说明
      • 具体步骤
      • 项目文件介绍
      • 将前面写好的单文件组件放入这里运行
      • 脚手架文件结构
    • render的作用
    • 修改默认配置
  • 配置项
    • ref属性
    • props配置项
      • 简单的传值方法
        • 默认的字符串传值
        • 使用v-bind对数字类型进行传值
      • 限制数据类型
        • 接收数据时候只对数据类型进行限制
        • 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
      • 对传入的值进行修改
      • 总结
    • mixin(混入)
      • 局部混入
      • 全局引入混合
      • 总结

使用Vue脚手架

初始化脚手架

说明

  1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。
  2. 脚手架一般都使用最新版本，这与Vue版本是不一样的概念。
  3. 开发文档

具体步骤

  1. （仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

  1. 切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

  1. 启动项目

npm run serve

备注：
1.如出现下载缓慢请配置 npm 淘宝镜像： npm config set registry https://registry.npm.taobao.org
2.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行：vue inspect > output.js
3.使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

配置淘宝镜像、安装vue脚手架
请添加图片描述
安装成功提示
请添加图片描述
创建vue项目
在这里插入图片描述
选择Vue版本
在这里插入图片描述
项目创建成功
在这里插入图片描述
进入项目、启动项目：
在这里插入图片描述

项目文件介绍

  1. 文件目录介绍
    在这里插入图片描述
  2. package.json文件
    在这里插入图片描述
  3. main.js
    在这里插入图片描述
  4. assests文件
    在这里插入图片描述
  5. 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">
     <!--      配置页签图标-->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <!--    配置网页标题-->
     <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>

将前面写好的单文件组件放入这里运行

在这里插入图片描述

  1. App.vue
<template>
  <div id="app">
    <MyStudent></MyStudent>
    <MySchool></MySchool>
  </div>
</template>

<script>
import MyStudent from './components/MyStudent.vue';
import MySchool  from './components/MySchool';

export default {
  name: 'App',
  components: {
    MyStudent,
    MySchool,
  }
}
</script>
  1. MyStudent.vue
<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
    export default {
        name: "MyStudent",
      data(){
          return{
            name:"张三",
            age:15,
          }
      }
    }
</script>
  1. MySchool.vue
<template>
  <div class="root">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <h2><button @click="showTip">点我提示学校名</button></h2>
  </div>
</template>

<script>
export default {
  name: 'MySchool',
  data() {
    return {
      name:"幸福中学",
      address:"重庆市"
    }
  },
  methods:{
    showTip(){
      alert(this.name)
    }
  }
}
</script>

<style scoped>
.root{
  background-color: pink;
}
</style>
  1. 文件目录
    在这里插入图片描述

脚手架文件结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

render的作用

在这里插入图片描述
引用运行时的版本时，template模板解析器无法被解析，有两种方法可以执行成功。第一，使用render，第二，使用完整版的vue；

render的完整书写格式：

new Vue({
	render(createElement){
		return createElement(App);
	}
})

render的简写即为上方默认给的样子

关于不同版本的Vue：

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

修改默认配置

修改默认配置在vue.config.js文件中，官方给出可以修改的配置项 官方可以修改配置链接

example：

  1. 将main.js从重命名为peiqi.js
  2. 创建一个和package.json同级的vue.config.js文件，在文件中的pages的index的entry项目中修改路径为src/peiqi.js，重新运行一下，就成功了。
    在这里插入图片描述
    exam2：关闭语法检查

lintOnSave: false, //关闭语法检查

和pages同级

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages:{
    index:{
      //入口
      entry: 'src/main.js'
    }
  },
  lintOnSave: false,  //关闭语法检查
})

配置项

ref属性

MySchool：

<template>
  <div>
    <h2 ref="schoolName">学校名称：{{name}}</h2>
    <h2 ref="schoolAddress">学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
  name: "MySchool",
  data(){
    return{
      name:'幸福中学',
      address:"重庆",
    }
  },
}
</script>

<style scoped>
  div{
    background-color: #888;
  }
</style>

App.vue：

<template>
  <div>
    <h2 v-text="msg" ref="title"></h2>
    <button ref="btn" @click="showDom">点我输出Dom元素</button>
    <MySchool ref="school"/>
  </div>
</template>

<script>
import MySchool from "@/components/MySchool";
export default {
  name: "App",
  data(){
    return{
      msg:'欢迎学习Vue',
    }
  },
  components: {MySchool},
  methods:{
    showDom() {
      console.log(this.$refs.title)  //真实dom
      console.log(this.$refs.btn)   //真实dom
      console.log(this.$refs.school)  //MySchool组件实例对象（vc）
    }
  }
}
</script>

在这里插入图片描述

在这里插入图片描述
ref属性：

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式
    打标识：<h1 ref=“xxx”>…</h1> 或 <School ref=“xxx”></School>
    获取：this.$refs.xxx

props配置项

简单的传值方法

默认的字符串传值

MyStudent.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
  name: "MyStudent",
  data(){
      return {
        msg:'欢迎学习Vue'
      }
  },
  props:['name','sex','age']    //简单的传值方法
}
</script>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>

  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
export default {
  name: "App",
  components: {MyStudent},
}
</script>

在这里插入图片描述

使用v-bind对数字类型进行传值

MyTeacher.vue

<template>
  <div>
    <h1 v-text="msg"></h1>
    <h2>老师姓名：{{name}}</h2>
    <h2>老师性别：{{sex}}</h2>
    <h2>老师年龄：{{age+1}}</h2>
  </div>
</template>

<script>
    export default {
        name: "MyTeacher",
      data(){
          return{
            msg:"欢迎来学习Vue"
          }
      },
      props:['name','sex','age']
    }
</script>

<style scoped>

</style>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
export default {
  name: "App",
  components: {MyTeacher, MyStudent},
}
</script>

在这里插入图片描述
在这里插入图片描述

限制数据类型

接收数据时候只对数据类型进行限制

MyMother

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>妈妈的名字：{{name}}</h2>
    <h2>妈妈的年龄：{{age}}</h2>
    <h2>妈妈的生肖：{{zodiac}}</h2>
  </div>
</template>

<script>
export default {
  name: "MyMother",
  data(){
    return{
      msg:'欢迎光临我的家'
    }
  },
  //接收的同时对数据进行类型限制
  props:{
    name:String,
    zodiac:String,
    age:Number
  }
}
</script>

App.vue：

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
    <hr>
    <MyMother name="王华" zodiac="虎" :age="45+1"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
import MyMother from "@/components/MyMother";
export default {
  name: "App",
  components: {MyMother, MyTeacher, MyStudent},
}
</script>

在这里插入图片描述

接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

MyFather.vue:

   <template>
<div>
  <h1>{{msg}}</h1>
  <h2>爸爸的名字：{{name}}</h2>
  <h2>爸爸的年龄：{{age}}</h2>
  <h2>爸爸的生肖：{{zodiac}}</h2>
</div>
</template>

<script>
export default {
  name: "MyFather",
  data(){
    return{
      msg:"欢迎光临我的家庭"
    }
  },
  //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
  props:{
    name:{
      type:String,  //name是字符串类型
      required:true, //name是必要的
    },
    age:{
      type:Number,
      default:55,  //默认值
    },
    zodiac:{
      type:String,
      required: true,
    }
  }
}
</script>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
    <hr>
    <MyMother name="王华" zodiac="虎" :age="45+1"/>
    <hr>
    <MyFather name="李四" zodiac="鼠" :age="50" />
    <hr>
    <MyFather name="李四" zodiac="鼠"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
import MyMother from "@/components/MyMother";
import MyFather from "@/components/MyFather";
export default {
  name: "App",
  components: {MyFather, MyMother, MyTeacher, MyStudent},
}
</script>

在这里插入图片描述

对传入的值进行修改

MyDaughter.vue

<template>
<div>
  <h1>{{msg}}</h1>
  <h2>女儿的名字：{{name}}</h2>
  <h2>女儿的年龄：{{MyAge}}</h2>
  <button @click="addAge">点我给女儿的年龄+1</button>
</div>
</template>

<script>
    export default {
        name: "MyDaughter",
        data(){
          return{
            msg:"欢迎你的到来~",
            MyAge:this.age
          }
        },
        props:{
          name:{
            type:String,
            required:true,
          },
          age:{
            type:Number,
            default:10
          }
        },
      methods:{
        addAge(){
          this.MyAge++;
        }
      }
    }
</script>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
    <hr>
    <MyMother name="王华" zodiac="虎" :age="45+1"/>
    <hr>
    <MyFather name="李四" zodiac="鼠" :age="50" />
    <hr>
    <MyFather name="李四" zodiac="鼠"/>
    <hr>
    <MyDaughter name="小好" :age="12"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
import MyMother from "@/components/MyMother";
import MyFather from "@/components/MyFather";
import MyDaughter from "@/components/MyDaughter";
export default {
  name: "App",
  components: {MyDaughter, MyFather, MyMother, MyTeacher, MyStudent},
}
</script>

在这里插入图片描述

总结

配置项props功能：让组件接收外部传过来的数据
（1）传递数据：
<Demo name=“xxx” />
（2）接收数据
第一种方式（只接收）：
props:[‘name’]
第二种方式（限制类型）：
props:{
name:String
}
第三种方式（限制类型、限制必要性、指定默认值）
props:{
name:{
type:String, //类型
required:true, //必要性
default:‘老王’, //默认值
}
}

备注：
props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin(混入)

局部混入

在这里插入图片描述
mixin.js：

export const mixin={
    methods:{
        showMsg(){
            alert(this.name)
        }
    },
    data(){
        return{
            x:'123',
            y:456
        }
    }
}

export const mixin1={
    mounted(){
        console.log("你好啊~~~")
    }
}

MyFriend.vue:

<template>
<div>
  <h2 @click="showMsg">朋友的名字是：{{name}}</h2>
  <h2>朋友的年龄是：{{age}}</h2>
</div>
</template>

<script>
import {mixin,mixin1} from "@/mixin";

export default {
  name: "MyFriend",
  data(){
    return{
      name:"小芳",
      age:26
    }
  },
  mixins:[mixin,mixin1]
}
</script>

MySon:

<template>
<div>
  <h2 @click="showMsg">儿子的名字是：{{name}}</h2>
  <h2>儿子的年龄是：{{age}}</h2>
</div>
</template>

<script>
import {mixin,mixin1} from "@/mixin";

export default {
  name: "MySon",
  data(){
    return{
      name:"小王",
      age:15
    }
  },
  mixins:[mixin,mixin1]
}
</script>

App.vue

<template>
  <div>
    <MySon />
    <MyFriend />
  </div>
</template>

<script>
import MySon from "@/components/MySon";
import MyFriend from "@/components/MyFriend";
export default {
  name: "App",
  components: {MyFriend, MySon},
}
</script>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

全局引入混合

main.js:

import Vue from 'vue'

import App from './App'
//引入混合
import {mixin,mixin1} from "@/mixin";

Vue.config.productionTip = false
//全局引入混合
Vue.mixin(mixin)
Vue.mixin(mixin1)

new Vue({
    el:"#app",
    render: h=>h(App)
})

MyGrandma.vue

<template>
<div>
  <h2 @click="showMsg">祖母的名字是：{{name}}</h2>
  <h2>祖母的年龄是：{{age}}</h2>
</div>
</template>

<script>
export default {
  name: "MyGrandma",
  data(){
    return{
      name:"肖藏",
      age:74
    }
  }
}
</script>

MyGrandpa.vue

<template>
  <div>
    <h2 @click="showMsg">祖父的名字：{{name}}</h2>
    <h2>祖父的年龄：{{age}}</h2>
  </div>
</template>

<script>
    export default {
        name: "MyGrandpa",
      data(){
          return{
            name:"李明",
            age:78
          }
      }
    }
</script>

<style scoped>

</style>

App.vue:

<template>
  <div>
    <MyGrandma/>
    <MyGrandpa />
  </div>
</template>

<script>
import MyGrandma from "@/components/MyGrandma";
import MyGrandpa from "@/components/MyGrandpa";

export default {
  name: "App",
  components: {MyGrandpa, MyGrandma},
}
</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

mixin（混入）：
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：
{
data(){…},
methods:{…}
…
}
第二步使用混入，例如：
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:[‘xxx’]

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

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

相关文章

Java 搜索二维矩阵 II

Java 搜索二维矩阵 II

搜索二维矩阵 II中等编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a;每行的元素从左到右升序排列。每列的元素从上到下升序排列。示例 1&#xff1a;输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22]…
阅读更多...
v-model表单

v-model表单

1、v-model的基本使用 表单提交是开发中非常常见的功能&#xff0c;也是和用户交互的重要手段&#xff1a; 比如用户在登录、注册时需要提交账号密码&#xff1b;比如用户在检索、创建、更新信息时&#xff0c;需要提交一些数据&#xff1b; 这些都要求我们可以在代码逻辑中获…
阅读更多...
【GD32F427开发板试用】+软件IIC（OLED显示）

【GD32F427开发板试用】+软件IIC（OLED显示）

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;四季的温度 gitee开源地址https://gitee.com/sijiwendu/gd32-f427-v/tree/master/module/oled 上一次完成DHT11开发文章https://aijishu.com/a…
阅读更多...
什么是EDA？常见的EDA工具有哪些？

什么是EDA？常见的EDA工具有哪些？

大家都知道&#xff0c;芯片设计难度非常大&#xff0c;要把上千亿颗晶体管集成在面积不到指甲盖大小的芯片上。其实能实现这样目标所以靠的是电子设计自动化&#xff08;Electronics Design Automation&#xff09;工具&#xff0c;也就是我们所称的EDA工具。 什么是EDA&…
阅读更多...
从零搭建SpringCloud服务

从零搭建SpringCloud服务

一.微服务基础1.什么是SpringCloud&#xff1f;SpringCloud官网&#xff1a;https://spring.io/projects/spring-cloud&#xff08;个人建议是用谷歌浏览器访问官网打开中文翻译粗略把官网读一遍&#xff09;个人理解&#xff1a;以前的服务器就好像&#xff0c;一个会语数外全…
阅读更多...
Elasticsearch：从实例中学习 nested 数据类型的 CRUD 及搜索

Elasticsearch：从实例中学习 nested 数据类型的 CRUD 及搜索

nested 数据类型是一个比较高级的话题。在本文中&#xff0c;将介绍 Elasticsearch 中针对嵌套对象的一些高级 CRUD 和搜索查询。 如果你想了解有关 Elasticsearch 基础知识的更多信息&#xff0c;可以查看这些文章以快速入门或复习&#xff1a; Elasticsearch&#xff1a;关于…
阅读更多...
koa-router 正解

koa-router 正解

Koa-Router 之前分析过 Koa/ Koa-Bodyparser 的源码&#xff0c;今天让我们来分析下koa-router的源码&#xff0c;这个插件其实还是挺重要的。毕竟作为路由&#xff0c;我们还是要知道他的工作原理 这里会重申下 其实我是分析了 koa-router 主干流程。一些小众类的方法并没有看…
阅读更多...
多步骤复杂 SQL 优化实例

多步骤复杂 SQL 优化实例

问题先看数据&#xff1a;deliver 表是主表&#xff0c;一个客户会发生多次投递行为&#xff1a;deliverItem 表是从表&#xff0c;一个投递行为有多个投递项&#xff0c;delivered 是投递状态&#xff08;1 表示未完成&#xff0c;2 表示投递完成&#xff09;&#xff1a;需求…
阅读更多...
如何了解一个软件的设计？

如何了解一个软件的设计？

刚入职&#xff0c;接手新项目&#xff0c;面对一个全新项目&#xff0c;怎么快速研究它&#xff1f; 很多人直接看源码&#xff0c;一头扎入代码&#xff0c;很快就迷失其中&#xff0c;最初那股子探索精神&#xff0c;也会逐渐被迷茫所替。有多少次你满怀激情打开一个开源项…
阅读更多...
极光推送REST API与Java后台对接

极光推送REST API与Java后台对接

极光推送官网的web推送页面 因为是对接它的api&#xff0c;所以我参照这这个样式实现了一个&#xff0c;效果如下&#xff1a; 定时任务推送界面&#xff0c;可定制。实现了推送一次和每日定时推送&#xff0c;如果再扩展的话有每周、每月的功能&#xff0c;只是没有这个业务…
阅读更多...
银行数字化转型导师坚鹏：银行数字化转型的五大痛点

银行数字化转型导师坚鹏：银行数字化转型的五大痛点

首先从汇丰银行业绩持续下滑谈起&#xff0c;汇丰银行作为一家国际知名的全球性银行&#xff0c;最近10年左右的时间里&#xff0c;营业收入持续下降&#xff0c;已经从2008年的1400多亿美元到2021年的804.29亿美元; 净利润徘徊不前,2021年比2020年下降29.2%&#xff0c;仅为52…
阅读更多...
kafka心得记录

kafka心得记录

1.为何引入kafka? 削峰填谷,主要还是为了应对上游瞬时大流量的冲击&#xff0c;避免出现流量毛刺现象&#xff0c;保护下游应用和数据库不被大流量打垮。 2.kafka备份机制&#xff0c;主从机制&#xff0c;Leader-Follower&#xff1a; Kafka 定义了两类副本&#xff1a;领导…
阅读更多...
C语言文件操作函数详解——将你的代码永久化 ( •̀ ω •́ )✧

C语言文件操作函数详解——将你的代码永久化 ( •̀ ω •́ )✧

&#x1f384;博客主页&#xff1a;&#x1f390;大明超听话 &#x1f38b;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;关注✍评论 &#x1f38d;系列专栏&#xff1a;&#x1f391;从零开始C语言 &#x1f38a;从0开始数据结构与算法详解 &#x1f386;计算机考研——…
阅读更多...
JavaScript中的原型链

JavaScript中的原型链

本文作者为奇舞团前端开发工程师概述JavaScript 是 Web 的编程语言&#xff0c;简单易学&#xff0c;功能强大&#xff0c;但由于过于灵活设计理念&#xff0c;导致初学者经常一脸懵&#xff0c;本文要谈的是JavaScript中难点之一原型链。原型链的前世JavaScript的诞生要理解Ja…
阅读更多...
Nessus介绍与安装

Nessus介绍与安装

Nessus介绍与安装 1.Nessus简介 Nessus号称是世界上最流行的漏洞扫描程序&#xff0c;全世界有超过75000个组织在使用它。该工具提供完整的电脑漏洞扫描服务&#xff0c;并随时更新其漏洞数据库。Nessus不同于传统的漏洞扫描软件&#xff0c;Nessus可同时在本机或远端上遥控&…
阅读更多...
测试开发 | Dubbo 接口测试原理及多种方法实践总结

测试开发 | Dubbo 接口测试原理及多种方法实践总结

image1080478 86.9 KB 1、什么是 Dubbo&#xff1f; Dubbo 最开始是应用于淘宝网&#xff0c;由阿里巴巴开源的一款优秀的高性能服务框架&#xff0c;由 Java 开发&#xff0c;后来贡献给了 Apache 开源基金会组织。 下面以官网的一个说明来了解一下架构的演变过程&#xff0…
阅读更多...
初学Java中的方法,看这篇就够了

初学Java中的方法,看这篇就够了

本篇介绍了Java中方法的概念以及方法的使用(方法的定义和调用,实参和形参的关系).方法重载的介绍和使用,编译器如何实现方法重载- -方法签名,介绍和使用方法调用自身解决问题的技巧–递归 对比递归和循环的优缺点 掌握Java中的方法一.方法的概念及使用1.什么是方法2.方法的使用…
阅读更多...
【C++】AVL树

【C++】AVL树

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;AVL树&am…
阅读更多...
【Linux】CentOS、CentOS Stream、RedHat 和Fedora 之间的关系

【Linux】CentOS、CentOS Stream、RedHat 和Fedora 之间的关系

目录 简单说明 详细说明 红帽&#xff08;Red Hat&#xff09;系和德班&#xff08;Debian&#xff09;系 简单说明 在centos8之前&#xff1a; Fedora 》RedHat 》CentOS Fedora 是RedHat的“试验场”&#xff0c;很多新功能和特性先加入Fedora 稳定后再加入RedHat&…
阅读更多...
YOLOv5 引入 最新 BiFusion Neck | 附详细结构图

YOLOv5 引入 最新 BiFusion Neck | 附详细结构图

YOLO 社区自前两次发布以来一直情绪高涨&#xff01;随着中国农历新年2023兔年的到来&#xff0c;美团对YOLOv6进行了许多新的网络架构和训练方案改进。此版本标识为 YOLOv6 v3.0。对于性能&#xff0c;YOLOv6-N在COCO数据集上的AP为37.5%&#xff0c;通过NVIDIA Tesla T4 GPU测…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023