Vue基础记录

Vue

整体要学的
vue基础
vue-cli
vue-router
vuex
element-ui
vue3

简介

特点:

  1. 组件化
  2. 声明式编码
  3. 使用虚拟dom + 优秀Diff算法

在这里插入图片描述
在生成真实dom的时候,会先有一部虚拟dom,且新的虚拟dom会和旧的虚拟dom进行diff算法比较
如果有些dom没改,那么就可以不用再重新渲染了,提高性能

环境

安装node

node -> 16.20.2

切换淘宝镜像

npm install -g cnpm -registry=http://registry.npm.taobao.orgnpm config set registry http://registry.npm.taobao.org/

使用了第二个,下一步才有用

安装vue

npm install -g @vue/cli

在这里插入图片描述

vscode中不给运行vue解决办法

set-ExecutionPolicy RemoteSigne 

问题就是脚本的执行策略不行,应该是安全问题

创建vue项目

create vue jplan

vue还不给输入大写

选自己的配置

Vuex + router + CSS Pre-processors

版本

2.x

路径选择

history router no

css预处理语言 less

配置文件 -> package.json

启动

npm run serve

引入element-ui

引入

npm i element-ui -S

目录下必须有package.json

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

引入Axios

安装

npm install axios
npm install vue-axios

main.js引入

//引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)

开发者工具devtools

vue2 只能用vue-devtools

Vue核心

模版语法

插值语法
{{ xxx}}

指令语法
v-bind 简写是 :xxx

数据绑定

单向的是 :value=" "
双向的是 v-model:value=" " 简写是 v-model=" "

v-model绑定的值不能是props传来的值,因为props传来的值是不可修改的
特别是对象的值,修改了props,别人还不知道,这不完蛋了吗

data的两种写法

对象式

    <script type="text/javascript">Vue.config.productionTip = false; //阻止vue启动时生成生产提示new Vue({el: "#app",data: {msg: 'wo de fuck'}})</script>

函数式

    <script type="text/javascript">Vue.config.productionTip = false; //阻止vue启动时生成生产提示new Vue({el: "#app",data() {return {msg: 'hi'}}})</script>

像一个函数返回一个对象

一般使用函数式,组件开发的时候必须写函数式,所以以后写函数式就ok

MVVM

Vue没有完全遵循MVVM,受启发

在这里插入图片描述

M 是 Model 模型,也就是我们的数据
V 是 View 视图,模版的代码 ->我们自己写的代码
VM 是视图模型,也就是Vue

Vue类似于数据和视图之间的中间商,我们在js代码中写的data会出现在vm里边,我们在{{}}模版语法里边可以获取到这些数据

在vm里边会有监听器,监听dom

Object.defineProperty()

Object.defineProperty(obj, prop, descriptor)

obj
要定义属性的对象。

prop
一个字符串或 Symbol,指定了要定义或修改的属性键。

descriptor
要定义或修改的属性的描述符。

描述符
1.configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,默认值为false。

2.enumerable:能不能枚举,这里就是能不能for遍历,默认值为false

3.writable:表示能否修改属性的值。默认值为false。

4.value:包含这个属性的数据值。默认值为undefined。
举例

let p = {}
object.defineProperty(p,'age',{...
})

configurable 不能delete p.age
writable 不能 p.age = 12,这样是无效的
value是设置值

get,set
读取函数时调用get

写入属性时调用set

例如,假如我们想让对象p的age值变成响应式的,就可以使用get

    <script>let num = 1;let p = {name: 'jjking'}Object.defineProperty(p,"age",{enumerable: true,get() {console.log('获取值,此处是相当于是响应式的');return num;}})console.log(p);</script>

需要注意的是,get函数不能和属性value共存,会报错
这里如果我们之后修改num,重新获取age的值的话,就会更新

如何定义多个属性

var student = {};
Object.defineProperties(student,{name:{writable:false,value:"lisi"},age : {writable:true,value : 16,},sex:{get(){return '男';},set(v){p1.sex = v}}
})

数据代理

最简单的数据代理
通过一个对象代理对另一个对象属性的操作(读/写)

    <script>let obj1 = {x:100}let obj2 = {y:200}Object.defineProperty(obj2,'x',{get() {return obj1.x;},set(value) {obj1.x = value;}})</script>

