【前端Vue】Vue0基础完整教程第6篇：vue指令（下）,成绩案例【附代码文档】

Vue从0基础到大神学习完整教程完整教程（附代码资料）主要内容讲述：vue基本概念，vue-cli的使用，vue的插值表达式，{{ gaga }}，{{ if (obj.age > 18 ) { } }}，vue指令，综合案例 - 文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通过data提供数据,通过插值表达式显示数据,安装vue开发者工具,v-bind指令,v-on指令,v-if 和 v-show,v-model,v-text 和 v-html。day-08vuex介绍,语法,模块化,小结。面经PC端-element (上)初始化,request,router,login模块,layout模块,dashboard模块（了解）。面经PC端 - Element (下)Article / list 列表,Article / add 添加,Article / del 删除,Article / upd 修改,Article / preview 预览,yarn-补充。vue指令（下），成绩案例，计算属性，属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 （两步）,使用演示。vue指令（下），成绩案例，计算属性，属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 （两步）,使用演示。组件化开发，组件通信，todo案例，作业什么是组件化开发,组件的注册,全局注册组件,组件的样式冲突 ,组件通信 - 父传子 props 传值,v-for 遍历展示组件练习,单向数据流,组件通信 - 子传父,props 校验,布局,任务组件todo,列表,删除,修改：不做了！下面代码其实就是我想让大家练习,添加,剩余数量,清空已完成,小选与大选,筛选：作业,本地存储,附加练习_1.喜欢小狗狗吗,附加练习_2.点击文字变色,附加练习_3. 循环展示狗狗,附加练习_4.选择喜欢的狗。v-model，ref 和 nextTick，dynamic 动态组件，自定义指令，插槽，案例：商品列表v-model 语法糖,v-model给组件使用,动态组件的基本使用,自定义指令说明,自定义指令 - 局部注册,自定义指令 - 全局注册,自定义指令 - 指令的值,默认插槽 slot,后备内容 (默认值),具名插槽,作用域插槽,案例概览,静态结构,MyTag 组件,MyTable 组件。生命周期，单页应用程序与路由，vue-router研究生命周期的意义,生命周期函数(钩子函数),组件生命周期分类,SPA - 单页应用程序,路由介绍,vue-router介绍,vue-router使用,配置路由规则,路由的封装,vue路由 - 声明式（a标签转跳）导航,vue路由 - 重定向和模式,vue路由 - 编程式（JS代码进行转跳）导航,综合练习 - 面经基础版,组件缓存 keep-alive。面经 H5 端 - Vant（上）初始化,vant,axios封装,router,主题定制-了解,登录&注册。面经 H5 端 - Vant（下）列表,详情,收藏 与 喜欢,我的（个人中心）。Day01_vuex今日学习目标(边讲边练),1.vuex介绍,2.vuex学习内容,3.vuex例子准备,vuex-store准备,5.vuex-state数据源,【vuex-mutations定义-同步修改,【vuex-mutations使用,8.vuex-actions定义-异步修改,9.vuex-actions使用,10.vuex-重构购物车-准备Store,11.vuex-重构购物车-配置项(上午结束),vuex-getters定义-计算属性,13.vuex-getters使用,14.vuex-modules定义-分模块,15.分模块-影响state取值方式,16.分模块-命名空间,扩展: 使用Devtools调试vuex数据。

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

生命周期

研究生命周期的意义

生命周期 => 一个事物从出生 到 消亡的全部过程

生命周期（Life Cycle）是指一个组件从创建-> 运行 -> 销毁的整个阶段，强调的是一个时间段

  • 张三出生，表示这个人生命周期的开始
  • 张三离世，表示这个人生命周期的结束
  • 中间张三的一生，就是张三的生命周期

我们可以把每个 vue 组件运行的过程，也概括为生命周期：

  • vue 组件的初始化，表示生命周期的开始
  • vue 组件的销毁，表示生命周期的结束
  • vue 组件中间运行的过程，就是组件的生命周期

image-20210111193143574

生命周期函数(钩子函数)

生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。

例如，组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据。

组件生命周期分类

vue 组件的生命周期函数，可以分为 3 大类：

  • 组件初始化阶段的生命周期函数
  • 组件运行阶段的生命周期函数
  • 组件销毁阶段的生命周期函数

image-20210111193357762

