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

【前端知识】Javascript前端框架Vue入门

前端框架VUE入门

    • 概述
    • 基础语法介绍
    • 组件特性
      • 组件注册
      • Props 属性声明
      • 事件
      • 组件 v-model(双向绑定)
      • 插槽Slots内容与出口
    • 组件生命周期
    • 样式文件使用
      • 1. 直接在`<style>`标签中写CSS
      • 2. 引入外部CSS文件
      • 3. 使用CSS预处理器
      • 4. 在`main.js`中全局引入CSS文件
      • 5. 使用CSS Modules
      • 6. 使用PostCSS
    • 完整示例
      • 1. 创建 Vue 项目(如果还没有)
      • 2. 定义和使用组件
      • 3. 在主应用中使用组件
      • 4. 运行应用
      • 完整项目结构
    • 参考文献

概述

Vue.js(发音为 /vjuː/,类似于 “view”)是一款用于构建用户界面的JavaScript框架。以下是Vue.js的一些核心特点和介绍:

  1. 渐进式框架:Vue被设计为可以自底向上逐层应用,使其成为一个渐进式框架。这意味着开发者可以逐步地采用Vue.js,而不必一开始就完全重写现有的项目。

  2. 视图层关注:Vue的核心库只关注视图层,易于上手,并且便于与第三方库或既有项目整合。

  3. MVVM架构:Vue.js是一个提供了MVVM(Model-View-ViewModel)风格双向数据绑定的JavaScript库,专注于View层。它的核心是ViewModel,负责连接View和Model,保证视图和数据的一致性。

  4. 轻量级框架:Vue.js能够自动追踪依赖的模板表达式和计算属性,提供MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。

  5. 双向数据绑定:Vue.js允许采用简洁的模板语法将数据声明式渲染整合进DOM,这是Vue.js的核心特性之一。

  6. 指令和组件化:Vue.js通过内置指令与页面进行交互,并且支持组件化开发,使得开发者可以构建可复用的组件。

  7. 响应性:Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。

  8. 生态系统:Vue不仅仅是一个框架,它还包括了一系列现代化的工具链和支持类库,如vue-router、vuex等,可以为复杂的单页应用提供完整的解决方案。

  9. 灵活性:Vue的简单小巧的核心和渐进式技术栈使其足以应对任何规模的应用。

  10. 性能:Vue.js拥有20kb的min+gzip运行大小和超快的虚拟DOM性能,提供了最省心的优化。

Vue.js适用于从简单到复杂的各种界面开发,并且由于其灵活性和渐进式的特性,它成为了生产环境中广泛使用的一个JavaScript框架之一。

基础语法介绍

Vue.js 是一个渐进式JavaScript框架,用于构建用户界面。以下是Vue.js的一些基础语法:

  1. 声明式渲染

    <div id="app">{{ message }}
    </div>
    

    在Vue实例中,message 是一个响应式的数据属性。

  2. 数据绑定

    <div id="app"><p>{{ user.name }}</p>
    </div>
    

    这里,user 是一个对象,name 是它的属性。

  3. 指令

    • v-bind:用于动态地绑定一个或多个属性,或一个组件prop到表达式。
      <img v-bind:src="imageSrc">
      
    • v-model:在表单输入和应用状态之间创建双向数据绑定。
      <input v-model="message">
      
    • v-on:监听DOM事件并在事件触发时执行表达式。
      <button v-on:click="counter += 1">增加</button>
      
    • v-for:基于源数据多次渲染元素或模板块。
      <li v-for="item in items">{{ item.text }}</li>
      
    • v-ifv-else-ifv-else:条件渲染。
      <p v-if="user.isLoggedIn">欢迎回来!</p>
      
    • v-show:根据表达式的真假值切换元素的CSS display 属性。
      <p v-show="user.isLoggedIn">欢迎回来!</p>
      
  4. 计算属性

    new Vue({el: '#app',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName;}}
    });
    

    使用 fullName 时,它将自动更新。

  5. 方法

    <button v-on:click="sayHello">Say hello</button>
    
    new Vue({el: '#app',methods: {sayHello: function () {alert('Hello, ' + this.fullName);}}
    });
    
  6. 事件处理

    <button v-on:click="say('Hello')">Say Hello</button>
    
    new Vue({el: '#app',methods: {say: function (message) {alert(message);}}
    });
    
  7. 组件

    Vue.component('my-component', {template: '<div>A custom component!</div>'
    });
    

    在父组件中使用:

    <my-component></my-component>
    
  8. 生命周期钩子

    new Vue({el: '#app',created: function () {console.log('Vue instance created');}
    });
    
  9. 表单输入绑定

    <input v-model="message" placeholder="edit me">
    
  10. 列表渲染

    <ul id="list"><li v-for="item in items">{{ item.text }}</li>
    </ul>
    