此时我们就可以使用obj2来操作obj1了,并且obj1自己的改变,也会改变obj2的x值

在这里插入图片描述

  1. vue先是把data里边的数据放到vm里边,但是名字叫_data
  2. 然后通过Object.defineProperty()代理所有属性的操作,也就是这里的vm.name,和vm.address,这两个是代理对象

事件处理

基本使用
@xxx: 函数名

阻止默认时间prevent

    <div id="app"><a href="www.baidu.com" @click="showInfo">点我</a></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {},methods: {showInfo(e) {e.preventDefault();alert("同学你好!");}}})</script>

a标签的默认事件是跳转
我们可以直接写e.preventDefault();

也可以用vue的@click.prevent

@click.prevent="showInfo"

事件冒泡
原生的写法

    <div id="app"><div @click="showDiv"><button @click="showInfo">点我</button></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {},methods: {showDiv() {alert("DIV你好!");},showInfo(e) {e.stopPropagation();alert("同学你好!");}}})</script>

此时点button的话,他包裹的div也会触发时间showDiv,这就是冒泡

使用vue

@click.stop="showInfo"

事件只触发一次once

@click.once="showInfo"

事件捕获
capture

        <div @click.capture="showDiv"><button @click.stop="showInfo">点我</button></div>

正常来说,是先捕获,再冒泡
也就是 先div,再button
如果使用.capture的话,就会先执行div,再执行button

    <div id="app"><div @click.capture="showDiv"><button @click="showInfo">点我</button></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {},methods: {showDiv() {alert("DIV你好!");},showInfo() {alert("同学你好!");}}})</script>

在这里插入图片描述
在这里插入图片描述
事件当前操作元素才触发self

如上也是,只有当我们点击的是div的时候,才触发事件,点button冒泡过去的话,是不会触发事件的

        <div @click.self="showDiv"><button @click="showInfo">点我</button></div>

这个方法也可以防止冒泡

passive:事件的默认行为立即执行,无需等待事件回调执行完毕:

有一些@事件,他会先去处理方法,如果方法里边耗时很久的话,不执行默认行为就会有卡顿,所以passvie可以解决这个问题

如果需要多个事件处理
@click.prevent.stop
顺序无所谓

键盘事件

keydown,按下去就触发事件

keyup,按下去,抬上来之后才出发事件

event:当前事件

event.target:当前事件操作的元素

event.target.value 这是这个例子中input的value

    <div id="app"><input type="text" @keyup.enter="showInfo"></div>
...方法showInfo(e) {console.log(e.target.value);}

keyup.enter 的意思是,检测到回车才触发事件

常用的别名
Vue中常用的按键别名:
回车=>enter
删除=>delete(捕获“删除”和“退格”键)
退出=>esc
空格=>space
换行=>tab
上=>up
下=>down
左=>1eft
右=>right

计算属性

要用的属性不存在,需要自己计算得来
原理是: Object.defineProperty 提供的getter 和 setter

get方法调用的时机(1) 初次读取的时候 (2) 依赖的 数据发生变化的时候

和methods相比,优势是有缓存机制,效率高

计算属性在vm身上,直接调即可

<script type="text/javascript">new Vue({el: '#root',data: {firstName: '',lastName: ''},computed: {fullname: {get() {return this.firstName + '-' + this.lastName}}}})
</script>

简写只有get方法的时候

            methods: {fullname(){return this.firstName+this.lastName}}

set方法

set方法里边我们必须使得计算属性的依赖的数据发生改变,整体才会改变

    <div id="app"><input type="text" v-model="firstName"> <br><input type="text" v-model="secondName"><div>{{fullName}}</div></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {firstName: "",secondName: ""},computed: {fullName: {get() {return this.firstName + "-" + this.secondName},set(value) {const arr = value.split("-");this.firstName = arr[0];this.secondName = arr[1];}}}})</script>

如果没改变get方法中的firstName 和 secondName,计算属性走的还是缓存

监视属性

写法

    <div id="app"><div>今天天气{{info}}</div><button @click="change">change</button></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {isHot: false},computed: {info() {return this.isHot ? '炎热' : '凉爽';}},methods: {change() {this.isHot = !this.isHot;}},watch:{isHot: {handler(newValue,oldValue) {console.log(newValue,oldValue);}}}})</script>