1. beforeCreate：data数据初始化之前，组件还没有数据
2. created: data数据初始化之后，可以获取到组件的数据
3. beforeMount：DOM渲染之前，DOM还没渲染
4. mounted：DOM渲染之后，可以操作DOM了
5. beforeUpdate: 数据更新，DOM更新前
6. updated: 数据更新，DOM更新后
7. beforeDestroy: 组件销毁前
8. destroyed: 组件销毁后

单页应用程序与路由

SPA - 单页应用程序

  • SPA： Single Page Application 单页面应用程序
  • MPA : Multiple Page Application多页面应用程序

[SPA ](

[网易云音乐](

优势

  • 传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面
  • 单页面应用程序只有第一次会加载完整的页面
  • 以后每次请求仅仅获取必要的数据，减少了请求体积，加快页面响应速度，降低了对服务器的压力
  • SPA更好的用户体验，运行更加流畅

缺点

  1. 开发成本高 (需要学习路由) vue-router react-router
  2. 不利于 SEO 搜索引擎优化 谷歌浏览器在解决这个问题 ssr:服务端渲染 server side rendering

路由介绍

  • 路由 : 是浏览器 URL 中的哈希值( # hash) 与 展示视图内容(组件) 之间的对应规则
  • 简单来说,路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则.-
  • 当 URL 中的哈希值( # hash) 发生改变后,路由会根据制定好的规则, 展示对应的视图内容(组件)
  • 为什么要学习路由?
  • 渐进式 =>vue => vuer-router (管理组件之间的跳转)
  • 在 web App 中, 经常会出现通过一个页面来展示和管理整个应用的功能.
  • SPA 往往是功能复杂的应用,为了有效管理所有视图内容,前端路由 应运而生.
  • vue 中的路由 : 是 hash 和 component 的对应关系, 一个哈希值对应一个组件

目标: 设备和ip的映射关系

image-20210512095742920

目标: 路径和组件的映射关系

image-20210512095825389

vue-router

vue-router介绍

目标: 如何在Vue项目中集成路由

官网:

路由 - 组件分类

目标: .vue文件分2类, 一个是页面组件, 一个是复用组件

.vue文件本质无区别, 方便大家学习和理解, 总结的一个经验

src/views(或pages) 文件夹 和 src/components文件夹

  • 页面组件 - 页面展示 - 配合路由用
  • 复用组件 - 展示数据/常用于复用

image-20210424215930981

总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据

vue-router使用

目标: 学会vue官方提供的vue-router路由系统功能模块使用

App.vue - 页面标签和样式准备(==可复制继续写==)

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">

    </div>
  </div>
</template>

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

<style scoped>
.footer_wrap {
  position: fixed;
  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:hover {
  background-color: #555;
}
.top {
  padding-top: 62px;
}
</style>

[vue-router文档](

  • 安装
yarn add vue-router@3.5.3
  • 导入路由 main.js中
import VueRouter from 'vue-router'
  • 使用路由插件
// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)
  • 创建路由对象
const router = new VueRouter({
})
  • 关联到vue实例
new Vue({
  router
})

==效果：地址栏中自动增加了 #==

image-20210602114435336

配置路由规则

// 4. 创建一个路由对象
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      // 组件
      path: '/find',
      component: Find,
    },
    {
      path: '/my',
      component: My,
    },
    {
      path: '/friend',
      component: Friend,
    },
  ],
})

==必须指定路由的出口==

<div class="top">
  <!-- 路由的出口 -->
  <router-view></router-view>
</div>

路由的封装

  • 新建文件router/index.js
import Vue from 'vue'
// 2. 导入VueRouter
import VueRouter from 'vue-router'

import Find from '../views/Find'
import My from '../views/My'
import Friend from '../views/Friend'

// 3. 使用vue插件  vue的插件想要生效必须调用一个方法  Vue.use(XXXX)
Vue.use(VueRouter)

// 4. 创建一个路由对象
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      // 组件
      path: '/find',
      component: Find,
    },
    {
      path: '/my',
      component: My,
    },
    {
      path: '/friend',
      component: Friend,
    },
  ],
})

export default router
  • main.js中
import router from './router'

new Vue({
  // 5. 关联路由对象和vue实例 data methods
  render: (h) => h(App),
  router,
}).$mount('#app')

vue路由 - 声明式（a标签转跳）导航

声明式导航 - 基础使用

目标: 可用全局组件router-link来替代a标签

  1. vue-router提供了一个全局组件 router-link
  2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
  3. router-link提供了声明式导航高亮的功能(自带类名)
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

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

