vue-6

news2024/12/29 9:11:48

一、声明式导航-导航链接

1.需求

实现导航高亮效果

在这里插入图片描述

如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！

2.解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)

  • 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
  • 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法： <router-link to=“path的值”>发现音乐</router-link>

  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>

3.通过router-link自带的两个样式进行高亮

使用router-link跳转后，我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a.router-link-active {
  background-color: purple;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

4.总结

  • router-link是什么？
  • router-link怎么用？
  • router-link的好处是什么？

二、声明式导航-两个类名

当我们使用<router-link></router-link>跳转时，自动给当前导航加了两个类名

在这里插入图片描述

1.router-link-active

模糊匹配（用的多）

to=“/my” 可以匹配 /my /my/a /my/b …

只要是以/my开头的路径 都可以和 to="/my"匹配到

2.router-link-exact-active

精确匹配

to=“/my” 仅可以匹配 /my

3.在地址栏中输入二级路由查看类名的添加

4.总结

  • router-link 会自动给当前导航添加两个类名，有什么区别呢？

三、声明式导航-自定义类名（了解）

1.问题

router-link的两个高亮类名 太长了，我们希望能定制怎么办

在这里插入图片描述

2.解决方案

我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

在这里插入图片描述

3.代码演示

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    ...
  ], 
  linkActiveClass: 'active', // 配置模糊匹配的类名
  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

4.总结

如何自定义router-link的两个高亮类名

四、声明式导航-查询参数传参

1.目标

在跳转路由时，进行传参

在这里插入图片描述

比如：现在我们在搜索页点击了热门搜索链接，跳转到详情页，需要把点击的内容带到详情页，改怎么办呢？

2.跳转传参

我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

  • 查询参数传参
  • 动态路由传参

3.查询参数传参

  • 如何传参？

    <router-link to=“/path?参数名=值”></router-link>

  • 如何接受参数

    固定用法：$router.query.参数名

4.代码演示

App.vue

<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>

Home.vue

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search?key=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?key=前端培训">前端培训</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

Search.vue

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取
    console.log(this.$route.query.key);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search', component: Search }
  ]
})

export default router

main.js

...
import router from './router/index'
...
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

五、声明式导航-动态路由传参

1.动态路由传参方式

  • 配置动态路由

    动态路由后面的参数可以随便起名，但要有语义

    const router = new VueRouter({
  routes: [
    ...,
    { 
      path: '/search/:words', 
      component: Search 
    }
  ]
})

  • 配置导航链接

    to=“/path/参数值”

  • 对应页面组件接受参数

    $route.params.参数名

    params后面的参数名要和动态路由配置的参数保持一致

2.代码演示

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
 
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter({
    // routes 路由规则们
    // route  一条路由规则 { path: 路径, component: 组件 }
    routes: [
        { path: '/home', component: Home },
        { path: '/search/:words', component: Search }
    ]
})

export default router;

Home.vue

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

Search.vue

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }}</p>
    <p>搜索结果:</p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyFriend",
  created() {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  },
};
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

3.查询参数传参 VS 动态路由传参

  1. 查询参数传参 (比较适合传多个参数)

  2. 跳转：to=“/path?参数名=值&参数名2=值”

  3. 获取：$route.query.参数名

  4. 动态路由传参 (优雅简洁，传单个参数比较方便)

    1. 配置动态路由：path: “/path/:参数名”
    2. 跳转：to=“/path/参数值”
    3. 获取：$route.params.参数名

    注意：动态路由也可以传多个参数，但一般只传一个

4.总结

声明式导航跳转时, 有几种方式传值给路由页面？

  • 查询参数传参（多个参数）
  • 动态路由传参（一个参数，优雅简洁）

六、动态路由参数的可选符(了解)

1.问题

配了路由 path:“/search/:words” 为什么按下面步骤操作，会未匹配到组件，显示空白？

在这里插入图片描述

2.原因

/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

const router = new VueRouter({
  routes: [
 	...
    { path: '/search/:words?', component: Search }
  ]
})

七、Vue路由-重定向

1.问题

网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白

在这里插入图片描述

2.解决方案