这些是Vue.js中一些基础的语法和概念,Vue.js的功能远不止这些,还有更多高级特性等待探索。

组件特性

组件注册

  • 全局注册
import { createApp } from 'vue'
const app = createApp({})
app.component(// 注册的名字'MyComponent',// 组件的实现{/* ... */}
)

如果使用单文件组件,你可以注册被导入的 .vue 文件

import MyComponent from './App.vue'app.component('MyComponent', MyComponent)

Props 属性声明

一个组件需要显式声明它所接受的 props,这样 Vue 才能知道外部传入的哪些是 props,哪些是透传 attribute

  • defineProps方式
<script setup>
const props = defineProps(['foo'])console.log(props.foo)
</script>
  • 使用props属性的方式
export default {props: ['foo'],setup(props) {// setup() 接收 props 作为第一个参数console.log(props.foo)}
}

事件

在组件的模板表达式中,可以直接使用 $emit 方法触发自定义事件 (例如:在 v-on 的处理函数中):

<!-- MyComponent -->
<button @click="$emit('someEvent')">Click Me</button>

父组件可以通过 v-on (缩写为 @) 来监听事件:

<MyComponent @some-event="callback" />

同样,组件的事件监听器也支持 .once 修饰符:

<MyComponent @some-event.once="callback" />

像组件与 prop 一样,事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件,但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样,在模板中我们也推荐使用 kebab-case 形式来编写监听器。

组件 v-model(双向绑定)

<!-- Child.vue -->
<script setup>
const model = defineModel()function update() {model.value++
}
</script><template><div>Parent bound v-model is: {{ model }}</div><button @click="update">Increment</button>
</template>

父组件可以用 v-model 绑定一个值:

<!-- Parent.vue -->
<Child v-model="countModel" />

插槽Slots内容与出口

举例来说,这里有一个 组件,可以像这样使用:

<FancyButton>Click me! <!-- 插槽内容 -->
</FancyButton>

而 的模板是这样的:

<button class="fancy-btn"><slot></slot> <!-- 插槽出口 -->
</button>

元素是一个插槽出口 (slot outlet),标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
slots

组件生命周期

Vue组件的生命周期指的是组件从创建到销毁的整个过程,Vue为这个生命周期提供了一系列的钩子函数,允许我们在不同阶段执行代码。以下是Vue组件的主要生命周期钩子:
lifecycle

  1. beforeCreate

    • 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    • 在这个阶段,组件实例的 datamethods 还未被设置,因此不能访问 datamethods
  2. created

    • 实例已经创建完成,数据观测 (data observer)、属性和方法的运算,watch/event 事件回调。
    • 然而,挂载阶段还没开始,$el 属性目前不可见,$el 会在 beforeMount 钩子中被创建。
  3. beforeMount

    • 在挂载开始之前被调用:相关的 render 函数首次被调用。
    • 此时 $el 已经被创建,你可以访问到 $el,但 $el 还没有被插入文档。
  4. mounted

    • 挂载结束:$el 已经被新创建的 vm.$el 替换了,data 已经被设置,所有的子组件也都挂载完成了。
    • 可以执行DOM操作,如访问子组件实例或执行DOM操作。
  5. beforeUpdate

    • 在数据变化之后,DOM重新渲染之前调用,此时可以在这个钩子中进一步地更改状态,这不会触发额外的重渲染。
  6. updated

    • 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
    • 可以执行依赖于DOM的操作。
  7. beforeDestroy

    • 实例销毁之前调用。在这一步,实例仍然完全可用。
    • 可以执行清理工作,例如解绑事件。
  8. destroyed

    • Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
    • 该钩子的调用标志着实例生命周期的结束。
  9. errorCaptured (全局混入或组件内):

    • 当捕获一个来自子孙组件的错误时被调用。这成为了“全局”生命周期钩子的一部分,也可用于组件内。
    • 它提供了两个参数:错误对象和错误来源的组件实例。
  10. activateddeactivated

    • 这两个钩子函数仅在 keep-alive 组件中生效。
    • activated 在缓存组件被激活时调用。
    • deactivated 在缓存组件被停用时调用。

这些生命周期钩子函数提供了在组件的不同阶段执行代码的能力,使得开发者可以更好地控制组件的行为和状态。

样式文件使用

在Vue项目中引入CSS可以通过多种方式,以下是几种常用的方法:

1. 直接在<style>标签中写CSS

在Vue组件的<style>标签中直接编写CSS,这样CSS只会作用于当前组件:

<template><div class="my-component"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style scoped>
.my-component {/* 样式只会应用到当前组件 */
}
</style>

使用scoped属性可以确保样式只作用于当前组件,避免影响到其他组件。

2. 引入外部CSS文件

在Vue组件中引入外部的CSS文件:

<template><div class="my-component"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style>
@import './path/to/your-styles.css';
</style>

3. 使用CSS预处理器

Vue CLI支持Sass、Less等CSS预处理器,可以在项目中引入预处理器并使用:

<template><div class="my-component"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style lang="scss" scoped>
.my-component {// 使用Sass语法$color: #333;background-color: $color;
}
</style>

4. 在main.js中全局引入CSS文件

如果你想在全局范围内使用某个CSS文件,可以在项目的入口文件main.js中引入:

import Vue from 'vue';
import App from './App.vue';
import './assets/global.css'; // 全局引入CSS文件new Vue({render: h => h(App),
}).$mount('#app');