<style scoped>
/* 省略了 其他样式 */
.router-link-exact-active,
.router-link-active {
  background-color: #555 !important;
}
</style>

总结: 链接导航, 用router-link配合to, 实现点击切换路由

导航高亮

RouterLink会自动给当前导航添加两个类名

<!-- 
  RouterLink会自动给当前的链接添加两个类名
    router-link-active: 激活的导航链接   模糊匹配
    router-link-exact-active:  激活的导航链接 精确匹配

    exact: 必须要精确匹配
  -->
 <RouterLink to="/" exact>发现音乐</RouterLink>
<RouterLink to="/my">我的音乐</RouterLink>
<RouterLink to="/friend">朋友</RouterLink>

可以修改默认高亮的类名

const router = new VueRouter({
  linkActiveClass: 'aa',
  linkExactActiveClass: 'aa',
  // route: 一条规则
}

声明式导航 - 跳转传参

目标: 在跳转路由时, 可以给路由对应的组件内传值

在router-link上的to属性传值, 语法格式如下

  • /path?参数名=值
  • /path/:id – 需要路由对象提前配置 path: “/path/参数名”

对应页面组件接收传递过来的值

  • $route.query.参数名

  • $route.params.参数名

  • 创建components/Part.vue - 准备接收路由上传递的参数和值

   <template>
     <div>
         <p>关注明星</p>
         <p>发现精彩</p>
         <p>寻找伙伴</p>
         <p>加入我们</p>
         <p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p>
     </div>
   </template>
  1. 路由定义
   {
       path: "/friend",
       component: Friend
     },
     {
       path: "/friend/:username", // 有:的路径代表要接收具体的值
       component: Friend
     },
  1. 导航跳转, 传值给Friend.vue组件
   <router-link to="/friend?name=小传">朋友-小传</router-link>
   <router-link to="/friend/小智">朋友-小智</router-link>

vue路由 - 重定向和模式

路由 - 重定向

目标: 匹配path后, 强制切换到目标path上

  • 网页打开url默认hash值是/路径
  • redirect是设置要重定向到哪个路由路径

例如: 网页默认打开, 匹配路由"/", 强制切换到"/find"上

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

总结: 强制重定向后, 还会重新来数组里匹配一次规则

路由 - 404页面

目标: 如果路由hash值, 没有和数组里规则匹配

默认给一个404页面

语法: 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面

  1. 创建NotFound页面
   <template>
     <img src="images/5854cc19-a9ca-400e-9dca-2207617394fa-1709969176.png" alt="">
   </template>

   <script>
   export default {

   }
   </script>

   <style scoped>
       img{
           width: 100%;
       }
   </style>
  1. 在main.js - 修改路由配置
   import NotFound from '@/views/NotFound'

   const routes = [
     // ...省略了其他配置
     // 404在最后(规则是从前往后逐个比较path)
     {
       path: "*",
       component: NotFound
     }
   ]

总结: 如果路由未命中任何规则, 给出一个兜底的404页面

路由 - 模式设置

目标: 修改路由在地址栏的模式

hash路由例如:

history路由例如: (以后上线需要服务器端支持)

[模式文档](

router/index.js

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})

vue路由 - 编程式（JS代码进行转跳）导航

编程式导航用JS代码跳转

声明式导航用a标签

编程式导航 - 基础使用

目标: 用JS代码来进行跳转

语法:

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})
  1. main.js - 路由数组里, 给路由起名字
{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},
  1. App.vue - 换成span 配合js的编程式导航跳转
<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="btn('/part', 'Part')">朋友</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    }
  }
};
</script>

编程式导航 - 跳转传参

目标: JS跳转路由, 传参

语法 query / params 任选 一个

this.$router.push({
    path: "路由路径"
    name: "路由名",
    query: {
        "参数名": 值
    }
    params: {
        "参数名": 值
    }
})

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

==格外注意: 使用path会自动忽略params==

App.vue

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="oneBtn">朋友-小传</span>
      <span @click="twoBtn">朋友-小智</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参
// 注意: 如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    },
    oneBtn(){
      this.$router.push({
        name: 'Part',
        params: {
          username: '小传'
        }
      })
    },
    twoBtn(){
      this.$router.push({
        name: 'Part',
        query: {
          name: '小智'
        }
      })
    }
  }
};
</script>

综合练习 - 面经基础版