重定向 → 匹配 / 后, 强制跳转 /home 路径

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

4.代码演示

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
 	 ...
  ]
})

八、Vue路由-404

1.作用

当路径找不到匹配时，给个提示页面

2.位置

404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面

3.语法

path: “*” (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

4.代码示例

NotFound.vue

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js

...
import NotFound from '@/views/NotFound'
...

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
     ...
    { path: '*', component: NotFound }
  ]
})

export default router

九、Vue路由-模式设置

1.问题

路由的路径看起来不自然, 有#，能否切成真正路径形式?

  • hash路由(默认) 例如: http://localhost:8080/#/home
  • history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

2.语法

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

十、编程式导航-两种路由跳转方式

1.问题

点击按钮跳转如何实现？

在这里插入图片描述

2.方案

编程式导航：用JS代码来进行跳转

3.语法

两种语法：

  • path 路径跳转 （简易方便）
  • name 命名路由跳转 (适合 path 路径长的场景)

4.path路径跳转语法

特点：简易方便

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

5.代码演示 path跳转方式

      // 1. 通过路径的方式跳转
      // (1) this.$router.push('路由路径') [简写]
      this.$router.push('/search')

      // (2) this.$router.push({     [完整写法]
      //         path: '路由路径' 
      //     })
      this.$router.push({
      	path: '/search'
      })

6.name命名路由跳转

特点：适合 path 路径长的场景

语法：

  • 路由规则，必须配置name配置项

    { name: '路由名', path: '/path/xxx', component: XXX },

  • 通过name来进行跳转

    this.$router.push({
  name: '路由名'
})

7.代码演示通过name命名路由跳转

//路由规则中配置name： 
{ name: "search", path: '/search/:words?', component: Search },


      // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
      //    this.$router.push({
      //        name: '路由名'
      //    })
      this.$router.push({
        name: 'search'
      })

8.总结

编程式导航有几种跳转方式？

十一、编程式导航-path路径跳转传参

1.问题

点击搜索按钮，跳转需要把文本框中输入的内容传到下一个页面如何实现？

在这里插入图片描述

2.两种传参方式

1.查询参数

2.动态路由传参

3.传参

两种跳转方式，对于两种传参方式都支持：

① path 路径跳转传参

② name 命名路由跳转传参

4.path路径跳转传参（query传参）

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

接受参数的方式依然是：$route.query.参数名

5.path路径跳转传参（动态路由传参）

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

接受参数的方式依然是：$route.params.参数值

**注意：**path不能配合params使用

十二、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

2.name 命名路由跳转传参 (动态路由传参)

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

3.总结

编程式导航，如何跳转传参？

1.path路径跳转

  • query传参

    this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

  • 动态路由传参

    this.$router.push('/路径/参数值')
this.$router.push({
  path: '/路径/参数值'
})

2.name命名路由跳转

  • query传参

    this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

  • 动态路由传参 (需要配动态路由)

    this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

十三、缓存组件

1.什么是keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。

优点：

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，

减少加载时间及性能消耗，提高用户体验性。

App.vue

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

问题：

缓存了所有被切换的组件

2.keep-alive的三个属性

① include ： 组件名数组，只有匹配的组件会被缓存

② exclude ： 组件名数组，任何匹配的组件都不会被缓存

③ max ： 最多可以缓存多少组件实例

App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

3.额外的两个生命周期钩子

keep-alive的使用会触发两个生命周期函数

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和deactived钩子，帮我们实现业务需求。

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

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

相关文章

进程同步互斥之吸烟者问题，读者写者问题，哲学家进餐问题

进程同步互斥之吸烟者问题，读者写者问题，哲学家进餐问题

1.吸烟者问题 1.问题描述 假设一个系统有三个抽烟者进程和一个供应者进程。 每个抽烟者不停地卷烟并抽掉它&#xff0c;但是要卷起并抽掉一支烟&#xff0c;抽烟者需要有三种材料:烟草、纸和胶水。 三个抽烟者中&#xff0c;第一个拥有烟草、第二个拥有纸、第三个拥有胶水。 …
阅读更多...
【MyBatis】MyBatis 详解

【MyBatis】MyBatis 详解