5. 使用CSS Modules

CSS Modules是一种CSS本地化技术,可以在Vue中使用:

<template><div :class="$style.myComponent"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style module>
.myComponent {/* 样式 */
}
</style>

在模板中使用:class="$style.myComponent"来应用样式,CSS Modules会自动处理类名,使其唯一,避免全局污染。

6. 使用PostCSS

PostCSS是一个用JavaScript工具和插件转换CSS代码的工具,可以在Vue CLI项目中配置PostCSS来实现自动前缀添加、变量处理等功能。

以上是在Vue项目中引入CSS的几种方法,你可以根据项目需求和个人喜好选择合适的方式。

完整示例

以下是一个简单的 Vue.js 组件定义和使用的完整代码示例。我们将创建一个名为 HelloWorld 的组件,并在一个 Vue 应用中使用它。

1. 创建 Vue 项目(如果还没有)

首先,如果你还没有 Vue 项目,你可以使用 Vue CLI 创建一个新的 Vue 项目。在命令行中运行以下命令:

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

2. 定义和使用组件

src/components 目录下创建一个新的文件 HelloWorld.vue,并添加以下代码:

<!-- src/components/HelloWorld.vue -->
<template><div class="hello"><h1>{{ msg }}</h1><p>Welcome to your Vue.js app with a custom component!</p></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
h1 {color: #42b983;
}
</style>

这个组件包含一个简单的模板,它显示一个标题和一个段落。它还有一个名为 msg 的 prop,你可以将外部数据传递给这个 prop。

3. 在主应用中使用组件

打开 src/App.vue 文件,并修改它以便使用 HelloWorld 组件:

<!-- src/App.vue -->
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Hello Vue.js!" /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</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>

在这个文件中,我们导入了 HelloWorld 组件,并在模板中使用了它。我们传递了一个 msg prop,其值为 "Hello Vue.js!"

4. 运行应用

确保你的开发服务器正在运行(在 my-vue-app 目录下运行 npm run serve)。然后,打开浏览器并访问 http://localhost:8080,你应该能看到应用已经正确渲染了 HelloWorld 组件的内容。

完整项目结构

你的项目结构应该类似于这样:

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

现在你已经成功定义了一个 Vue 组件并在你的 Vue 应用中使用了它!

参考文献

vue官网地址

相关文章:

【前端知识】Javascript前端框架Vue入门

前端框架VUE入门 概述基础语法介绍组件特性组件注册Props 属性声明事件组件 v-model(双向绑定)插槽Slots内容与出口 组件生命周期样式文件使用1. 直接在<style>标签中写CSS2. 引入外部CSS文件3. 使用CSS预处理器4. 在main.js中全局引入CSS文件5. 使用CSS Modules6. 使用P…...

Springboot3.3.5 启动流程之 Bean创建流程

