当前位置：首页 > news >正文

Vue和axios零基础学习

news 2026/2/9 14:07:58

Vue的配置与项目创建

在这之前要先安装nodejs

安装脚手架

官网

Home | Vue CLI (vuejs.org)

先运行，切换成淘宝镜像源，安装速度更快

npm config set registry http://registry.npm.taobao.org

创建项目

用编译器打开一个空文件，在终端输入创建代码

以下是步骤

选择N

运行结果

配置serve

配置完以下，就可以改动代码，效果实时更新到页面上，对于开发来说很方便。

但只有社区版idea在这里才有npm可以选

模板语法

绑值语法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{ message }}<div><!-- {{num++}}，不要这么写，别在这里运算，否则可能出错 -->{{num}}</div><div>{{bool}}</div><div>{{ arr.find(v => v.name === '张三')?.age }}</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>var app = new Vue({el: '#app',//element//把vue的实例绑定到id是app的上面//data: {message: 'Hello I\'m lmm',num: 1,bool: true,arr: [{ name: '张三', age: 20 }]}})</script>
</body></html>

渲染html(v-html)

<template><div><div>{{rowHtml}}</div><div v-html="rowHtml"></div></div>
</template><script>
export default {name:'test',data(){return{rowHtml: '<a href="https://www.taobao.com/">淘宝</a>'}}
}
</script>

可以看到绑值语法是不能渲染出链接的

绑定属性(v-bind)

使用场景

1.绑定 HTML 属性

用于动态设置元素的属性，例如 href、src、class、id 等。

<a v-bind:href="linkUrl">Click here</a>
<img v-bind:src="imageUrl" alt="Dynamic Image">

2.绑定多个属性

可以通过对象语法绑定多个属性。

<div v-bind="objectProps"></div>export default {data() {return {objectProps: {id: 'my-div',class: 'my-class',title: 'This is a title'}}}
}

实例

<template><div><a :href="url">点击这里访问淘宝</a><br><img :src="img" alt="Demo Image"><br></div>
</template><script>
import logo from '@/assets/logo.png';
export default {name: 'test',data() {return {url: 'https://www.taobao.com/',// img: '@/asset/logo.png'//注意要先导入才能用img:logo}}
}
</script>

事件绑定（v-on）

快捷绑定

直接写在行内

绑定方法

<template><div><div :style="{ width: '100px', height: '100px', backgroundColor: color }" @click="changeColor" id="testColor">点我</div></div>
</template><script>
export default {name: 'test',data() {return {color: 'red' // 初始化颜色为红色}},methods: {changeColor() {// 切换颜色this.color = this.color === 'red' ? 'blue' : 'red';}}
}
</script>

判断(v-if)

如果为真，就渲染该内容

<template><div><div v-if="color === '红色'">红色</div><div v-else>黑色</div></div>
</template><script>
import logo from '@/assets/logo.png';
export default {name: 'test',data() {return {color:'黑色'}}
}
</script>

列表渲染（v-for）

每个元素都要有唯一索引，绑定key

在实际开发中，每个元素都有写好的索引，所以用不上index。

如果没有的话，就用index来记录

<template><div v-for="item in fruits">{{item}}</div><div v-for="item in user" :key="item.id">用已写好的索引：{{key}}{{item.name}}</div><div v-for="(item,index) in user" :key="index">用系统分配的索引：{{key}}{{item.name}}</div></template><script>
export default {name: 'test',data() {return {fruits:['苹果','香蕉','西瓜'],user:[{id:'1001',name:'alicia'},{id:'1002',name:'fafa'},{id:'1003',name:'cami'}]}},methods: {}
}
</script>

双向绑定(v-model)

<template><div><input type="text" v-model="str"><p>{{str}}</p></div>
</template><script>
export default {name: 'test',data() {return {str:''}},methods: {}
}
</script>

组件基础

scoped:如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效

使用组件步骤

组件的组织

上图想表达的是，组件间的使用是可以嵌套的

Props组件交互

prop可以使组件之间有数据传递

使用案例

父组件向子组件传递数据。被导入的组件是父组件。

App.vue 组件（父组件）：

<template><div id="app"><Test :age="age" :name="name" :arr="arr"></Test></div>
</template><script>
import Test from "@/components/test";export default {name: 'App',components: {Test},data() {return {age: 18,name: 'chen',arr: [1, 2, 3]}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

test.vue 组件（子组件）：

<template><p>props传递数据</p><div>{{ age }}</div><div>{{ name }}</div><div v-for="i in arr" :key="i">{{ i }}</div>
</template><script>
export default {name: 'Test',props: {age: {type: Number,default: 0},name: {type: String,default: ''},arr: {type: Array,default: function () {return [];}}}
}
</script><style>
/* 添加样式 */
</style>

Prop类型

需要注意的是，传递数组和对象必须使用函数进行返回

自定义事件组件交互

自定义事件是 Vue 中子组件与父组件进行交互的一种灵活方式。子组件可以通过 this.$emit 触发事件，父组件则通过事件监听器来处理这些事件。这样可以让组件之间的通信更加模块化和清晰。

自定义事件可以在组件中反向传递数据，prp可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现 $emit

子组件向父组件传递数据。被导入的组件是父组件。

子组件

<template><button @click="sendMsg">点击传递数据</button>
</template><script>
export default {name: 'Test',data(){return{msg:'子组件向父组件传递数据'}},methods:{sendMsg(){this.$emit('onEvent',this.msg)}}}
</script><style>
/* 添加样式 */
</style>

父组件

<template><div id="app"><Test @onEvent="getMsg"></Test><div>{{msg}}</div></div>
</template><script>
import Test from "@/components/test";export default {name: 'App',data(){return{msg:''}},components: {Test},methods:{getMsg(data){this.msg = data}}}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

组件生命周期

生命周期概述

Vue 组件的生命周期可以分为以下几个阶段：

创建阶段
挂载阶段
更新阶段
销毁阶段

每个阶段都有特定的生命周期钩子函数，你可以在这些钩子函数中执行相应的逻辑。

1. 创建阶段

beforeCreate: 在实例被初始化之后，数据观测和事件配置之前调用。这时 data 和 methods 还不可用。
created: 实例已创建，数据观测和事件配置完成。这时可以访问 data、methods 和 computed，但 DOM 还未生成。

2. 挂载阶段

beforeMount: 在挂载开始之前被调用，render 函数首次被调用。这时模板已经编译，但尚未被渲染到 DOM 中。
mounted: 挂载完成后调用，此时组件已经被渲染到 DOM 上。可以访问 DOM 元素和进行 DOM 操作。网络请求是放在这块。因为元素被渲染出来之后，还需要向后台请求数据。

3. 更新阶段

beforeUpdate: 数据更新之前调用，render 函数将被重新调用。这时你可以在 DOM 更新之前做一些处理。
updated: 数据更新之后调用，此时 DOM 也已经更新。可以执行一些依赖于 DOM 更新的操作。

4. 销毁阶段

beforeUnmount: 卸载之前调用，此时组件仍然可以访问其数据和 DOM。
unmounted: 卸载完成后调用，此时组件及其所有的子组件都已经被销毁。可以在这里进行清理工作，比如清除定时器、取消网络请求等。

axios

安装与引入

常用请求方法

如果不写的话，默认是get

查询参数（get）

<template><div>{{data}}</div>
</template><script>
export default {name: 'Test',data(){return{data:{}}},mounted(){this.$axios({url: 'http://hmajax.itheima.net/api/city',//查询参数params: {pname: '福建省'}}).then(result => {this.data = result})}}
</script><style>
/* 添加样式 */
</style>

数据提交（post）

<template><div></div>
</template><script>
export default {name: 'Test',mounted(){this.$axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'clmm1234567',password: '123123'}}).then(result => {console.log(result)})}}
</script><style>
/* 添加样式 */
</style>

总结

网络请求封装

vue路由

了解

学到了路由，那么记得创建vue项目的时候把router选上，会自动配置路由文件

App.vue

<template><div><router-link to="/">首页</router-link>|<router-link to="/about">关于</router-link><div>123</div><router-view></router-view><div>321</div></div>
</template><script>
// import Test from "@/components/Test.vue";export default {name: 'App',components: {// Test},
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

index.js

import { createRouter, createWebHashHistory } from 'vue-router';
import HomeView from '../views/HomeView';
import AboutView from '../views/AboutView';const routes = [{path: '/',name: 'Home',component: HomeView},{path: '/about',name: 'About',component: AboutView}
];const router = createRouter({history: createWebHashHistory(),routes
});export default router;

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';// 创建 Vue 应用实例
const app = createApp(App);// 配置 axios 实例
app.config.globalProperties.$axios = axios;// 使用路由
app.use(router);// 挂载应用
app.mount('#app');

路由传递参数

router配置

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView'const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path:'/news',name:'news',component: ()=>import("../views/NewsView")},{path:'/newsDetail/:name',name:'newsDetail',component: ()=>import("../views/NewsDetailView")},
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

NewView

<template><div><ul><li><router-link to="/newsDetail/网易">网易新闻</router-link></li><li><router-link to="/newsDetail/百度">百度新闻</router-link></li><li><router-link to="/newsDetail/猾伪">猾伪新闻</router-link></li></ul></div>
</template><script>
export default {name: "NewsView"
}
</script><style scoped></style>

NewsDetailView

<template><div><h3>新闻</h3>{{$route.params.name}}</div>
</template><script>
export default {name: "NewsDetailView"
}
</script><style scoped></style>

嵌套路由配置

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),redirect:'/about/b',children: [{path: 'a',component: () => import('../views/AboutSub/About_a')},{path: 'b',component: () => import('../views/AboutSub/About_b')}]}]const router = createRouter({history: createWebHashHistory(),routes
})export default router

AboutView.vue

<template><div class="about"><router-link to="/about/a">a     |     </router-link><router-link to="/about/b">b</router-link><router-view></router-view><h1>This is an about page</h1></div>
</template>

点进about页面默认是about_b，因为重定向了

Vue状态管理

可以集中管理所有组件，不像props只能在父子间传递数据

引入状态管理

创建项目的时候勾选vuex

如果在创建项目的时候已勾选vuex，下面的前三步就不用了

vue状态管理核心

案例--面经基础

配置路由

先做一个底部导航切换效果。

配置路由

import { createRouter, createWebHistory } from 'vue-router'const routes = [{path:'/',component:()=>import('@/views/LayOut'),children:[{path:'/collect',component:()=>import('@/views/Collect')},{path:'/like',component:()=>import('@/views/Like')},{path:'/user',component:()=>import('@/views/User')},{path:'/articleList',component:()=>import('@/views/ArticleList')},]}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

<template><div><div style="background-color: pink; width: 500px; height: 500px;"><router-view></router-view></div><nav><router-link to="/articleList">面经 |</router-link><router-link to="/collect">收藏 |</router-link><router-link to="/like">喜欢 |</router-link><router-link to="/user">我的</router-link></nav></div>
</template><style>a.router-link-active{color: red;}
</style>

需要注意的是，Layout中需要用router-view

Layout 组件作为一个包裹组件使用，这意味着它可能需要呈现其子路由内容。Layout 中的 <router-view> 组件用于展示其子路由（如 /article、/like 等）。这使得每个子路由在 Layout 组件内部渲染，同时 Layout 组件可以包含共同的布局或导航条。

简而言之，Layout 中的 <router-view> 用于渲染 Layout 的子路由组件内容。这样，你可以在 Layout 组件中管理应用的布局和结构，同时动态展示不同的子视图。

<template><div><router-view></router-view></div>
</template><script>
export default {name: "Layout"
}
</script><style scoped></style>

首页请求渲染

<template><div><div v-for="item in articles":key="item.id"><p>{{item.stem}}</p></div></div>
</template><script>
import axios from "axios";
export default {name: "ArticleList",data(){return{articles:[]}},async created(){const { data } = await axios.get('https://mock.boxuegu.com/mock/3083/articles',);this.articles = data.result.rows;}
}
</script><style scoped></style>

跳转详情页传参

查询参数

动态路由

路由配置

{path:'/detail/:id',component:() => import('@/views/ArticleDetail')}

路由使用

@click="$router.push(`/detail/${item.id}`)"

<template><div><div v-for="item in articles":key="item.id"@click="$router.push(`/detail/${item.id}`)"><p>{{item.stem}}</p></div></div>
</template><script>
import axios from "axios";
export default {name: "ArticleList",data(){return{articles:[]}},async created(){const { data } = await axios.get('https://mock.boxuegu.com/mock/3083/articles',);this.articles = data.result.rows;}
}
</script><style scoped></style>

面经详情页的路由接收

this.$route.params.id

<template><div>面经详情</div>
</template><script>
export default {name: "ArticleDetail",created() {console.log(this.$route.params.id)}
}
</script><style scoped></style>

详情页渲染

<template><div>{{article.content}}</div>
</template><script>
import axios from "axios";
export default {name: "ArticleDetails",data(){return{article:{}}},async created() {const id = this.$route.params.idconsole.log(this.$route.params.id)const {data} = await axios.get(`https://mock.boxuegu.com/mock/3083/articles/${id}`)this.article = data.result}
}
</script><style scoped></style>

组件缓存

Vue和axios零基础学习

Vue的配置与项目创建在这之前要先安装nodejs 安装脚手架官网 Home | Vue CLI (vuejs.org) 先运行，切换成淘宝镜像源，安装速度更快 npm config set registry http://registry.npm.taobao.org 创建项目用编译器打开一个空文件，在终端输入…...

编程日记 2024/10/5 18:37:33

STM32新建工程-基于库函数

目录一、创建一个新工程二、为工程添加文件和路径三、创建一个main.c文件，并调试四、修改一些配置五、用库函数进行写程序 1、首先加入一些库函数和头文件 2、编写库函数程序一、创建一个新工程我这里选择STM32F103C8的型号，然后点击OK。 …...

编程日记 2024/10/5 18:35:31

matlab入门学习（二）矩阵、字符串、基本语句、函数

一、矩阵 1、矩阵生成 %矩阵生成%直接法 A[1,2,3; 4,5,6; 7,8,9]%冒号一维矩阵：开始，步长，结束（步长为1时可以省略） B1:1:10 B1:10 %函数法%linspace(开始，结束，元素个数)，等差生成…...

编程日记 2024/10/5 18:34:30

PC端微信小程序如何调试？

向往常一样运行开微信小程序开发者工具如果只弹出pc端小程序，没有出现调试的界面：点击胶囊按钮的三个…选择重新进入小程序即可依次展开相应的功能调试，改完代码没反应再刷新看看，再没反应就再次重新点击编译并自动调试。...

编程日记 2024/10/5 18:32:29

点击按钮提示气泡信息（Toast）

演示效果： 目录结构： activity_main.xml(布局文件)代码： <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http:…...

编程日记 2024/10/5 18:30:27

【易社保-注册安全分析报告】

前言由于网站注册入口容易被黑客攻击，存在如下安全问题： 1. 暴力破解密码，造成用户信息泄露 2. 短信盗刷的安全问题，影响业务及导致用户投诉 3. 带来经济损失，尤其是后付费客户，风险巨大，造…...

编程日记 2024/10/5 18:27:25

155. 最小栈

思路按栈的特点：顶部即列表尾部 class MinStack(object):def __init__(self):self.stack[]def push(self, val):""":type val: int:rtype: None"""self.stack.append(val)def pop(self):""":rtype: None"&quo…...

编程日记 2024/10/5 18:25:21

用Manim实现高尔顿板（Galton Board）

高尔顿板的介绍高尔顿板（Galton Board），有时也称为贝尔图（Bean Machine），是由英国统计学家弗朗西斯高尔顿（Francis Galton）于19世纪末发明的一种物理装置，用于演示随机分…...

编程日记 2024/10/5 18:23:18

OpenCV视频I/O(7）视频采集类VideoCapture之初始化视频捕获设备或打开一个视频文件函数open()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述为视频捕获打开一个视频文件、捕获设备或 IP 视频流。这是一个重载成员函数，提供给用户方便使用。它与上述函数的不同之处仅在于它所…...

编程日记 2024/10/5 18:21:15

vue3+vite@4+ts+elementplus创建项目详解

1、第一步创建项目cnpm init vite4 2、设置vue3.2局域网可访问配置： 找到项目路径下的package.json目录下找到script对象下面添加一下代码： "serve": "vite --host 0.0.0.0" 启动项目命令不在是dev而是：cnpm run serve 3…...

编程日记 2024/10/5 18:20:12

Python 从入门到实战34（实例2:绘制蟒蛇）

我们的目标是：通过这一套资料学习下来，通过熟练掌握python基础，然后结合经典实例、实践相结合，使我们完全掌握python，并做到独立完成项目开发的能力。上篇文章我们讨论了数据库MySQL操作的相关知识。今天学习一个使用…...

编程日记 2024/10/5 18:16:08

Visual Studio C# 处理和修复 WinRiver II 测量项目 MMT 文件错误

Visual Studio C# 处理和修复 WinRiver II 测量项目 MMT 文件错误前言一、WinRiver II 测量项目 MMT 文件的结构二、WinRiver II 无法打开或操作测量项目 MMT 文件2.1 无法载入船测多线法测量文件2.2 可以载入测验项目 MMT 文件，但 ADCP 后处理软件无法写入信息2.3…...

编程日记 2024/10/5 18:15:07

JAVA实现大写金额转小写金额

在金融行业中经常需要把大写金额转成小写金额，之前在一次开发中有个类似的需求，翻阅了好多博文，都没找到合适的，故没办法，就花了点时间研究并实现! 实现代码如下: private static final Character ZERO 零;private s…...

编程日记 2024/10/5 18:13:06

如何使用ssm实现基于SSM的宠物服务平台的设计与实现+vue

TOC ssm779基于SSM的宠物服务平台的设计与实现vue 绪论 1.1 研究背景当前社会各行业领域竞争压力非常大，随着当前时代的信息化，科学化发展，让社会各行业领域都争相使用新的信息技术，对行业内的各种相关数据进行科学化&#x…...

编程日记 2024/10/5 18:10:02

【C++学习笔记 21】C++中的动态数组 vertor

静态数组首先来创建一个静态数组 #include <iostream> #include <string>struct Vertex {float x, y, z; };std::ostream& operator<<(std::ostream& stream, const Vertex& vertex) {stream << vertex.x << "," <&…...

编程日记 2024/10/5 18:09:01

MongoDB 快速入门+单机部署（附带脚本）

目录介绍体系结构数据模型 BSON BSON 数据类型特点高性能高可用高扩展丰富的查询支持其他特点部署单机部署普通安装脚本安装 Docker Compose 安装卸载停止 MongoDB 删除包删除数据目录参考： https://docs.mongoing.com/ 介绍…...

编程日记 2024/10/5 18:03:56

组合数求法汇总

一：递推求解对于组合数，有此式： C n m C n − 1 m − 1 C n − 1 m C_{n}^{m}C_{n-1}^{m-1}C_{n-1}^{m} CnmCn−1m−1Cn−1m。 C n m C_{n}^{m} Cnm 可理解为 n n n 个数中选 m m m 个，不同的方案。对于第 n n n 个…...

编程日记 2024/10/5 18:01:55

Python知识点：在Python编程中，如何使用Joblib进行并行计算

开篇，先说一个好消息，截止到2025年1月1日前，翻到文末找到我，赠送定制版的开题报告和任务书，先到先得！过期不候！ Joblib是一个Python库，它被设计用来提供轻便的并行计算解决方案&…...

编程日记 2024/10/5 17:59:52

matlab-对比两张图片的CIElab分量的差值并形成直方图

%对比两张图片的CIElab分量的差值并形成直方图，改个路径就能用，图片分辨率要一致 close all; clear all; clc; I1imread(E:\test\resources\image\1.jpg); I2imread(E:\test\resources\image\2.jpg); lab1 rgb2lab(I1); lab2 rgb2lab(I2); % 提取色度…...

编程日记 2024/10/5 17:55:48

（十七）、Mac 安装k8s

文章目录 1、Enable Kubernetes2、查看k8s运行状态3、启用 kubernetes-dashboard3.1、如果启动成功，可以在浏览器访问3.2、如果没有跳转，需要单独安装 kubernetes-dashboard3.2.1、方式一：一步到位3.2.2、方式二：逐步进行 1、Enab…...

编程日记 2024/10/5 17:54:46

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2026/2/9 0:12:12

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...

编程新知 2026/1/23 10:24:30

汽车生产虚拟实训中的技能提升与生产优化

在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...

编程新知 2026/1/25 7:20:01

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式一、引入在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题问题现象当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

Vue的配置与项目创建

安装脚手架

创建项目

配置serve

模板语法

绑值语法

渲染html(v-html)

绑定属性(v-bind)

使用场景

实例

事件绑定（v-on）

快捷绑定

绑定方法

判断(v-if)

列表渲染（v-for）

双向绑定(v-model)

组件基础

使用组件步骤

组件的组织

Props组件交互

使用案例

Prop类型

自定义事件组件交互

组件生命周期

生命周期概述

1. 创建阶段

2. 挂载阶段

3. 更新阶段

4. 销毁阶段

axios

安装与引入

常用请求方法

查询参数（get）

数据提交（post）

总结

网络请求封装

vue路由

了解

路由传递参数

嵌套路由配置

Vue状态管理

引入状态管理

vue状态管理核心

案例--面经基础

配置路由

首页请求渲染

跳转详情页传参

查询参数

动态路由

详情页渲染

组件缓存

相关文章：