我们在watch里边直接写,isHot发生变化,就会执行handler里边的方法

另外一种写法

    <script type="text/javascript">const vm = new Vue({el: '#app',data: {isHot: false},computed: {info() {return this.isHot ? '炎热' : '凉爽';}},methods: {change() {this.isHot = !this.isHot;}}})vm.$watch('isHot',{handler(newValue,oldValue) {console.log(newValue,oldValue);}})</script>

在外边写也可以,只不过要注意的是,这里的isHot必须加引号

深度监视
如果我们要监视一个对象里边的数据的改变,需要加上配置项,deep:true

    <script type="text/javascript">const vm = new Vue({el: '#app',data: {numbers: {a: 1,b: 2}},watch: {numbers: {immediate:true,deep: true,handler(newValue, oldValue) {console.log('numbers发生变化',newValue,oldValue);}}}})</script>

绑定样式

适用于class和style

最简单的写法

 <!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 --><div class="basic" :class="mood" @click="changeMood"></div>

数组的绑定
绑定class样式–数组写法,适用于:要绑定的样式个数不确定、名字也不确定

   <div class="basic" :class="['atguigu1','atguigu2']"></div>

对象的写法
适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用

<div class="basic" :class="{atguigu1:false, atguigu2:false}"></div>

简写
只有handler的时候,可以直接写

//原来的
watch: {numbers: {handler(newValue, oldValue) {console.log('numbers发生变化',newValue,oldValue);}}
}
//修改后的:
watch: {numbers(newValue, oldValue) {console.log('numbers发生变化',newValue,oldValue);}
}

computed 和 watch的区别
computed能实现的,watch都能实现,但是watch可以做异步操作

两个原则:

  1. 被vue管理的函数写成普通函数,this指向的是vm或者组件实例对象
  2. 所有不被vue所管理的函数,最好写成箭头函数,此时this指向的是vm或者组件实例对象

这里因为如果不被vue管理的函数写成普通函数,this指向的会是window

class 和 style样式

    <div id="root"><!-- 字符串写法,适用于:样式的类名不确定,需要动态指定 --><div class="basic" :class="mood">{{number.a}}</div><!-- 数组写法,适用于:要绑定的样式个数不确定,名字也不能确定 --><div class="basic" :class="moodArr">{{number.b}}</div><!-- 对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 --><div class="basic" :class="moodObj">{{number.b}}</div></div>
...
data:{number:{a:1,b:2,},mood:'happy',moodArr:['happy'],moodObj:{happy:true}},

style的绑定和class的绑定一致

条件渲染

v-if,整个节点不在了
v-show 节点还在,只是隐藏

		<h1 v-if="n===1">1</h1><h1 v-if="n===1">2</h1><h1 v-if="n===1">3</h1>

如果条件一样,我们可以再外边写一个div

<div v-if="n===1"><h1>1</h1><h1>2</h1><h1>3</h1>
</div>

但是有可能会破坏结构,所以用template

<template v-if="n===1"><h1>1</h1><h1>2</h1><h1>3</h1>
</template>

template只能和v-if使用

列表渲染

v-for
      <!-- 遍历数组 -->在遍历数组时,数组元素后面的一个参数,是遍历时的key值,因为我们这里没有自定义key,所以默认是012<ul><li v-for="(person,index) in persons">{{index}}--{{person.name}}--{{person.age}}</li></ul><!-- 遍历对象 -->遍历对象时,括号中第一个参数是对象中键值对的值,第二个参数是键值对的键,第三个参数是这个这条遍历的数据的key<ul><li v-for="(value,key,index) in car">{{index}}--{{key}}--{{value}}</li></ul>遍历字符串时,括号中第一个参数是字符串这个位置的值,第二个参数是这个这条遍历的数据的key<!-- 遍历字符串 --><ul><li v-for="(value,key) in str">{{key}}--{{value}}</li></ul>...data: {persons: [{ id: "001", name: "ice", age: "13" },{ id: "002", name: "peach", age: "12" },],car: {speed: "20km/h",year: "2014",},str: "i am a word",},
key的原理和使用