MyBatis 详解 一. MyBatis 是什么二. MyBatis 在整个框架中的定位三. MyBatis 的操作1. 先创建好数据库和表2. 添加MyBatis框架⽀持3. 修改配置文件4. 添加业务代码5. 增、删、改操作① 增加⽤户② 修改用户操作③ 删除操作 6. 查询操作① 单表查询② 多表查询 一. MyBatis 是什…
阅读更多...
Ubuntu16.04apt更新失败

Ubuntu16.04apt更新失败

先设置网络设置 换成nat、桥接&#xff0c;如果发现都不行&#xff0c;那么就继续下面操作 1.如果出现一开始就e&#xff0c;检查源&#xff0c;先换源 2.换完源成功之后&#xff0c;ping网络&#xff0c;如果ping不通就是网络问题 如果ping baidu.com ping不通但是ping 112…
阅读更多...
2023年中国非晶带材产量、竞争现状及行业市场规模前景分析[图]

2023年中国非晶带材产量、竞争现状及行业市场规模前景分析[图]

非晶带材指生产工艺采用急速冷却技术将含铁、硅、硼等元素的合金熔液以每秒百万度的速度快速冷却后得到的带材&#xff0c;其物理状态表现为金属原子呈长程无序的非晶体排列。非晶带材及其制品非晶铁心主要用于电力领域&#xff0c;是非晶配电变压器的主要用材及核心部件。 我国…
阅读更多...
Git入门详解

Git入门详解

Git入门详解 本文承接上文 Git入门简介 并做了内容扩充。本文讲述Git工具的安装、配置及使用友情参考链接&#xff1a;https://gitee.com/all-about-git 1. Git安装 安装官网&#xff1a;https://git-scm.com/安装过程如下&#xff1a; 双击.exe默认安装即可 2. Git配置 …
阅读更多...
基于DBC Signal Group生成Autosar SR接口（1）

基于DBC Signal Group生成Autosar SR接口（1）

文章目录 前言实现方法结构体在Simulink中的定义SignalGroup提取 总结 前言 在开发Autosar CAN通信模块时&#xff0c;对于Signal Group需要建立对应的Interface,其中的数据类型实际是一个结构体&#xff0c;包含Group中的Signal的数据类型定义。手动建立比较费时间&#xff0…
阅读更多...
2023年中国人防服务需求现状及行业市场规模前景分析[图]

2023年中国人防服务需求现状及行业市场规模前景分析[图]

人防服务指利用人发现风险事件&#xff0c;并延迟或阻止风险事件的发生&#xff0c;在自身力量不足的情况下发出应急救援信号&#xff0c;以待做出进一步的反应&#xff0c;制止风险事件的发生或处理已发生的风险事件。人防服务是保安服务公司最基本的业务内容。2022年国内保安…
阅读更多...
日常学习收获之----react的ref和wrappedComponentRef的区别

日常学习收获之----react的ref和wrappedComponentRef的区别

react获取子组件的方式&#xff0c;有ref和wrappedComponentRef。那这两者有什么区别呢&#xff1f; 区别在于是否用了高阶组件&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#…
阅读更多...
中国鞋业品牌步力宝：传统制造业蜕变为资本上市公司的光辉征程

中国鞋业品牌步力宝：传统制造业蜕变为资本上市公司的光辉征程

​中国鞋业&#xff0c;作为典型的劳动密集型产业&#xff0c;一直在不断演进。从最初的皮鞋、布鞋、胶鞋、塑料鞋&#xff08;化学鞋&#xff09;四大类鞋&#xff0c;到今天的复杂多样&#xff0c;中国鞋业一直在追求更高的品质和创新。随着社会的进步和科学技术的发展&#…
阅读更多...
第二证券：临时停牌一般多久？

第二证券：临时停牌一般多久？

随着股票买卖市场的日益开展&#xff0c;股票买卖的监管也越来越严格。而前段时刻&#xff0c;上市公司中多家公司被暂时停牌&#xff0c;此举引起了公众对于暂时停牌时刻的重视。那么&#xff0c;暂时停牌一般多久&#xff1f;本篇文章将从多个视点出发&#xff0c;对这一问题…
阅读更多...
迅为RK3568开发板Scharr滤波器算子边缘检测

