文章目录
更好的支持TypeScript
新的特性
（1）Composition API（组合式API）
（2）新的内置组件
Fragment
Teleport
Suspense
（3）其它改变
cnpm install -g @vue/cli
npm update -g @vue/cli
vue --version
winpty vue.cmd create 项目名
注：这样输入是为了解决git bash中上下箭头不能使用的问题。如果不需要自定义则可以输入“vue create 项目名”
npm run serve
vite是新一代前端构建工具（webpack之后的）
冷启动
创建工程
npm 6.x
cnpm init vite@latest --template vue
npm 7+
cnpm init vite@latest – --template vue
或者
npm init vite-app 项目名称
进入项目目录
cd < project-name>
安装依赖
npm install
运行项目
npm run dev
// 不再引入Vue构造函数，引入的是名为createApp的工厂函数，无需通过new调用
import { createApp } from 'vue'
// 引入根组件APP.vue
import App from './App.vue'
// createApp(App)：创建应用实例对象——app（类似于vue2中的vm，但app比vm更“轻”，即app没有vm那么多的方法属性等）
const app = createApp(App)
// 挂载
app.mount('#app')
vue3的模板结构中可以没有根节点打开谷歌网上应用商店，搜索vue选择对应的版本
export default {
name: 'App',
setup() {
console.log(this)
},
beforeCreate() {
console.log('beforeCreate')
},
}
4. setup的参数
// import {h} from 'vue'
export default {
name: 'App',
setup() {
// 数据（相当于vue2中的data）
let name = 'dudu'
// 方法（相当于vue2中的methods）
const sayHi = () => {
console.log(`hi,${name}`)
}
// 返回一个对象
return {
name,
sayHi
}
// 返回一个渲染函数
// return () => {
// return h('要返回的元素','要返回的内容')
// }
},
}
import {ref} from 'vue'
export default{
......
setup() {
// const 定义的对象可以修改里面的属性
const xxx = ref(initValue)
return {
xxx
}
}
}
创建一个包含响应式数据的引用对象（reference对象）
JS操作数据： xxx.value
模板中读取数据不需要 .value
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
// 数据（相当于vue2中的data）
let name = ref('dudu') //string
let age = ref(4) // number
let job = ref({
type:'前端工程师',
salary:'30K'
})
// 方法（相当于vue2中的methods）
const changeInfo = () => {
name.value='heihei'
age.value=18
job.value.type="高级算法工程师"
job.value.salary='300W'
}
// 返回一个对象
return {
name,
age,
changeInfo,
job
}
},
}
</script>
import { reactive } from ‘vue’
// 语法
const 代理对象 = reactive(源对象)
接收一个对象或数组，返回一个代理对象（proxy对象）
reactive定义的响应式数据是深层次的
内部基于ES6的proxy实现，通过代理对象对源对象内部数据进行操作
let job = reactive({
type:'前端工程师',
salary:'30K',
test: {
a: {
b: {
c:'666'
}
}
}
})
let hobby = reactive(['唱歌','画画','跑步'])
// 方法（相当于vue2中的methods）
const changeInfo = () => {
job.type = '高级算法工程师'
job.salary = '300W'
job.test.a.b.c = 'reactive是深层次的'
hobby[0] = '学习'
}
// 源数据
let person = {
name:'嘟嘟',
age:18
}
/******* vue3的响应式原理 start *******/
// p:代理数据，代理person
// proxy代理对象
const p = new Proxy(person,{
// 读取目标对象的某个属性时被调用
get(target,propName) {
console.log(`p上的${propName}属性被读取了！！`)
// Reflect反射对象
return Reflect.get(target,propName)
},
// 修改或添加目标对象的属性时被调用
set(target,propName,val) {
console.log(`p上的${propName}属性被修改了，此时界面会被更新`)
Reflect.set[target,propName,val]
},
// 删除目标对象的某个属性时被调用
deleteProperty(target,propName) {
console.log(`哦豁！！p上的${propName}属性删除了`)
return Reflect.deleteProperty(target,propName)
}
})
import { computed } from 'vue'
setup(){
...
//计算属性——简写
let fullName = computed(()=>{
return person.firstName + '-' + person.lastName
})
//计算属性——完整
let fullName = computed({
// 读
get(){
return person.firstName + '-' + person.lastName
},
// 写
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
总结：计算属性两种用法
给computed传入函数，返回值就是计算属性的值
给computed传入对象，get获取计算属性的值，set监听计算属性改变。这种写法适用于需要读写计算属性的情况
// 监视（简单写法）
/**
* 第一个参数：要监视的内容
* 第二个参数：监视的值：newValue、oldValue
*/
watch(sum,(newVal,oldVal) => {
console.log('sum值发生了变化')
})
watch([xxx,xxxxx],(newVal,oldVal) => {
console.log('监视多个内容！',newVal,oldVal)
})
watch([xxx,xxxxxx],(newVal,oldVal) => {
console.log('监视多个内容！',newVal,oldVal)
},{
immediate:true,
deep:true
})
/* 监视reactive定义的响应式数据
若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
若watch监视的是reactive定义的响应式数据，则强制开启了深度监视
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效
//监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}
//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})
多个值的变化，最终计算并返回一个新值单个数据的变化，最终执行特定的业务逻辑，不需要有任何的返回值包含创建 、运行、销毁三个阶段
created 常用来发起ajax请求，此时组件在内存中已经被创建完毕操作DOM元素，要在mounted**之后（包含mounted）*数据发生变化后操作最新的DOM要在updated**中实现
Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名
vue3 中可以定义多个相同的钩子函数用来处理不同的逻辑
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下
| vue2的写法 | vue3中对应的Composition API | Vue3.2 版本 |
|---|---|---|
| beforeCreate | setup() | < script setup> |
| created | setup() | < script setup> |
| beforeMount | onBeforeMount(() => {}) | onBeforeMount(() => {}) |
| mounted | onMounted(() => {}) | onMounted(() => {}) |
| beforeMount | onBeforeUpdate(() => {}) | onBeforeUpdate(() => {}) |
| updated | onUpdated(() => {}) | onUpdated(() => {}) |
| beforeDestroy | onBeforeUnmount(() => {}) | onBeforeUnmount(() => {}) |
| destroyed | onUnmounted(() => {}) | onUnmounted(() => {}) |
vue3中的生命周期钩子（7个）
作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
语法：const xxx= toRef(要操作的对象,'要操作对象的属性名')
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)
const data = reactive({
})
const refData = toRefs(data)
return {
...refData
}
用于获取DOM或组件实例
setup 中通过 ref(null) 实现<template>
<div class="container">
<!-- vue2.0 获取单个元素 -->
<!-- 1. 通过ref属性绑定该元素 -->
<!-- 2. 通过this.$refs.box获取元素 -->
<!-- <div ref="box">我是box</div> -->
<!-- vue2.0 获取v-for遍历的多个元素 -->
<!-- 1. 通过ref属性绑定被遍历元素 -->
<!-- 2. 通过this.$refs.li 获取所有遍历元素 -->
<!-- <ul>
<li v-for="i in 4" :key="i" ref="li">{{i}}</li>
</ul> -->
<!-- 单个元素 -->
<div ref="dom">我是box</div>
<!-- 被遍历的元素 -->
<ul>
<li v-for="i in 4" :key="i" :ref="setDom">第{{i}}LI</li>
</ul>
</div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
name: 'App',
setup () {
// 1. 获取单个元素
// 1.1 先定义一个空的响应式数据ref定义的
// 1.2 setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可。
const dom = ref(null)
onMounted(()=>{
console.log(dom.value)
})
}
}
</script>
<style scoped lang="scss"></style>
// 2. 获取v-for遍历的元素
// 2.1 定义一个空数组，接收所有的LI
// 2.2 定义一个函数，往空数组push DOM
const domList = []
const setDom = (el) => {
domList.push(el)
}
onMounted(()=>{
console.log(domList)
})
return {dom, setDom}
总结
单个元素：先申明ref响应式数据，返回给模版使用，通过ref绑定数据
遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模版使用，通过ref绑定这个函数
有一个边界问题：组件更新的时候会重复的设置dom元素给数组
// ref获取v-for遍历的DOM元素，需要在组件更新的时候重置接受dom元素的数组。
onBeforeUpdate(()=>{
list = []
})
在vue2.0中v-mode语法糖简写的代码 <Son :value=“msg” @input=“msg=$event” />
在vue3.0中v-model语法糖有所调整：< Son :modelValue=“msg” @update:modelValue=“msg=$event” / >
<template>
<div class="container">
<!-- 如果你想获取原生事件事件对象 -->
<!-- 如果绑定事函数 fn fn(e){ // e 就是事件对象 } -->
<!-- 如果绑定的是js表达式 此时提供一个默认的变量 $event -->
<h1 @click="$event.target.style.color='red'">父组件 {{count}}</h1>
<hr>
<!-- 如果你想获取自定义事件 -->
<!-- 如果绑定事函数 fn fn(data){ // data 触发自定义事件的传参 } -->
<!-- 如果绑定的是js表达式 此时 $event代表触发自定义事件的传参 -->
<!-- <Son :modelValue="count" @update:modelValue="count=$event" /> -->
<Son v-model="count" />
</div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {
name: 'App',
components: {
Son
},
setup () {
const count = ref(10)
return { count }
}
}
</script>
总结： vue3.0封装组件支持v-model的时候，父传子:modelValue 子传父 @update:modelValue
补充： vue2.0的 xxx.sync 语法糖解析 父传子 :xxx 子传父 @update:xxx 在vue3.0 使用 v-model:xxx 代替
shallowReactive：只处理对象 最外层 属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行 对象 的响应式处理。
什么时候使用?
reactive生成的响应式对象转为普通对象。
作用：实现祖与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
具体写法：
祖组件中：
setup(){
......
let car = reactive({name:'奔驰',price:'40万'})
provide('car',car)
......
}
后代组件中：
setup(props,context){
......
const car = inject('car')
return {car}
......
}
reactive 创建的响应式代理readonly 创建的只读代理reactive 或者 readonly 方法创建的代理vue2.x项目中使用的就是 选项API 写法
在vue3.0项目中将会使用 组合API 写法
<teleport to="移动位置">
<div v-if="isShow" class="mask">
<div class="dialog">
<h3>我是一个弹窗</h3>
<button @click="isShow = false">关闭弹窗</button>
</div>
</div>
</teleport>
等待异步组件时渲染一些额外内容，让应用有更好的用户体验
使用步骤：
异步引入组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue')) // 动态引入（异步引入）
使用Suspense包裹组件，并配置好default与 fallback
<template>
<div class="app">
<h3>我是App组件</h3>
<Suspense>
<template v-slot:default>
<Child/> <!-- 真正要展示的组件 -->
</template>
<template v-slot:fallback>
<h3>加载中.....</h3><!-- 当要展示的组件没有加载完时，显示的内容 -->
</template>
</Suspense>
</div>
</template>
Vue 2.x 有许多全局 API 和配置。
例如：注册全局组件、注册全局指令等。
//注册全局组件
Vue.component('MyButton', {
data: () => ({
count: 0
}),
template: '<button @click="count++">Clicked {{ count }} times.</button>'
})
//注册全局指令
Vue.directive('focus', {
inserted: el => el.focus()
}
Vue3.0中对这些API做出了调整：
将全局的API，即：Vue.xxx调整到应用实例（app）上
2.x 全局 API（Vue） | 3.x 实例 API (app) |
|---|---|
| Vue.config.xxxx | app.config.xxxx |
| Vue.config.productionTip | 移除 |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
| Vue.prototype | app.config.globalProperties |
Vue2.x写法
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-leave,
.v-enter-to {
opacity: 1;
}
Vue3.x写法
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-leave-from,
.v-enter-to {
opacity: 1;
}
config.keyCodes移除v-on.native修饰符
父组件中绑定事件
<my-component
v-on:close="handleComponentEvent"
v-on:click="handleNativeClickEvent"
/>
子组件中声明自定义事件
<script>
export default {
emits: ['close']
}
</script>
过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。
<script setup>
</script>
每次组件实例被创建的时候执行<template>
<div class="container">
<h3 @click="sayHello">{{ name }}</h3>
</div>
<router-view />
</template>
<script setup>
const name = 'dudu'
function sayHello() {
console.log(`hi~我是${name}`)
}
</script>
不用再写name属性了<template>
<Child />
</template>
<script setup>
import Child from '@/components/Child.vue'
</script>
defineProps 方法获取<template>{{ a }} {{ b }}</template>
<script setup>
import { toRefs } from "vue";
defineProps({
a: String,
b: String,
});
</script>
defineEmitsconst emits = defineEmits(['getChild']);
ref 性能得到了大幅度的提升ref 来作为响应式数据构建的方式useAttrs() 方法 获取 attrs 属性useSlots() 方法获取 slots 插槽defineEmits() 方法获取 emit 自定义事件<script setup>
import { useAttrs, useSlots } from 'vue'
const slots = useSlots();
const attrs = useAttrs();
const emits = defineEmits(['getChild']);
</script>
script setup 语法糖的组件默认不会对外暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使用 defineExpose
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
一、什么是MQTT协议MessageQueuingTelemetryTransport：消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样，基于TCP/IP协议之上的通讯协议，提供有序、无损、双向连接，由IBM（蓝色巨人）发布。原理：（1）MQTT协议身份和消息格式有三种身份：发布者（Publish）、代理（Broker）（服务器）、订阅者（Subscribe）。其中，消息的发布者和订阅者都是客户端，消息代理是服务器，消息发布者可以同时是订阅者。MQTT传输的消息分为：主题（Topic）和负载（payload）两部分Topic，可以理解为消息的类型，订阅者订阅（Su
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。 内容有： ①：Hub模型的方法介绍 ②：服务器端代码介绍 ③：前端vue3安装并调用后端方法 ④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是
昨晚看到IDEA官推宣布IntelliJIDEA2023.1正式发布了。简单看了一下，发现这次的新版本包含了许多改进，进一步优化了用户体验，提高了便捷性。至于是否升级最新版本完全是个人意愿，如果觉得新版本没有让自己感兴趣的改进，完全就不用升级，影响不大。软件的版本迭代非常正常，正确看待即可，不持续改进就会慢慢被淘汰！根据官方介绍：IntelliJIDEA2023.1针对新的用户界面进行了大量重构，这些改进都是基于收到的宝贵反馈而实现的。官方还实施了性能增强措施，使得Maven导入更快，并且在打开项目时IDE功能更早地可用。由于后台提交检查，新版本提供了简化的提交流程。IntelliJIDEA
开门见山|拉取镜像dockerpullelasticsearch:7.16.1|配置存放的目录#存放配置文件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/config#存放数据的文件夹mkdir-p/opt/docker/elasticsearch/node-1/data#存放运行日志的文件夹mkdir-p/opt/docker/elasticsearch/node-1/log#存放IK分词插件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/plugins若你使用了moba，直接右键新建即可如上图所示依次类推创建
文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚，分别为索引、映射和文档（不用死记硬背，大概有个印象就可以）索引可理解为MySQL数据库；映射可理解为MySQL的表结构；文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了，映射可理解为MySQL的表结构，在MySQL中，向表中插入数据是需要先创建表结构的；但在es中不必这样，可以直接插入文档，es可以根据插入的文档（数据），动态的创建映射（表结构），这就
HTTP缓存是指浏览器或者代理服务器将已经请求过的资源保存到本地，以便下次请求时能够直接从缓存中获取资源，从而减少网络请求次数，提高网页的加载速度和用户体验。缓存分为强缓存和协商缓存两种模式。一.强缓存强缓存是指浏览器直接从本地缓存中获取资源，而不需要向web服务器发出网络请求。这是因为浏览器在第一次请求资源时，服务器会在响应头中添加相关缓存的响应头，以表明该资源的缓存策略。常见的强缓存响应头如下所述：Cache-ControlCache-Control响应头是用于控制强制缓存和协商缓存的缓存策略。该响应头中的指令如下：max-age：指定该资源在本地缓存的最长有效时间，以秒为单位。例如：Ca
如何用IDEA2022创建并初始化一个SpringBoot项目？目录如何用IDEA2022创建并初始化一个SpringBoot项目？0. 环境说明1. 创建SpringBoot项目 2.编写初始化代码0. 环境说明IDEA2022.3.1JDK1.8SpringBoot1. 创建SpringBoot项目 打开IDEA，选择NewProject创建项目。 填写项目名称、项目构建方式、jdk版本，按需要修改项目文件路径等信息。 选择springboot版本以及需要的包，此处只选择了springweb。 此处需特别注意，若你使用的是jdk1
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否