在文章Springboot3.3.5 启动流程&#xff08;源码分析&#xff09;中我们只是粗略的介绍了bean 的装配(Bean的定义)流程和实例化流程分别开始于 finishBeanFactoryInitialization 和 preInstantiateSingletons. 其实,在Spring boot中&#xff0c;Bean 的装配是多阶段的&#xf…...

golang反射函数注册

package main import ( “fmt” “reflect” ) type Job interface { New([]interface{}) interface{} Run() (interface{}, error) } type DetEd struct { Name string Age int } // 为什么这样设计 // 这样就避免了 在创建新的实例的之后 结构体的方法中接受者为指针类型…...

【Spring】Bean

Spring 将管理对象称为 Bean。 Spring 可以看作是一个大型工厂&#xff0c;用于生产和管理 Spring 容器中的 Bean。如果要使用 Spring 生产和管理 Bean&#xff0c;那么就需要将 Bean 配置在 Spring 的配置文件中。Spring 框架支持 XML 和 Properties 两种格式的配置文件&#…...

深入解析TK技术下视频音频不同步的成因与解决方案

随着互联网和数字视频技术的飞速发展&#xff0c;音视频同步问题逐渐成为网络视频播放、直播、编辑等过程中不可忽视的技术难题。尤其是在采用TK&#xff08;Transmission Keying&#xff09;技术进行视频传输时&#xff0c;由于其特殊的时序同步要求&#xff0c;音视频不同步现…...

为什么要使用Ansible实现Linux管理自动化?

自动化和Linux系统管理 多年来&#xff0c;大多数系统管理和基础架构管理都依赖于通过图形或命令行用户界面执行的手动任务。系统管理员通常使用清单、其他文档或记忆的例程来执行标准任务。 这种方法容易出错。系统管理员很容易跳过某个步骤或在某个步骤上犯错误。验证这些步…...

Android:任意层级树形控件(有效果图和Demo示例)

先上效果图&#xff1a; 1.创建treeview文件夹 2.treeview -> adapter -> SimpleTreeAdapter.java import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.ListView; i…...

C++ 容器全面剖析:掌握 STL 的奥秘,从入门到高效编程

引言 C 标准模板库&#xff08;STL&#xff09;提供了一组功能强大的容器类&#xff0c;用于存储和操作数据集合。不同的容器具有独特的特性和应用场景&#xff0c;因此选择合适的容器对于程序的性能和代码的可读性至关重要。对于刚接触 C 的开发者来说&#xff0c;了解这些容…...

C++---类型转换

文章目录 C的类型转换C的4种强制类型转换RTTI C的类型转换 类型转换 内置类型之间的转换 // a、内置类型之间 // 1、隐式类型转换 整形之间/整形和浮点数之间 // 2、显示类型的转换 指针和整形、指针之间 int main() {int i 1;// 隐式类型转换double d i;printf("%d…...

CSS基础学习练习题

编程题 1.为下面这段文字定义字体样式&#xff0c;要求字体类型指定多种、大小为14px、粗细为粗体、颜色为蓝色。 “有规划的人生叫蓝图&#xff0c;没规划的人生叫拼图。​” 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><me…...

TypeScript知识点总结和案例使用

TypeScript 是一种由微软开发的开源编程语言&#xff0c;它是 JavaScript 的超集&#xff0c;提供了静态类型检查和其他一些增强功能。以下是一些 TypeScript 的重要知识点总结&#xff1a; 1. 基本类型 TypeScript 支持多种基本数据类型&#xff0c;包括&#xff1a; numbe…...

解决BUG: Since 17.0, the “attrs“ and “states“ attributes are no longer used.

从Odoo 17.0开始&#xff0c;attrs和states属性不再使用&#xff0c;取而代之的是使用depends和domain属性来控制字段的可见性和其他行为。如果您想要在选择国家之后继续选择州&#xff0c;并且希望在选择了国家之后才显示州字段&#xff0c;您可以使用depends属性来实现这一点…...

单片机GPIO中断+定时器 实现模拟串口接收

单片机GPIO中断定时器 实现模拟串口接收 解决思路代码示例 解决思路 串口波特率9600bps,每个bit约为1000000us/9600104.16us&#xff1b; 定时器第一次定时时间设为52us即半个bit的时间&#xff0c;其目的是偏移半个bit时间&#xff0c;之后的每104us采样并读取1bit数据。使得…...

《深入理解 Spring MVC 工作流程》