迅为RK3568开发板Scharr滤波器算子边缘检测

本小节代码在配套资料“iTOP-3568 开发板\03_【iTOP-RK3568 开发板】指南教程\04_OpenCV 开发配套资料\33”目录下&#xff0c;如下图所示&#xff1a; 在 Sobel 算子算法函数中&#xff0c;如果设置 ksize-1 就会使用 3x3 的 Scharr 滤波器。Scharr 算子是 Soble 算子在 ksize…
阅读更多...
Linux UDP通信

Linux UDP通信

阅读更多...
基于Python和Tkinter的双目相机驱动界面

基于Python和Tkinter的双目相机驱动界面

文章目录 前言准备工作代码分析初始化创建按钮创建图像显示区域创建信息标签启动摄像头捕捉主函数结论效果展示 前言 本文将介绍如何使用Python和Tkinter库来创建一个简单的摄像头应用程序。这个应用程序可以打开摄像头&#xff0c;显示摄像头捕捉的图像&#xff0c;并允许用户…
阅读更多...
Nosql redis高可用和持久化

Nosql redis高可用和持久化

Nosql redis高可用和持久化 1、redis高可用2、redis持久化2.1redis持久化2.2Redis 持久化方法2.3RDB 持久化2.3.1RDB持久化工作原理2.3.2触发条件2.3.3其他自动触发机制2.3.4执行流程2.3.5启动时加载 2.4AOF 持久化2.4.1AOF持久化原理2.4.2开启AOF2.4.3执行流程2.4.4文件重写的…
阅读更多...
8+结合10种机器学习算法构建模型，可复现。

8+结合10种机器学习算法构建模型，可复现。

今天给同学们分享一篇机器学习的生信文章“Comprehensive machine-learning survival framework develops a consensus model in large-scale multicenter cohorts for pancreatic cancer”&#xff0c;这篇文章于2022年10月25日发表在eLife期刊上&#xff0c;影响因子为8.713。…
阅读更多...
小游戏开发者应该如何入局赛道

小游戏开发者应该如何入局赛道

一、微信小游戏赛道发展史 第一阶段&#xff1a;轻度试水期&#xff0c;2017&#xff5e;2019年 微信小游戏于2017年底上线&#xff0c;初期以轻度休闲为主&#xff0c;例如棋牌、合成消除以及益智相关游戏类型。一是开发门槛不高&#xff0c;产品可以快速上线; 二是大部分厂…
阅读更多...
功率信号源在电子测试中的应用有哪些方面

功率信号源在电子测试中的应用有哪些方面

功率信号源在电子测试中有着广泛的应用&#xff0c;可以提供稳定、可调的功率信号&#xff0c;用于各种测量和验证工作。下面西安安泰将介绍功率信号源在电子测试中的几个主要应用方面。 图&#xff1a;ATG-2000系列功率信号源 无线通信测试&#xff1a;功率信号源在无线通信测…
阅读更多...
【three.js】结合vue进行开发第一个3d页面

【three.js】结合vue进行开发第一个3d页面

一、创建vue项目 新建一个项目目录&#xff0c;在集成终端打开&#xff0c;输入 npm init vitelatest 回车后&#xff0c;依次输入项目名&#xff0c;选择vue和js开发 然后安装依赖并运行项目 二、安装three 接下来我们开始安装three npm install three 三、Three.js 的…
阅读更多...
【Unity3D赛车游戏制作】开始场景搭建——UGUI复合控件Button

【Unity3D赛车游戏制作】开始场景搭建——UGUI复合控件Button

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…
阅读更多...
leetcode 每日一题复盘(10.9~10.15)

leetcode 每日一题复盘(10.9~10.15)

leetcode 101 对称二叉树 这道题一开始想是用层序遍历,看每一层是否都对称,遇到一个问题就是空指针(子树为空)无法记录下来,同时会导致操作空指针的问题,因此需要修改入队条件,并用一个标志去表示空指针 vector<int>numv;for(int i0;i<size;i){TreeNode*frontque.fro…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023