Vue3从入门到精通(一)
Vue3简介
Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于:
更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM算法等方式,提高了渲染性能。
更小的体积:Vue3的体积比Vue2更小,打包后的文件更小,加载速度更快。
更好的类型支持:Vue3对TypeScript的支持更加友好,提供了更好的类型支持。
更好的组合式API:Vue3提供了更好的组合式API,使得组件的复用和维护更加方便。
更好的Tree-shaking支持:Vue3对Tree-shaking的支持更加完善,可以更好地优化打包后的代码。
总之,Vue3是一个更加优秀的版本,可以帮助开发者更好地构建高性能、易维护的Web应用程序。
Vue API风格
Vue API风格主要有两种:对象风格和函数风格。
对象风格
对象风格是Vue 2.x版本的API风格,它将Vue实例作为一个对象,通过对象的属性和方法来操作Vue实例。例如:
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
showMessage: function () {
alert(this.message)
}
}
})
vm.message = 'Hello World!'
vm.showMessage()
在上面的代码中,我们使用对象风格的API来创建Vue实例,设置数据和方法,并通过vm对象来操作Vue实例。
函数风格
函数风格是Vue 3.x版本的API风格,它将Vue实例作为一个函数,通过函数的参数和返回值来操作Vue实例。例如:
import { createApp } from 'vue'
const app = createApp({
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
showMessage() {
alert(this.message)
}
}
})
const vm = app.mount('#app')
vm.message = 'Hello World!'
vm.showMessage()
在上面的代码中,我们使用函数风格的API来创建Vue实例,设置数据和方法,并通过app.mount()方法来挂载Vue实例,然后通过vm对象来操作Vue实例。
总的来说,函数风格的API更加简洁和易于理解,而且更加符合现代JavaScript的编程风格。因此,Vue 3.x版本的API采用了函数风格。
Vue3开发前的准备
在开始使用Vue3进行开发之前,需要进行以下准备工作:
安装Node.js和npm
Vue3需要Node.js和npm的支持,因此需要先安装它们。可以在Node.js官网下载对应版本的安装包进行安装。
安装Vue CLI
Vue CLI是Vue.js官方提供的脚手架工具,可以帮助我们快速创建Vue项目。可以使用以下命令全局安装Vue CLI:
npm install -g @vue/cli
选择编辑器
选择一个适合自己的编辑器进行开发,推荐使用Visual Studio Code,它有很多Vue相关的插件和工具。
学习Vue基础知识
在使用Vue3进行开发之前,需要先掌握Vue的基础知识,包括Vue的核心概念、Vue组件、Vue指令、Vue生命周期等。
学习TypeScript
Vue3使用TypeScript进行开发,因此需要先学习TypeScript的基础知识,包括TypeScript的数据类型、接口、类、泛型等。
总的来说,学习Vue3需要一定的前置知识,需要掌握Node.js、npm、Vue CLI、编辑器、Vue基础知识和TypeScript等知识点。
vue3 项目目录结构
Vue3项目的目录结构与Vue2有些不同,主要是因为Vue3使用了新的模块化系统和TypeScript语言。
以下是一个Vue3项目的典型目录结构:
├── public
│ ├── index.html
│ └── favicon.ico
├── src
│ ├── assets
│ ├── components
│ ├── router
│ ├── store
│ ├── utils
│ ├── views
│ ├── App.vue
│ └── main.ts
├── tests
├── node_modules
├── package.json
├── tsconfig.json
└── README.md
public
:存放静态资源文件,如HTML文件、图片、图标等。src
:存放源代码文件。assets
:存放静态资源文件,如CSS、图片、字体等。components
:存放Vue组件文件。router
:存放Vue Router路由文件。store
:存放Vuex状态管理文件。utils
:存放工具函数文件。views
:存放页面组件文件。App.vue
:根组件文件。main.ts
:入口文件,包括Vue实例的创建和挂载等。
tests
:存放测试文件。node_modules
:存放项目依赖的第三方库。package.json
:存放项目的配置信息和依赖库信息。tsconfig.json
:存放TypeScript编译器的配置信息。README.md
:项目说明文件。
总的来说,Vue3项目的目录结构与Vue2有些不同,但是基本的结构还是相似的,包括静态资源文件、源代码文件、测试文件、依赖库信息等。
vue3 模板语法
Vue3的模板语法与Vue2的模板语法基本相同,但也有一些变化。以下是Vue3的模板语法:
插值表达式
Vue3的插值表达式使用{{}}
,例如:
<div>{{ message }}</div>
指令
Vue3的指令使用v-
前缀,例如:
<input v-model="message">
常用的指令包括:
v-if
:条件渲染。v-for
:循环渲染。v-bind
:绑定属性。v-on
:绑定事件。v-model
:双向绑定。
计算属性
Vue3的计算属性使用computed
关键字,例如:
<template>
<div>{{ reversedMessage }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
监听器
Vue3的监听器使用watch
关键字,例如:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World'
}
},
watch: {
message(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
}
</script>
生命周期
Vue3的生命周期与Vue2基本相同,但是使用了新的API。例如:
<template>
<div>{{ message }}</div>
</template>
<script>
import { onMounted, onUpdated, onUnmounted } from 'vue'
export default {
data() {
return {
message: 'Hello World'
}
},
setup() {
onMounted(() => {
console.log('mounted')
})
onUpdated(() => {
console.log('updated')
})
onUnmounted(() => {
console.log('unmounted')
})
}
}
</script>
总的来说,Vue3的模板语法与Vue2基本相同,但是使用了新的API,包括computed
、watch
和生命周期等。
vue3 属性绑定
在Vue3中,属性绑定使用v-bind:
或简写的:
,例如:
<template>
<div :class="className"></div>
</template>
<script>
export default {
data() {
return {
className: 'red'
}
}
}
</script>
上面的代码中,:class
绑定了一个名为className
的data属性,这个属性的值为'red'
,所以<div>
元素会被添加一个class
属性,值为'red'
。
除了绑定data属性,还可以绑定表达式、计算属性、甚至是方法的返回值。例如:
<template>
<div :class="isActive ? 'active' : 'inactive'"></div>
<div :class="getClass()"></div>
</template>
<script>
export default {
data() {
return {
isActive: true
}
},
methods: {
getClass() {
return this.isActive ? 'active' : 'inactive'
}
}
}
</script>
上面的代码中,:class
绑定了一个三元表达式和一个方法的返回值,这两个值都可以被作为class
属性的值。
需要注意的是,在Vue3中,绑定属性时,可以使用v-bind:
或简写的:
,但是在绑定事件时,必须使用v-on:
或简写的@
。例如:
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('clicked')
}
}
}
</script>
上面的代码中,@click
绑定了一个handleClick
方法,这个方法会在按钮被点击时被调用。
vue3 条件渲染
Vue3中的条件渲染和Vue2类似,使用v-if
和v-else
指令来控制元素的显示和隐藏。
示例代码如下:
<template>
<div>
<div v-if="show">显示内容</div>
<div v-else>隐藏内容</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
上面的代码中,根据show
的值来决定显示哪个<div>
元素。
除了v-if
和v-else
,还有v-else-if
可以用来实现多个条件的判断。
示例代码如下:
<template>
<div>
<div v-if="type === 'A'">类型A</div>
<div v-else-if="type === 'B'">类型B</div>
<div v-else-if="type === 'C'">类型C</div>
<div v-else>未知类型</div>
</div>
</template>
<script>
export default {
data() {
return {
type: 'B'
}
}
}
</script>
上面的代码中,根据type
的值来决定显示哪个<div>
元素。
需要注意的是,v-if
是惰性的,只有当条件为真时才会渲染元素,否则不会渲染。而v-show
则是直接控制元素的显示和隐藏,不管条件是否为真,元素都会被渲染,只是样式被设置为display: none
。
vue3 列表渲染
Vue3中的列表渲染和Vue2类似,使用v-for
指令来遍历数组或对象,并生成对应的元素。
示例代码如下:
<template>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['item1', 'item2', 'item3']
}
}
}
</script>
上面的代码中,使用v-for
指令遍历list
数组,并生成对应的<li>
元素。
除了数组,也可以遍历对象,例如:
<template>
<ul>
<li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
obj: {
key1: 'value1',
key2: 'value2',
key3: 'value3'
}
}
}
}
</script>
上面的代码中,使用v-for
指令遍历obj
对象,并生成对应的<li>
元素。
需要注意的是,每个v-for
都需要指定一个唯一的key
属性,用来标识每个元素的唯一性,以便在更新时能够正确地识别每个元素。
vue3 通过key管理状态
在Vue3中,通过key
属性可以管理组件或元素的状态。当一个组件或元素的key
属性发生变化时,Vue会认为它是一个不同的组件或元素,从而重新渲染它。
示例代码如下:
<template>
<div>
<button @click="toggle">切换</button>
<div v-if="show" :key="1">显示内容</div>
<div v-else :key="2">隐藏内容</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show
}
}
}
</script>
上面的代码中,使用key
属性来管理<div>
元素的状态。当show
变量的值发生变化时,<div>
元素的key
属性也会发生变化,从而重新渲染<div>
元素。
需要注意的是,key
属性的值必须是唯一的,不能重复。如果重复了,会导致Vue无法正确地识别每个组件或元素的状态,从而导致渲染错误。
vue3 事件处理
在Vue3中,事件处理的方式与Vue2相似,可以使用@
或v-on
指令来绑定事件。不同之处在于,Vue3中取消了.sync
修饰符,同时提供了新的修饰符和事件API。
绑定事件
可以使用@
或v-on
指令来绑定事件,语法与Vue2相同。示例如下:
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked!')
}
}
}
</script>
上面的代码中,使用@click
指令来绑定handleClick
方法,当按钮被点击时,会触发handleClick
方法。
事件修饰符
Vue3中提供了新的事件修饰符,包括.stop
、.prevent
、.capture
、.self
、.once
和.passive
。示例如下:
<template>
<div @click.stop="handleClick">Click me</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Div clicked!')
}
}
}
</script>
上面的代码中,使用.stop
修饰符来阻止事件冒泡,当div
元素被点击时,不会触发其父元素的点击事件。
动态事件名
在Vue3中,可以使用方括号来绑定动态事件名。示例如下:
<template>
<button @[eventName]="handleClick">Click me</button>
</template>
<script>
export default {
data() {
return {
eventName: 'click'
}
},
methods: {
handleClick() {
console.log('Button clicked!')
}
}
}
</script>
上面的代码中,使用@[eventName]
指令来绑定动态事件名,事件名为eventName
的值。
自定义事件
在Vue3中,可以使用createApp
方法的provide
和inject
选项来实现自定义事件的传递。示例如下:
// App.vue
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
import { provide } from 'vue'
import EventBus from './EventBus'
export default {
setup() {
provide('eventBus', EventBus)
},
methods: {
handleClick() {
EventBus.emit('customEvent', 'Hello, Vue3!')
}
}
}
</script>
// EventBus.js
import mitt from 'mitt'
const EventBus = mitt()
export default EventBus
// ChildComponent.vue
<template>
<div>{{ message }}</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const eventBus = inject('eventBus')
const message = ref('')
eventBus.on('customEvent', (data) => {
message.value = data
})
return {
message
}
}
}
</script>
上面的代码中,使用provide
方法将事件总线对象EventBus
注入到根组件中,然后在子组件中使用inject
方法获取事件总线对象,并通过on
方法监听自定义事件customEvent
,当事件触发时,更新message
的值。
vue3 事件传参
在Vue3中,事件传参的方式和Vue2基本相同,可以使用$event
来传递事件对象,也可以使用函数来传递自定义参数。
示例代码如下:
<template>
<div>
<button @click="handleClick($event, '参数')">点击</button>
</div>
</template>
<script>
export default {
methods: {
handleClick(event, arg) {
console.log(event) // 输出事件对象
console.log(arg) // 输出自定义参数
}
}
}
</script>
上面的代码中,使用$event
来传递事件对象,使用'参数'
来传递自定义参数。
另外,如果需要在事件处理函数中访问组件实例,可以使用箭头函数来绑定作用域,例如:
<template>
<div>
<button @click="() => handleClick('参数')">点击</button>
</div>
</template>
<script>
export default {
methods: {
handleClick(arg) {
console.log(this) // 输出组件实例
console.log(arg) // 输出自定义参数
}
}
}
</script>
上面的代码中,使用箭头函数来绑定作用域,从而在事件处理函数中访问组件实例。
vue3 事件修饰符
在Vue3中,事件修饰符的使用方式和Vue2基本相同,可以通过在事件名后面添加.修饰符
的方式来使用事件修饰符。
常用的事件修饰符包括:
.stop
:阻止事件冒泡.prevent
:阻止事件默认行为.capture
:使用事件捕获模式.self
:只在事件目标自身触发时触发事件.once
:只触发一次事件.passive
:告诉浏览器该事件不会调用preventDefault()
方法,可以优化页面滚动性能
示例代码如下:
<template>
<div>
<button @click.stop="handleClick">点击</button>
<a href="#" @click.prevent="handleClick">链接</a>
<div @click.capture="handleClick">容器</div>
<button @click.self="handleClick">点击</button>
<button @click.once="handleClick">点击</button>
<div @scroll.passive="handleScroll">滚动</div>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('点击事件')
},
handleScroll() {
console.log('滚动事件')
}
}
}
</script>
上面的代码中,使用不同的事件修饰符来控制事件的行为。例如,使用.stop
修饰符来阻止事件冒泡,使用.prevent
修饰符来阻止事件默认行为,使用.capture
修饰符来使用事件捕获模式,使用.self
修饰符来只在事件目标自身触发时触发事件,使用.once
修饰符来只触发一次事件,使用.passive
修饰符来告诉浏览器该事件不会调用preventDefault()
方法,可以优化页面滚动性能。
vue3 计算属性
在Vue3中,计算属性的使用方式和Vue2基本相同,可以通过在组件的computed
选项中定义计算属性来计算和缓存值。
示例代码如下:
<template>
<div>
<p>商品数量:{{ quantity }}</p>
<p>商品总价:{{ totalPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 10,
count: 2
}
},
computed: {
quantity() {
return this.count
},
totalPrice() {
return this.price * this.count
}
}
}
</script>
上面的代码中,使用computed
选项来定义计算属性quantity
和totalPrice
,分别计算商品数量和商品总价。
在模板中,可以像访问普通属性一样访问计算属性,例如{{ quantity }}
和{{ totalPrice }}
。
需要注意的是,在Vue3中,计算属性的返回值可以是一个函数,这样可以实现动态计算属性。示例代码如下:
<template>
<div>
<p>商品数量:{{ quantity }}</p>
<p>商品总价:{{ totalPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 10,
count: 2,
discount: 0.8
}
},
computed: {
quantity() {
return this.count
},
totalPrice() {
return () => this.price * this.count * this.discount
}
}
}
</script>
上面的代码中,计算属性totalPrice
返回一个函数,这个函数会动态计算商品总价,考虑到折扣可能会变化,因此需要动态计算商品总价。
vue3 class绑定
在Vue3中,可以使用v-bind:class
指令来绑定一个对象或数组来动态地设置一个元素的class属性。
下面是使用对象语法绑定class的示例代码:
<template>
<div :class="{ active: isActive, 'text-danger': hasError }">Hello, Vue3!</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
}
}
}
</script>
上面的代码中,使用:class
指令来绑定一个对象,这个对象的属性名是class名称,属性值是一个布尔值,表示是否应用这个class。在这个示例中,如果isActive
为true
,则会应用active
这个class,如果hasError
为true
,则会应用text-danger
这个class。
下面是使用数组语法绑定class的示例代码:
<template>
<div :class="[isActive ? 'active' : '', errorClass]">Hello, Vue3!</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
errorClass: 'text-danger'
}
}
}
</script>
上面的代码中,使用:class
指令来绑定一个数组,这个数组的元素可以是字符串或对象。如果数组元素是字符串,则表示应用这个class;如果数组元素是对象,则表示应用这个对象中的class。
在这个示例中,如果isActive
为true
,则会应用active
这个class,如果errorClass
为text-danger
,则会应用text-danger
这个class。
需要注意的是,在Vue3中,可以使用动态组件来动态渲染不同的组件,这个功能可以使用<component>
元素和is
特性来实现。示例代码如下:
<template>
<div>
<button @click="currentComponent = 'ComponentA'">ComponentA</button>
<button @click="currentComponent = 'ComponentB'">ComponentB</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
}
}
</script>
上面的代码中,使用<component>
元素和is
特性来动态渲染不同的组件。在这个示例中,点击ComponentA
按钮会渲染ComponentA
组件,点击ComponentB
按钮会渲染ComponentB
组件。
vue3 style 绑定
在Vue3中,可以使用v-bind
指令或简写的:
来动态绑定样式。
绑定单个样式
可以使用对象语法来绑定单个样式,对象的属性名为样式名,属性值为样式值。示例如下:
<template>
<div :style="{ color: textColor }">Hello, Vue3!</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red'
}
}
}
</script>
上面的代码中,使用:style
指令来绑定color
样式,样式的值为textColor
的值。
绑定多个样式
可以使用对象语法来绑定多个样式,对象的属性名为样式名,属性值为样式值。示例如下:
<template>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello, Vue3!</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
fontSize: 16
}
}
}
</script>
上面的代码中,使用:style
指令来绑定color
和fontSize
两个样式,样式的值分别为textColor
和fontSize
的值。
绑定样式数组
可以使用数组语法来绑定多个样式,数组中的元素为样式对象。示例如下:
<template>
<div :style="[baseStyles, customStyles]">Hello, Vue3!</div>
</template>
<script>
export default {
data() {
return {
baseStyles: {
color: 'red',
fontSize: '16px'
},
customStyles: {
fontWeight: 'bold'
}
}
}
}
</script>
上面的代码中,使用:style
指令来绑定baseStyles
和customStyles
两个样式对象,样式的值为两个对象的合并结果。
绑定样式对象
可以使用计算属性来动态绑定样式对象。示例如下:
<template>
<div :style="computedStyles">Hello, Vue3!</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
fontSize: 16
}
},
computed: {
computedStyles() {
return {
color: this.textColor,
fontSize: this.fontSize + 'px'
}
}
}
}
</script>
上面的代码中,使用计算属性computedStyles
来动态绑定样式对象,样式的值为计算属性的返回值。
Vue3从入门到精通(一)的更多相关文章
- <程序员从入门到精通> -- How
定位 自己才是职业生涯的管理者,想清楚自己的发展路径: 远期的理想是什么?近期的规划是什么?今日的任务和功课又是什么? 今日之任务或功课哪些有助于近期之规划的实现,而近期之规划是否有利于远期之理想? ...
- 【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做项目 目录索引
索引 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(1)搭建MVC环境 注册区域 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(2)创建 ...
- ASP.NET MVC4入门到精通系列目录汇总
序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- 1、ASP.NET MVC入门到精通——新语法
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...
- 5、ASP.NET MVC入门到精通——NHibernate代码映射
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 上一篇NHibernate学习笔记—使用 NHibernate构建一个ASP.NET MVC应用程序 使用的是xml进行orm映射,那么这一 ...
- 6、ASP.NET MVC入门到精通——ASP.Net的两种开发方式
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 目前,ASP.NET中两种主流的开发方式是:ASP.NET Webform和ASP.NET MVC.从下图可以看到ASP.NET WebFo ...
- 7、ASP.NET MVC入门到精通——第一个ASP.NET MVC程序
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 开发流程 新建Controller 创建Action 根据Action创建View 在Action获取数据并生产ActionResult传递 ...
- 8、ASP.NET MVC入门到精通——View(视图)
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 View视图职责是向用户提供界面.负责根据提供的模型数据,生成准备提供给用户的格式界面. 支持多种视图引擎(Razor和ASPX视图引擎是官 ...
- 9、ASP.NET MVC入门到精通——Controller(控制器)
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Controller主要负责响应用户的输入.主要关注的是应用程序流,输入数据的处理,以及对相关视图(View)输出数据的提供. 继承自:Sy ...
随机推荐
- 【LeetCode动态规划#05】背包问题的理论分析(基于代码随想录的个人理解,多图)
背包问题 问题描述 背包问题是一系列问题的统称,具体包括:01背包.完全背包.多重背包.分组背包等(仅需掌握前两种,后面的为竞赛级题目) 下面来研究01背包 实际上即使是最经典的01背包,也不会直接出 ...
- 推荐三款 Mac 上的理财神器 iCompta、Rublik、UctoX
今天推荐三款理财神器,像个人的话可以使用 iCompta(个人财务管理)一款软件就好了,但有些朋友可能有关注汇率的需求,可以使用 Rublik(汇率动态),还有一些小伙伴可能有自己的公司等原因财务量较 ...
- XXL-Job与Elastic-Job详细对比
1. 失败处理策略 失败处理策略 XXL-Job Elastic-Job 失败重试 支持,最多重试三次.重试时间间隔可配置. 支持,最多重试十次.重试时间间隔可配置. 失败告警 支持,可配置告警接收人 ...
- w10共享打印机出现011b错误
错误描述:在更新里面没有发现所说的500补丁,可就是报上面的错误,然后百度找答案 解决方案1 WIN10无法连接共享打印机0x0000011b的解决方法,不用卸载更新,在共享打印机的电脑上,打开注册表 ...
- 彻底解决VSCode无法远程ssh,提示The remote host may not meet VS Code Server‘s prerequisites for glibc and libstdc++
彻底解决VSCode无法远程ssh,提示The remote host may not meet VS Code Server's prerequisites for glibc and libstd ...
- Java中的自动装箱与自动拆箱
前言 在Java中,基本数据类型与其对应的封装类之间可以进行自动转换,这种特性称为自动装箱(autoboxing)和自动拆箱(unboxing).自动装箱和自动拆箱使得我们在使用基本数据类型时更加方便 ...
- R的画图
关于R基础 有3个需要总结的地方 R的画图(统计学图,ggplot) R的基本语法 R dataframe相关 Plot plot(1,2) plot(c(1, 2, 3, 4, 5), c(3, 7 ...
- 3. 面向对象编程(OOP):
面向对象编程的本质就是:以类的方式组织代码.以对象的组织(封装)数据 抽象:就是把不同的物品的共同点剥离出来,构成一个类.如每个人都有2条腿,我们可以把2条腿剥离出来 构成一个类 类与对象的关系 类: ...
- 解决Kibana(OpenSearch)某些字段无法搜索问题
背景 最近在OpenSearch查看线上日志的时候,发现某个索引下有些字段无法直接在界面上筛选,搜索到也不高亮,非常的不方便,就像下面这样 字段左侧两个筛选按钮禁用了无法点击,提示 Unindexed ...
- StringBuilder类用法解析
一.StringBuilder说明 StringBuilder是一个可变的字符序列.这个类提供了一个与StringBuffer兼容的API,但不保证同步,即StringBuilder不是线程安全的,而 ...