一、Spring MVC 架构概述 Spring MVC 是一个基于 Java 的轻量级 Web 应用框架&#xff0c;它遵循了经典的 MVC&#xff08;Model-View-Controller&#xff09;设计模式&#xff0c;将请求、响应和业务逻辑分离&#xff0c;从而构建出灵活可维护的 Web 应用程序。 在 Spring MV…...

HTML简介

知识点一 HTML 什么是HTML&#xff1f; 超文本标记语言(HyperTextMarkup Language&#xff0c;简称HTML) 怎么学HTML&#xff1f; HTML 是一门标记语言&#xff0c;标记语言由一套标记标签组成&#xff0c;学习 HTML&#xff0c;其实就是学习标签 开发工具 编辑器: Pycha…...

Linux系统Centos设置开机默认root用户

目录 一. 教程 二. 部分第三方工具配置也无效 一. 教程 使用 Linux 安装Centos系统的小伙伴大概都知道&#xff0c;我们进入系统后&#xff0c;通常都是自己设置的普通用户身份&#xff0c;而不是 root 超级管理员用户&#xff0c;导致我们在操作文件夹时往往爆出没有权限&am…...

【网络安全 | 甲方建设】双/多因素认证、TOTP原理及实现

未经许可,不得转载。 文章目录 背景双因素、多因素认证双因素认证(2FA)多因素认证(MFA)TOTP实现TOTP生成流程TOTP算法TOTP代码示例(JS)Google Authenticator总结背景 在传统的在线银行系统中,用户通常只需输入用户名和密码就可以访问自己的账户。然而,如果密码不慎泄…...

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案

Nuxt3 动态路由URL不更改的前提下参数更新&#xff0c;NuxtLink不刷新不跳转&#xff0c;生命周期无响应解决方案 首先说明一点&#xff0c;Nuxt3 的动态路由响应机制是根据 URL 是否更改&#xff0c;参数的更改并不会触发 Router 去更新页面&#xff0c;这在 Vue3 上同样存在…...

2024华为java面经

华为2024年Java招聘面试题目可能会涵盖Java基础知识、核心技术、框架与工具、项目经验以及算法与数据结构等多个方面。以下是考的内容。 一、Java基础知识 Java中有哪些基本数据类型&#xff1f; Java为什么能够跨平台运行&#xff1f; String是基本数据类型吗&#xff1f;能…...

2021 年 9 月青少年软编等考 C 语言三级真题解析

目录 T1. 课程冲突思路分析T2. 余数相同问题思路分析T3. 生成括号思路分析T4. 广义格雷码思路分析T5. 菲波那契数列思路分析T1. 课程冲突 小 A 修了 n n n 门课程,第 i i i 门课程是从第 a i a_i ai​ 天一直上到第 b i b_i bi​ 天。 定义两门课程的冲突程度为:有几天…...

深度解析FastDFS:构建高效分布式文件存储的实战指南(下)

接上篇&#xff1a;《深度解析FastDFS&#xff1a;构建高效分布式文件存储的实战指南&#xff08;上&#xff09;》 传送门: link 文章目录 六、常用命令七、FastDFS配置详解7.1 tracker配置文件7.2 tracker目录及文件结构7.3 storage配置文件7.4 storage服务器的目录结构和文件…...

Python学习29天

二分查找 # 定义函数冒泡排序法从大到小排列 def bbble_sort(list):# i控制排序次数for i in range(len(list) - 1):# j控制每次排序比较次数for j in range(len(list) - 1 - i):if list[j] < list[j 1]:list[j], list[j 1] list[j 1], list[j] # 定义二分查找函数 def…...

Soul App创始人张璐团队携多模态大模型参加GITEX GLOBAL,展现未来社交趋势

作为中东地区规模最大、最成功的计算机通讯及消费性电子产品展,GITEX GLOBAL一直颇受全球关注,于今年迎来了第44届盛会。自诞生以来,GITEX GLOBAL始终聚焦技术驱动的创新,吸引了许多科技巨头、创新企业及投资者的参与。Soul App作为中国较早将AI技术引入社交的企业,今年首次亮相…...

简单工厂模式、方法工厂模式

简单工厂模式&#xff08;Simple Factory Pattern&#xff09; 简单工厂模式的核心思想是通过一个工厂类&#xff0c;根据提供的参数来决定创建哪一个具体的产品类实例。 这个模式通常用于产品种类较少&#xff0c;且不经常变化的场景。 interface Product {void create(); }…...

【面试】前端vue项目架构详细描述