image-20220613011210143

image-20220613012452936

image-20220613110855088

备用：

yarn add core-js -D

配置一级路由

配置首页 和 详情页两个一级路由

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },



    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

配置二级嵌套路由

配置自动导入：

目标: 在现有的一级路由下, 再嵌套二级路由

从《教学资料》 views 目录中， CV 四个二级路由组件， 到我们的目录中

image-20220613015146888

利用 children 配置二级路由

router/index.js

import Article from '@/views/Article.vue';
import ArticleDetail from '@/views/ArticleDetail.vue';
import Collect from '@/views/Collect.vue';
import Like from '@/views/Like.vue';
import User from '@/views/User.vue';

import Layout from '@/views/Layout.vue';


import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: '/user', component: User },
      ]
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

export default router

配置导航链接, a 标签 替换成 router-link

views/Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">
      <router-view></router-view>
    </div>
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>

动态渲染首页

1 安装 axios

npm i axios

2 接口文档说明：

请求地址: 
请求方式: get

3 data中提供数据， created 中发送请求，获取数据

src/views/Article.vue

<script>
import axios from 'axios';
export default {
  name: 'ArticlePage',
  data() {
    return {
      articles: []
    };
  },
  async created() {
    const { data } = await axios.get(
      '
    );
    this.articles = data.result.rows;
  },
};
</script>

4 结合数据动态渲染

src/views/Article.vue

<template>
  <div class="article-page" v-if="articles">
    <div
      v-for="item in articles"
      :key="item.id"
      class="article-item">
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">{{ item.content }}</div>
      <div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
    </div>
  </div>
</template>

跳转传参到详情页

1 修改详情页路由， 改成动态路由

router/index.js

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: '/user', component: User },
      ]
    },
    {
      path: '/detail/:id',
      component: ArticleDetail
    }
  ]
})

2 注册点击事件，跳转传递参数

src/views/Article.vue

<div
  v-for="item in articles"
  :key="item.id"
  class="article-item"
  @click="$router.push(`/detail/${item.id}`)"
>

3 获取解析参数

src/views/ArticleDetail.vue

export default {
  name: 'ArticleDetailPage',
  created() {
    console.log(this.$route.params.id)
  }
};

4 点击返回键，返回上一页

src/views/ArticleDetail.vue

<span class="back" @click="$router.back()">&lt;</span>

动态渲染详情页

接口文档说明：

请求地址: 
请求方式: get

1 发送请求获取数据

src/views/ArticleDetail.vue