key的内部原理

  1. 虚拟dom中key的作用:
    key是虚拟dom对象的标识,vue会根据新数据生成新的虚拟dom,随后进行diff算法
  2. 对比规则:
    (1) 旧的虚拟dom和新的虚拟dom,有相同key
    a. 如果虚拟dom中内容没变,则直接复用之前的真实dom
    b.如果内容变化,则生成新的dom
    (2)没有相同key,创建新的dom

在这里插入图片描述

看这个图就知道为什么index作为key,如果有逆序操作的时候,会出现界面问题了

两边新旧都有虚拟dom,此时进行diff比较,我们新的是逆序添加了老刘这条li

key相同都是0,input也相同,只有张三-18老刘-30不同,此时input相同

那么不同的内容,老刘-30会创建新的dom
对于相同的内容,input输入框,就会复用之前的dom,也就是原本应该是张三的输入框

以此类推,这里整个往上移,就会出现页面问题

解决办法也很简单,就是我们绑定key的时候,用可以唯一标识的key,比如id,身份证,手机号等等

如果不存在对数据的逆序,破坏顺序操作,用index也是没有问题的

列表过滤

实现列表过滤的效果
在这里插入图片描述

watch监视

    <div id="app"><label>姓名:</label><input v-model="name"><ul><li v-for="(person) in persnsOfSearch">{{person.name}}--{{person.age}}</li></ul></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {name: '',persnsOfSearch: [],persons: [{ id: '001', name: 'ice', age: '17' },{ id: '002', name: 'ipeach', age: '18' },{ id: '003', name: 'icepeach', age: '19' }]},watch: {name: {immediate: true,handler(newValue, oldValue) {console.log('输入发生变化');this.persnsOfSearch = this.persons.filter((p) => {return p.name.indexOf(newValue) != -1;})}}}})</script>

整体的写法就是
输入框的里边的值,我们监视他
如果发生变化,也就是传来新的值newValue,我们就去过滤数组,
过滤的条件是,在persons数组中,查找每个对象的name是否含有newValue

利用的是函数 str.indexOf(val) ,如果有就会返回位置,如果没有就会返回-1
所以只有 != -1,就说明含有该值,filter通过

最后我们把过滤好的数据传给persnsOfSearch ,不用原来的数组就是为了不破坏数据

计算属性实现

    <div id="app"><label>姓名:</label><input v-model="name"><ul><li v-for="(person) in persnsOfSearch">{{person.name}}--{{person.age}}</li></ul></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {name: '',persons: [{ id: '001', name: 'ice', age: '17' },{ id: '002', name: 'ipeach', age: '18' },{ id: '003', name: 'icepeach', age: '19' }]},computed: {persnsOfSearch() {return this.persons.filter((p) => {return p.name.indexOf(this.name) != -1;})}}})</script>

我们如果使用计算属性的话就可以快速的解决这个问题

第一,我们得监视name的改变,这里的监视name的改变,巧妙的把name写到计算属性里边了,计算属性里边,依赖的数据发生改变,那么计算属性也会发生改变

也就是我们这里的persnsOfSearch,里边依赖着this.name

第二,我们做过滤

还有一个好处就是,我们不用像watch那样还得写immediate:true,计算属性一开始就会去进行计算

排序