基于您提供的技术栈和要求&#xff0c;以下是前端项目的架构设计描述&#xff1a; 项目结构 • 入口文件&#xff1a; main.js 作为项目的入口文件&#xff0c;负责初始化 Vue 实例&#xff0c;并挂载到 DOM 上。 • 组件目录&#xff1a; components 目录包含项目的所有 Vue 组…...

BERT的中文问答系统32

我们需要在现有的代码基础上增加网络搜索功能&#xff0c;并在大模型无法提供满意答案时调用网络搜索。以下是完整的代码和文件结构说明&#xff0c;我们创建一个完整的项目结构&#xff0c;包括多个文件和目录。这个项目将包含以下部分&#xff1a; 主文件 (main.py)&#xf…...

大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 拦截器实现 Java

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…...

idea maven 重新构建索引

当设置maven仓库为离线模式的时候&#xff0c;会出现一些问题。 比如本地的仓库被各种方式手动更新之后&#xff0c; 举例&#xff1a;我需要一个spring的包&#xff0c;在pmo文件中写好了引入包的代码 但是由于是离线模式没有办法触发自动下载&#xff0c;那么这个时候我可以…...

C#桌面应用制作计算器

C#桌面应用制作简易计算器&#xff0c;可实现数字之间的加减乘除、AC按键清屏、Del按键清除末尾数字、/-按键取数字相反数、%按键使数字缩小100倍、按键显示运算结果等...... 页面实现效果 功能实现 布局 计算器主体使用Panel容器&#xff0c;然后将button控件排列放置Pane…...

细说STM32单片机DMA中断收发RTC实时时间并改善其鲁棒性的方法

目录 一、DMA基础知识 1、DMA简介 (1)DMA控制器 (2)DMA流 (3)DMA请求 (4)仲裁器 (5)DMA传输属性 2、源地址和目标地址 3、DMA传输模式 4、传输数据量的大小 5、数据宽度 6、地址指针递增 7、DMA工作模式 8、DMA流的优先级别 9、FIFO或直接模式 10、单次传输或突…...

响应式网站建设多少钱/网络广告案例以及分析

linux系统中&#xff0c;nl命令用来计算文件中行号。nl 可以将输出的文件内容自动的加上行号&#xff01;其默认的结果与 cat -n 有点不太一样&#xff0c; nl 可以将行号做比较多的显示设计&#xff0c;包括位数与是否自动补齐 0 等的功能。 1&#xff0e;命令格式&#xff1…...

用三权重的网站做友链有好处没/白帽seo是什么

2012年即将过去&#xff0c;从毕业到现在一年半时间&#xff0c;在w公司的维护岗位上也工作了整一年。这一年时间里&#xff0c;像大多数运维人员一样&#xff0c;每天24小时待命&#xff0c;也有半夜被叫起来处理问题的苦逼&#xff0c;但回望这一年维护工作&#xff0c;更多的…...

初中生如何做网站/nba最新交易信息

介质访问控制 ALOHA协议 纯ALOHA协议 时隙ALOHA协议 关于ALOHA要知道的事 1.纯ALOHA比时隙ALOHA吞吐量更低&#xff0c;效率更低。 2.纯ALOHA想发就发&#xff0c;时隙ALOHA只有在时间片段开始时才能发。...

CSS3网站建设/0元入驻的电商平台

2019独角兽企业重金招聘Python工程师标准>>> 闲话不多说&#xff0c;直接上代码&#xff01; 1、第一步&#xff0c;首先搭建如下架构&#xff0c;其中&#xff0c;annotation中放置自己编写的注解&#xff0c;主要包括service controller qualifier RequestMapping…...

济南软件优化网站/口碑营销方案

这篇文章主要介绍了pygame开发&#xff0c;通过本文&#xff0c;您可以使用pygame开发一个马赛逻辑小游戏~有需要的朋友可以借鉴参考下&#xff0c;希望能够有所帮助 一、游戏简介 马赛逻辑&#xff0c;是一个类似数独和扫雷的逻辑小游戏&#xff0c;根据棋盘周围的数据提示点…...

能被百度收录的建站网站/最大免费发布平台

单例无外乎每次调用返回的都是同一个对象&#xff0c;可以利用闭包实现 function Singleton(){this.data "singleton";}Singleton.getInstance (function(){var instance;return function(){instance instance ? instance:new Singleton;return instance;}})();v…...