import axios from 'axios';
export default {
  name: 'article-detail-page',
  data() {
    return {
      article: {}
    };
  },
  async created() {
    this.article = {}
    const { data } = await axios.get(
      `
    );
    this.article = data.result;
  },
};

2 页面渲染

src/views/ArticleDetail.vue

<template>
  <div class="article-detail-page" v-if="article.id">
    <nav class="nav"> <span class="back" @click="$router.back()">&lt;</span> 面经详情</nav>
    <header class="header">
      <h1>{{article.stem}}</h1>
      <p>{{article.createdAt}} | {{article.views}} 浏览量 | {{article.likeCount}} 点赞数</p>
      <p><img :src="article.creatorAvatar" alt=""> <span>{{article.creatorName}}</span> </p>
    </header>
    <main class="body"> {{article.content}} </main>
  </div>
</template>

组件缓存 keep-alive

基本语法

思考：从面经 点到 收藏，又点回 面经，面经的数据需要重新加载么？不需要，希望缓存下来！

如果希望组件被缓存下来，可以在外面包一个 keep-alive 组件 ~

image-20220613022957478

src/views/Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">

      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>

keep-alive对应的两个钩子

当组件被keep-alive管理时，会多出两个生命周期钩子，activated / deactivated

src/views/Article.vue

export default {
  name: 'ArticlePage',
  data() {
    return {
      articles: []
    };
  },
  async created() {
    const { data } = await axios.get(
      '
    );
    this.articles = data.result.rows;
    console.log(this.articles)
  },
  activated() {
    console.log('缓存组件被激活')
  },
  deactivated() {
    console.log('缓存组件被隐藏')
  }
};

未完待续， 同学们请等待下一期

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

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

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

相关文章

实验2 路由器基本配置

实验2 路由器基本配置

实验2 路由器基本配置 一、 原理描述二、 实验目的三、 实验内容四、 实验步骤1.建立实验拓扑2.基础配置3.配置路由器接口IP地址4.查看路由器配置信息5.连通性测试6.使用抓包工具 一、 原理描述 华为设备支持多种配置方式&#xff0c;操作人员要熟悉使用命令行的方式进行设备管…
阅读更多...
小程序解析二维码：jsQR

小程序解析二维码：jsQR

1.了解jsQR jsQR是一个纯javascript脚本实现的二维码识别库&#xff0c;不仅可以在浏览器端使用&#xff0c;而且支持后端node.js环境。jsQR使用较为简单&#xff0c;有着不错的识别率。 2.效果图 3.二维码 4.下载jsqr包 npm i -d jsqr5.代码 <!-- index.wxml --> &l…
阅读更多...
大模型笔记：Prompt tuning

大模型笔记：Prompt tuning

1 NLP模型的几个阶段 1.1 第一阶段&#xff08;在深度学习出现之前&#xff09; 通常聚焦于特征工程&#xff08;feature engineering&#xff09;利用领域知识从数据中提取好的特征 1.2 第二阶段&#xff08;在深度学习出现之后&#xff09; 特征可以从数据中习得——>…
阅读更多...
Hololens2远程音视频通话与AR远程空间标注，基于OpenXR+MRTK3+WebRTC实现

Hololens2远程音视频通话与AR远程空间标注，基于OpenXR+MRTK3+WebRTC实现

Hololens2远程音视频通话与AR远程空间标注 使用Unity2021.3.21版本开发&#xff0c;基于OpenXRMRTK3.0WebRTC实现。 &#xff08;1&#xff09;通过视频获取视频帧的矩阵的方法可以参考&#xff1a;https://learn.microsoft.com/zh-cn/windows/mixed-reality/develop/advanced…
阅读更多...
深度学习-多尺度训练的介绍与应用

深度学习-多尺度训练的介绍与应用

一、引言 在当今快速发展的人工智能领域&#xff0c;多尺度训练已经成为了一种至关重要的技术&#xff0c;特别是在处理具有复杂结构和不同尺度特征的数据时。这种技术在许多应用中发挥着关键作用&#xff0c;例如图像识别、自然语言处理和视频分析等。 多尺度训练的定义 多尺…
阅读更多...
pandas(day8 市场分析案例)

pandas(day8 市场分析案例)

一. 相关知识 数据报告 : - 传统零售 : - 代理商 : 压货 挣差价 - 层层分级别 - 网络零售 : - 代运营 : 了解代理品牌 了解品类市场 竞品 - 数据报告 PPT(活动) (日报EXCEL 周报 月报) 二. 读取数据(循环一次性读取下列文件) .\\灭鼠杀虫剂市场近三年交易额.xlsx.\\电蚊香套装…
阅读更多...
scFed：联邦学习用于scRNA-seq分类

scFed：联邦学习用于scRNA-seq分类

scRNA-seq的出现彻底改变了我们对生物组织中细胞异质性和复杂性的理解。然而&#xff0c;大型&#xff0c;稀疏的scRNA-seq数据集的隐私法规对细胞分类提出了挑战。联邦学习提供了一种解决方案&#xff0c;允许高效和私有的数据使用。scFed是一个统一的联邦学习框架&#xff0c…
阅读更多...
自动化测试-web

自动化测试-web

一、自动化测试理论&#xff1a; UI: User Interface &#xff08;用户接口-用户界面&#xff09;&#xff0c;主要包括&#xff1a;app 和webUI自动化测试&#xff1a;使用工具或代码执行用例的过程什么样的项目适合做自动化&#xff1a; 需要回归测试项目&#xff08;甲方自…
阅读更多...
基于令牌桶算法对高并发接口的优化

基于令牌桶算法对高并发接口的优化

业务背景 项目中有一个抽奖接口&#xff0c;此接口需要处理高并发问题以及使用脚本作弊的问题。 本文主要探讨如何最大程度地减少脚本作弊行为对抽奖业务的影响。 设计思路 如何减少脚本作弊行为对抽奖业务的影响 使用令牌桶算法&#xff0c;对频率过高的用户请求进行拦截 …
阅读更多...
基于ros的相机内参标定过程

基于ros的相机内参标定过程

基于ros的相机内参标定过程 1. 安装还对应相机的驱动2. 启动相机节点发布主题3. 下载camera_calibartion4. 将红框的文件夹复制在自己的工作空间里边&#xff0c;编译5. 标定完成以后&#xff0c;生成内参参数文件camera.yaml。将文件放在对应的路径下&#xff0c;修改config文…
阅读更多...
vex-table—— 获取插入或修改数据后的tableData

vex-table—— 获取插入或修改数据后的tableData

例子来自vxe-table。在开发过程中发现新增数据后&#xff0c;输出this.tableData&#xff0c;发现数据并没有被修改 想要获取更新的数据方式为 mounted () {const $table this.$refs.xTableconsole.log("&#x1f680; ~ mounted ~ $table:", $table.tableData)},
阅读更多...
[开源] 基于transformer的时间序列预测模型python代码

[开源] 基于transformer的时间序列预测模型python代码

分享一下基于transformer的时间序列预测模型python代码&#xff0c;给大家&#xff0c;记得点赞哦 #!/usr/bin/env python # coding: 帅帅的笔者import torch import torch.nn as nn import numpy as np import pandas as pd import time import math import matplotlib.pyplo…
阅读更多...
BoostCompass(数据准备预处理模块)

BoostCompass(数据准备预处理模块)

阅读导航 一、网页数据下载二、编写数据去标签与数据清洗的模块 Parser✅boost 开发库的安装1. 基本思路2. 详细讲解&#xff08;1&#xff09;程序递归遍历目录&#xff0c;收集所有HTML文件的路径&#xff08;2&#xff09;对每个HTML文件进行解析&#xff0c;提取出文档标题…
阅读更多...
反编译APK的在线工具

反编译APK的在线工具

Java decompiler online
阅读更多...
【HTML】简单制作一个3D动态粒子效果的时空隧道

【HTML】简单制作一个3D动态粒子效果的时空隧道

目录 前言 开始 HTML部分 CSS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段HTML&#xff0c;具体内容如下&#xff1a; 开始 首先新建文件夹&#xff0c;创建两个文本文档&#xff0c;其中HTML的文件名改为[index.html]&#xff0c;CSS的文件名改为[Bab…
阅读更多...
【CPA考试】2024注册会计师报名照片尺寸要求解读及手机拍照方法

【CPA考试】2024注册会计师报名照片尺寸要求解读及手机拍照方法

随着2024年注册会计师考试的临近&#xff0c;众多会计专业人士和学生都开始准备报名参加这一行业的重要考试&#xff0c;报名时间为4月8日至4月30日。报名过程中&#xff0c;一张符合要求的证件照是必不可少的。本文将为您详细解读2024年注册会计师考试报名照片的尺寸要求&…
阅读更多...
Kafka基础/1

Kafka基础/1

Kafka 概念 Kafka 是一个分布式的流媒体平台。 应用&#xff1a;消息系统、日志收集、用户行为追踪、流式处理 特点&#xff1a;高吞吐量、消息持久化、高可靠性、高扩展性 术语&#xff1a; broker&#xff1a;Kafka 的服务器&#xff0c;Kafka 当中每一台服务器&#xf…
阅读更多...
网络安全---Packet Tracer - 配置扩展 ACL

网络安全---Packet Tracer - 配置扩展 ACL

一、实验目的 在Windows环境下利用Cisco Packet Tracer进行 配置防火墙操作。 二、实验环境 1.Windows10、Cisco Packet Tracer 8.2 2.相关的环境设置 在最初的时候&#xff0c;我们已经得到了搭建好的拓扑模型&#xff0c;利用已经搭建好的拓扑模型&#xff0c;进行后续的…
阅读更多...
SOLIDWORKS如何新建定义材质库

SOLIDWORKS如何新建定义材质库

SolidWorks材质库中包含了大量的材料选项&#xff0c;涵盖了金属、塑料、橡胶、复合材料等各种类型&#xff0c;每种材料都有详细的特性参数。用户可以根据设计需求&#xff0c;在材质库中选择合适的材料&#xff0c;从而更好地满足设计要求。在有限元分析中&#xff0c;需要附…
阅读更多...
【架构师】-- 成长路线图

【架构师】-- 成长路线图

成长为软件架构师不是一件容易的事&#xff0c;这篇文章列举了架构师需要学习的技术储备&#xff0c;给出了成为软件架构师的路线图&#xff0c;帮助有志于在架构领域成长的同学可以明确学习的方向。原文&#xff1a;Master Plan for becoming a Software Architect[1] 软件架…
阅读更多...
最新文章

Copyright @ 2022~2023