在这里插入图片描述
在上面的基础上,加上一个age过滤的功能

    <div id="app"><label>姓名:</label><input v-model="name"><ul><li v-for="(person) in persnsOfSearch">{{person.name}}--{{person.age}}</li></ul><button @click="sortType = 0">原顺序</button><button @click="sortType = 1">降序</button><button @click="sortType = 2">升序</button></div><script type="text/javascript">const vm = new Vue({el: '#app',data: {name: '',persons: [{ id: '001', name: 'ice', age: '17' },{ id: '002', name: 'ipeach', age: '18' },{ id: '003', name: 'icepeach', age: '19' }],sortType: 0    },computed: {persnsOfSearch() {const arr = this.persons.filter((p) => {return p.name.indexOf(this.name) != -1;})//是否是原来的顺序if(this.sortType != 0) {arr.sort((p1,p2) => {return this.sortType == '1' ? p2.age - p1.age : p1.age - p2.age;}) } return arr;}}})</script>

获取表单数据

<input type="text"/>v-model收集的是value值,用户输入的就是value值
<input type="radio"/> v-model收集的是value值,我们必须给标签设置value值
<input type="checkbox"/>

  1. 如果没有设置value值,收集的是checked值(布尔)
  2. 如果设置了value值
    (1)v-model的初始值不是数组,收集的就是checked
    (2)v-model的初始值是数组,收集的就是value组成的数组

备注: v-model的三个修饰符
lazy: 失去焦点的再收集数据
number: 输入字符串转为有效数字
trim: 去掉首尾空格

生命周期在这里插入图片描述

beforeCreate 是数据代理监测和数据代理创建之前,不是vm

beforeMount 此时只有虚拟dom,所以此时没有把虚拟dom转换为真实dom

beforeUpdate 此时数据是最新的,但是页面是旧的

beforedestroy 此时数据,方法都在,但是此时如果修改数据,方法是不会触发数据更新流程
一般这个时候,清除定时器,解绑自定义事件,取消订阅等等

注意
销毁之后,只是vm没了,但是真实dom还是存在的,也就是vm的工作成果还在,不过管理的他的vue死了

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【和春笋一起学C++】for语句和递增操作符

目录 1. for语句简介 2. for语句实例 3. 顺序点和副作用 4. 递增递减操作符应用于指针 1. for语句简介 for语句包含控制体和循环体&#xff0c;循环体跟在控制体的后面。 如下所示&#xff0c;控制体为for括号中的几个表达式&#xff0c;循环体为花括号中的几条语句。 fo…

有哪些方法可以快速批量的去查询手机号码归属地和运营商,快速的按归属地和运营商进行号码的分类 ?

下面为大家总结了一些快速查询手机号码归属地的工具和方法 工具仅供参考&#xff1a; 如何大批量的进行手机号码归属地查询 &#xff0c;按省份分类&#xff0c;按城市分类&#xff0c;按运营商&#xff08;移动、电信、联通&#xff09;快速分类&#xff0c;高效办公工具批量…

Elasticsearch+Kibana分布式存储引擎

1.ElaticSearch介绍 ElaticSearch &#xff0c;简称为 ES &#xff0c; ES 是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检 索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理 PB 级别的数据。 ES 也使用 …

The Past, Present and Future of Apache Flink

摘要&#xff1a;本文整理自阿里云开源大数据负责人王峰&#xff08;莫问&#xff09;在 Flink Forward Asia 2024上海站主论坛开场的分享&#xff0c;今年正值Flink开源项目诞生的第10周年&#xff0c;借此时机&#xff0c;王峰回顾了Flink在过去10年的发展历程以及 Flink社区…

OpenAI 正式赋予 ChatGPT 通过视频实时与用户互动的能力

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

java jar包加密 jar-protect

介绍 java 本身是开放性极强的语言,代码也容易被反编译,没有语言层面的一些常规保护机制,jar包很容易被反编译和破解。 受classfinal&#xff08;已停止维护&#xff09;设计启发,针对springboot日常项目开发,重新编写安全可靠的jar包加壳加密技术,用于保护软件版权。 使用说…

arm CPS指令解释

arm CPS指令解释 1 The Current Program Status Register, CPSR1.1 N, Z, C, V, bits [31:28]1.2 Q, bit [27]1.3 SSBS, bit [23]1.4 PAN, bit [22]1.4.1 About the PAN bit 1.5 DIT, bit [21]1.6 GE[3:0], bits [19:16]1.7 E, bit [9]1.8 A, I, F, bits [8:6]1.9 M[4:0], bits…

VSCode 报错:rust-analyzer requires glibc >= 2.28 in latest build

报错信息 /home/jake/.vscode-server-insiders/extensions/matklad.rust-analyzer-0.3.953/server/rust-analyzer: /lib/x86_64-linux-gnu/libc.so.6: version GLIBC_2.29 not found (required by /home/jake/.vscode-server-insiders/extensions/matklad.rust-analyzer-0.3.9…

GFPS扩展技术原理(一)消息流

消息流作用 Google fast pair service要求Provider提供一个额外得通道以便seeker寻求建立连接&#xff0c;连接建立后&#xff0c;Seeker就可以向Provider发送一串数据流&#xff0c;这样做的目的是为了支持GFPS Extension&#xff0c;也就是扩展的GFPS&#xff0c;主要涉及一…

Vue项目打包部署到服务器

1. Vue项目打包部署到服务器 1.1. 配置 &#xff08;1&#xff09;修改package.json文件同级目录下的vue.config.js文件。 // vue.config.js module.exports {publicPath: ./, }&#xff08;2&#xff09;检查router下的index.js文件下配置的mode模式。   检查如果模式改…

rk3588-ubuntu22.04系统网关实现路由器功能:

rk3588-ubuntu22.04系统网关实现路由器功能&#xff1a; 场景需求描述&#xff1a; 需求背景&#xff1a; 场景一&#xff1a;通过网线eth0/(路由器wlan0)访问外网&#xff1a; 如果网关 和 设备所处的环境可以通过网线联网或者路由器联网&#xff0c;那么不需要将网关配置成…

GIF制作工具推荐与详细使用教程

引言 GIF&#xff08;Graphics Interchange Format&#xff09;是一种广泛使用的图像格式&#xff0c;常用于创建动画或短视频片段。无论你是想制作表情包、动画教程还是简单的动画效果&#xff0c;选择一个合适的GIF制作工具是关键。下面我们将推荐几款免费且易用的GIF制作工…

打卡第十二天 P1012 [NOIP1998 提高组] 拼数

题目描述 设有 n 个正整数 &#xff0c;将它们联接成一排&#xff0c;相邻数字首尾相接&#xff0c;组成一个最大的整数。 输入格式 第一行有一个整数&#xff0c;表示数字个数 n。 第二行有 n 个整数&#xff0c;表示给出的 n 个整数 。 输出格式 一个正整数&#xff0c…

【每日刷题】Day169

【每日刷题】Day169 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 718. 最长重复子数组 - 力扣&#xff08;LeetCode&#xff09; 2. 2269. 找到一个数字的 K 美丽值…

SeaTunnel Web1.0.0安装

部署seatunnel2.3.8参考:部署seatunnel2.3.8-CSDN博客 SeaTunnel Web1.0.1对应的seatunnel2.3.3版本,所以如果要想在SeaTunnel Web1.0.1上能正常跑seatunnel对应版本包,在seatunnel上传的connector-开头的包,都得跟着SeaTunnel Web依赖的版本走,如安装了seatunnel2.3.7但…

AI大模型学习笔记|多目标算法梳理、举例

多目标算法学习内容推荐&#xff1a; 1.通俗易懂讲算法-多目标优化-NSGA-II(附代码讲解)_哔哩哔哩_bilibili 2.多目标优化 (python pyomo pareto 最优)_哔哩哔哩_bilibili 学习笔记&#xff1a; 通过网盘分享的文件&#xff1a;多目标算法学习笔记 链接: https://pan.baidu.com…

Go 语言与时间拳击理论下的结对编程:开启高效研发编程之旅

一、引言 结对编程作为一种软件开发方法&#xff0c;在提高代码质量、增强团队协作等方面具有显著优势。而时间拳击理论为结对编程带来了新的思考角度。本文将以 Go 语言为中心&#xff0c;深入探讨时间拳击理论下的结对编程。 在当今软件开发领域&#xff0c;高效的开发方法和…

基于Java的世界时区自动计算及时间生成方法

目录 前言 一、zoneinfo简介 1、zoneinfo是什么 2、zoneinfo有什么 二、在Java中进行时区转换 1、Java与zoneInfo 2、Java展示zoneInfo实例 3、Java获取时区ID 三、Java通过经纬度获取时区 1、通过经度求解偏移 2、通过偏移量计算时间 3、统一的处理算法 四、总结 …

PostgreSQL的学习心得和知识总结(一百六十四)|深入理解PostgreSQL数据库之在 libpq 中支持负载平衡

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…

BERT:用于语言理解的深度双向 Transformer 的预训练。

文章目录 0. 摘要1. 介绍2. 相关工作2.1 无监督的基于特征的方法2.3 无监督微调方法2.3 从受监督数据中迁移学习 3. BERT3.1 预训练 BERT3.2 微调 BERT 4. 实验4.1 GLUE4.2 SQuAD v1.14.3 SQuAD v2.04.4 SWAG 5. 消融研究5.1 预训练任务的影响5.2 模型大小的影响5.3 使用 BERT …