Vue知识沉淀
为什么组件my-item的props是listCount，但传入时候用:list-count传入，而 listCount与list-count不一致
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
<my-list :count="5"></my-list>
</div>
<script>
var app = Vue.createApp({});
const listCom = {
props: {
count: Number,
},
template: `
<div style="border: red solid 10px;">
<my-item v-for="i in count" :list-count="count" :index="i"></my-item>
</div>
`
};
const itemCom = {
props: {
listCount: Number,
index: Number,
},
template: `
<div style="border: blue solid 10px;">
<my-label :list-count="listCount" :index="index"></my-label>
</div>
`
};
const labelCom = {
props: {
listCount: Number,
index: Number,
},
template: `
<div>{{ index }}/{{ listCount }}</div>
`
};
app.component("my-list", listCom);
app.component("my-item", itemCom);
app.component("my-label", labelCom);
app.mount("#Application");
</script>
</body>
</html>
在Vue中，组件的props属性名称是大小写不敏感的。这意味着您在定义props时可以使用camelCase（驼峰式命名）或kebab-case（短横线分隔式命名）两种命名方式。
在您的示例中，my-item组件的props定义了listCount和index两个属性：
props: {
listCount: Number,
index: Number,
},
然后，在父组件中，您使用了list-count这样的kebab-case命名方式来传递属性值：
<my-item v-for="i in count" :list-count="count" :index="i"></my-item>
Vue会自动将kebab-case的属性名转换为camelCase的属性名，以与组件中定义的props匹配。因此，list-count在传递给my-item组件时会被转换为listCount，并将其值传递给组件内部。
这种转换是Vue中的一项约定，并且是为了提高开发人员的灵活性和代码的可读性。您可以根据自己的喜好选择使用camelCase或kebab-case来定义props属性，并在传递属性时使用任何一种方式。Vue会根据约定进行自动转换。
setup()函数
var app = Vue.createApp({
setup() {
let myData = {
value:0
}
function click() {
myData.value += 1;
console.log(myData.value);
}
return {
myData,
click
}
},
template:`
<h1>测试数据:{{ myData.value }} </h1>
<button @click="click">点击</button>
`
})
在Vue 3中，setup()是一个特殊的函数，用于设置组件的配置选项。它可以返回一个对象，该对象包含了组件的数据、方法和计算属性等。
在你提供的代码中，setup()函数返回了一个对象，其中包含了myData和click属性。这些属性可以在模板中使用，实现数据的响应式绑定和方法的调用。
虽然setup()函数看起来像一个普通的JavaScript函数，但它实际上是Vue框架提供的特殊函数。它可以访问到组件的上下文，并且在组件初始化时执行。通过setup()函数，可以使用Vue提供的响应式系统和其他功能来处理组件的数据和行为。
总结来说，setup()函数既是一个函数，又是一个Vue提供的特殊函数，用于设置组件的配置选项，并在组件初始化时执行。它帮助我们更好地组织和管理组件的数据和方法。
在JavaScript中，可以在一个函数内部声明另一个函数。这被称为嵌套函数或内部函数。内部函数可以访问外部函数的变量和参数，形成了一个作用域链。
setup()与data()
在Vue 3中，引入了setup()函数作为组件的配置选项。相比之前的Vue 2中的data()函数，setup()函数提供了更灵活和强大的功能，使得组件的编写更加简洁和直观。
以下是一些使用setup()相对于data()的优势：
更直观的组织：setup()函数内部可以按照功能来组织代码，将相关的数据、方法和计算属性等放在一起，提高了代码的可读性和可维护性。
Composition API 的使用：setup()函数是使用 Composition API 的基础，Composition API 提供了更灵活和可组合的方式来编写组件逻辑。你可以使用ref、reactive、computed等函数来定义响应式数据和计算属性，以及使用watch、onMounted等函数来处理副作用和生命周期钩子。
更好的 TypeScript 支持：由于setup()函数使用了函数参数的形式，TypeScript 可以更好地推断和检查组件的类型，提供更好的开发体验和类型安全性。
更细粒度的控制：setup()函数可以返回一个对象，将需要暴露给模板的数据、方法和计算属性等进行显式的声明，可以更细粒度地控制哪些数据和方法对外可见。
尽管setup()函数带来了一些变化，但data()函数仍然可用于定义响应式的数据，特别是对于简单的组件。对于较复杂的组件或希望使用 Composition API 来组织逻辑的情况，推荐使用setup()函数来编写代码。
vue中的setup中的reactive,ref,toRefs,compued的用法，及彼此的区别
在Vue中，setup函数是用于设置组件的地方。它是在组件实例创建之前执行的，并且它可以返回一个包含响应式数据、计算属性和方法的对象。在setup函数中，有几个常用的函数用于创建和处理响应式数据，包括reactive、ref、toRefs和computed。
在Vue中，setup函数是用于设置组件的地方。它是在组件实例创建之前执行的，并且它可以返回一个包含响应式数据、计算属性和方法的对象。在setup函数中，有几个常用的函数用于创建和处理响应式数据，包括reactive、ref、toRefs和computed。
(1)reactive：
reactive函数用于创建一个响应式对象。它接受一个普通的JavaScript对象，并返回一个包装后的响应式代理对象。
使用reactive创建的对象中的属性可以通过引用来进行访问和修改，并且当属性的值发生变化时，相关的依赖将会被追踪，从而触发组件的重新渲染。
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
(2)ref：
ref函数用于创建一个简单的响应式引用。它接受一个参数，并返回一个具有value属性的响应式对象。
使用ref创建的对象需要通过.value来访问和修改它的值，并且当值发生变化时，相关的依赖也会被追踪。
import { ref } from 'vue';
const count = ref(0);
(3)toRefs：
toRefs函数用于将一个响应式对象转换为普通的JavaScript对象，其中每个属性都是一个单独的ref。
当需要将响应式对象的属性作为props传递给子组件时，使用toRefs可以确保子组件中的props也是响应式的。
import { reactive, toRefs } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
const stateRefs = toRefs(state);
(4)computed：
computed函数用于创建一个计算属性。它接受一个计算函数，并返回一个具有value属性的响应式对象。
计算属性是根据它的依赖进行缓存的，只有依赖发生变化时，计算函数才会重新执行。
例如：
import { computed } from 'vue';
const count = ref(0);
const double = computed(() => count.value * 2);
这些函数之间的区别可以总结如下：
reactive用于创建一个包含多个属性的响应式对象，可以通过引用访问和修改属性。
ref用于创建一个简单的响应式引用，需要通过.value来访问和修改它的值。
toRefs用于将响应式对象转换为普通的JavaScript对象，其中每个属性都是一个单独的ref。
computed用于创建一个计算属性，可以根据其依赖进行缓存，并在依赖发生变化时重新计算值。
watch与watchEffect
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
</div>
<script>
var app = Vue.createApp({
setup() {
let a = Vue.ref(1);
let b = Vue.ref(2);
function click() {
a.value += 1;
b.value += 1;
}
Vue.watchEffect(() => {
console.log("变量发生变化");
console.log(b.value);
});
return {
a,
b,
click
}
},
template: `
<text>{{ a }}</text>
<button @click="click">次数</button>
`
});
app.mount("#Application");
</script>
</body>
</html>
上面例子中，watch中监测哪个变量，就写哪个变量的value，如果该变量没有发生变化，不会打印。
在Vue中，watch和watchEffect是用于观察数据变化的功能。
watch：
watch函数用于观察指定的数据，并在其发生变化时执行回调函数。
它接受两个参数：要观察的数据和回调函数。
当被观察的数据发生变化时，回调函数将被调用，并传入新值和旧值作为参数。
watch还可以接受第三个可选参数，用于配置更多选项，例如是否立即触发回调、是否深度观察对象等。
例如：
import { watch, reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
watch(() => state.count, (newValue, oldValue) => {
console.log('count changed:', newValue, oldValue);
});
在Vue中，watch和watchEffect是用于观察数据变化的功能。
watch：
watch函数用于观察指定的数据，并在其发生变化时执行回调函数。
它接受两个参数：要观察的数据和回调函数。
当被观察的数据发生变化时，回调函数将被调用，并传入新值和旧值作为参数。
watch还可以接受第三个可选参数，用于配置更多选项，例如是否立即触发回调、是否深度观察对象等。
例如：
javascript
Copy code
import { watch, reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
watch(() => state.count, (newValue, oldValue) => {
console.log('count changed:', newValue, oldValue);
});
watchEffect：
watchEffect函数用于自动追踪响应式数据的依赖，并在任何依赖发生变化时执行回调函数。
它只接受一个回调函数作为参数。
当回调函数执行时，Vue会自动追踪其内部使用的响应式数据，并在任何依赖发生变化时重新执行回调。
与watch不同，watchEffect不需要明确指定要观察的数据，它会自动检测并追踪使用的响应式数据。
例如：
import { watchEffect, reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
watchEffect(() => {
console.log('count:', state.count);
});
watch和watchEffect之间的区别可以总结如下：
watch需要明确指定要观察的数据，只在指定的数据发生变化时执行回调函数。
watchEffect会自动追踪使用的响应式数据，并在任何依赖发生变化时执行回调函数。
如果只需要观察特定的数据变化，使用watch；如果需要自动追踪响应式数据的所有变化，使用watchEffect。
在Vue的watch函数中，可以通过传递一个数组或对象来同时监听多个数据源的变化。
如果要同时监听多个数据源，可以按以下方式使用watch函数：
import { watch, reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello',
isActive: false
});
watch(
[() => state.count, () => state.message],
([newCount, newMessage], [oldCount, oldMessage]) => {
console.log('count or message changed:');
console.log('new count:', newCount);
console.log('new message:', newMessage);
console.log('old count:', oldCount);
console.log('old message:', oldMessage);
}
);
在数组中，每个元素是一个函数，该函数返回要观察的数据源。在对象中，每个属性是要观察的数据源，并且其值是一个函数，返回相应的数据。
回调函数的参数将根据数据源的顺序或属性名进行解构，提供新值和旧值。你可以根据需要使用这些值来执行相应的操作。
无论使用数组还是对象，watch函数将同时监听多个数据源的变化，并在任何数据源发生变化时执行回调函数。
vue组件的生命周期
在Vue.js 2.x中，组件的生命周期可以分为以下几个阶段：
创建阶段（Creation Phase）：
beforeCreate：在实例被创建之初，数据观测（data observer）和事件配置（event/watcher setup）之前被调用。在此阶段，组件的属性和方法都无法访问。
created：在实例被创建后，数据观测（data observer）和事件配置（event/watcher setup）之后被调用。在此阶段，组件的属性和方法已经被初始化，可以进行数据的操作和异步请求。
挂载阶段（Mounting Phase）：
beforeMount：在组件挂载到DOM之前被调用。
mounted：在组件挂载到DOM后被调用。在此阶段，组件已经被渲染到页面上，可以进行DOM操作和与外部库的交互。
更新阶段（Updating Phase）：
beforeUpdate：在组件更新之前，且在重新渲染之前被调用。在此阶段，可以对组件进行更新前的操作。
updated：在组件更新完成后被调用。在此阶段，组件已经完成重新渲染，可以进行DOM操作和与外部库的交互。
销毁阶段（Destroying Phase）：
beforeUnmount：在组件卸载之前被调用。
unmounted：在组件卸载后被调用。在此阶段，组件从DOM中移除，可以进行清理操作和取消事件监听。
在Vue.js 3.x中，组件的生命周期钩子函数发生了变化，主要有以下几个变化：
beforeCreate 和 created 保持不变。
beforeMount 和 mounted 保持不变。
beforeUpdate 和 updated 被重命名为 beforeUpdate 和 updated。
新增 beforeUnmount 和 unmounted，用于取代 Vue.js 2.x 中的 beforeDestroy 和 destroyed。
需要注意的是，在Vue.js 3.x中，被废弃的生命周期钩子函数包括 beforeDestroy 和 destroyed，以及 activated 和 deactivated。这些被废弃的钩子函数已经不推荐使用，而是使用新的钩子函数进行替代。
通过这些生命周期钩子函数，你可以在不同的阶段执行相应的逻辑和操作，以满足组件的需求和业务逻辑。
vue.h
在Vue.js中，vue.h是指Vue的h函数（或称为createElement函数）。
h函数是用于创建虚拟DOM元素（也称为VNode）的辅助函数。它是Vue中的渲染函数之一，用于描述组件的结构和内容。
使用h函数，你可以以声明式的方式定义组件的结构，类似于HTML标记。它接受三个参数：tag（标签名或组件选项）、props（元素的属性）和children（元素的子节点）。
例如，使用h函数创建一个简单的div元素：
import { h } from 'vue';
const vnode = h('div', { class: 'container' }, 'Hello, World!');
上述代码将创建一个虚拟DOM元素，表示一个带有class属性为'container'的div元素，其文本内容为'Hello, World!'。
通常情况下，你不需要直接使用h函数来手动创建虚拟DOM元素，因为Vue的模板编译器会自动将模板转换为对应的h函数调用。这样，你可以使用类似HTML的语法来编写组件模板，而不必直接操作h函数。
在Vue的单文件组件中，你可以使用模板语法编写组件的结构，而不需要直接调用h函数。h函数通常是在底层由Vue编译器生成和调用的。
总之，vue.h指的是Vue的h函数，它用于创建虚拟DOM元素，描述组件的结构和内容。
:key是什么意思
在 Vue 的 v-for 指令中，:key 是用于为每个被迭代的元素提供一个唯一的标识符（key）的属性。
当使用 v-for 进行列表渲染时，Vue 通过 :key 来跟踪每个元素的身份，以便高效地更新和重用 DOM 元素。
:key 的值应该是每个列表项的唯一标识符。它可以是任何可以唯一标识列表项的值，比如元素的 ID、数据库中的主键、或者是每个元素在列表中的索引。
例如，在你提供的代码中的 v-for 循环中，:key="item" 意味着将列表中的每个 item 作为其唯一标识符。这样做可以帮助 Vue 跟踪每个列表项，并在数据发生变化时正确地添加、移动或删除 DOM 元素，从而提高性能和渲染效率。
注意，:key 的值应该是稳定且唯一的，不应该与列表项的其他属性有关，也不应该在列表项之间发生变化。这样可以确保 Vue 在更新列表时能够正确识别每个元素的身份。
总结一下，:key 是 Vue 中用于标识列表项的唯一标识符的属性，它在 v-for 循环中使用，帮助 Vue 跟踪列表项的身份以提高渲染效率和性能。
为什么要导出默认项，为什么不一个一个的导出
导出默认项和逐个导出具体项都是在JavaScript模块化中常见的导出方式，而选择哪种方式取决于你的需求和代码结构。
导出默认项的优点包括：
简洁性：通过默认导出，可以将模块的主要功能或主要对象以简洁的方式导出，而无需使用花括号包裹。
命名灵活性：导出默认项时，导入方可以自由命名导入的对象，不受源模块的命名影响。
默认导入语法：默认导出允许使用更简洁的导入语法，例如import myModule from './myModule'，而不需要指定具体的导出项名称。
而逐个导出具体项的优点包括：
明确性：逐个导出具体项可以更明确地显示模块中导出的内容，让开发者更容易理解和使用。
模块可拆解性：通过逐个导出具体项，模块的各个部分可以独立使用，使得模块更易于拆解和重组，提高了代码的可维护性和可重用性。
选择默认导出还是逐个导出具体项，取决于你对代码结构和模块化的偏好以及具体的使用场景。有时候，一个模块可能只需要导出一个主要的功能或对象，这时使用默认导出可以提供更简洁的语法。而在其他情况下，可能需要将模块的各个部分独立导出，这时逐个导出具体项更合适。
无论选择哪种方式，JavaScript的模块化语法都提供了灵活性和可维护性，让我们能够更好地组织和重用代码。
默认vue项目，#app到底在哪里定义的？
默认的Vue项目中，#app是在HTML模板文件中定义的。
默认情况下，Vue CLI创建的Vue项目会有一个名为public/index.html的HTML模板文件。在这个文件中，你会找到一个带有id为app的元素，类似于以下代码：
这个元素被称为挂载点（mount point），它是Vue应用程序的根DOM元素。Vue应用程序会将自己的组件渲染并挂载到这个元素上。
在你提供的代码中，createApp(App).mount('#app')的意思是创建一个Vue应用程序，并将根组件App挂载到id为app的元素上。这样，Vue应用程序就会在#app元素的位置渲染和展示你的Vue组件。
因此，要修改或查找#app的定义，你可以在public/index.html文件中找到对应的HTML元素。如果你希望将Vue应用程序挂载到其他元素上，只需修改index.html中对应元素的id属性，并在createApp().mount()中使用相应的选择器。
组件的局部注册
方式1：
<div id="Applicaiton">
<comp1></comp1>
<script>
const App=Vue.createApp({});
const comp2={
template:`<div>组件2</div>`,
};
contst comp1={
components:{
'comp2':comp2
},
template:`
<div>组件1</div>
<comp2></comp2>
</div>
`
}
App.component("comp1",comp1);
App.mount("#Application")
</script>
方式2:
单vue文件
app.vue:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</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>
router-view变成了注释
原因挺“走近科学”的，居然是没有安装vue-router4.
npm install vue-router@4 -s，就可以了。。。。。
npm vue-router@4 --version来查看版本。
vue/cli默认情况下，居然要求vue文件的名称为multi-word，比如User.vue居然就是不合法的....
vue.config.js增加lintOnSave:false
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
})
beforeRouteUpdate
在路由切换的时候被触发，其中其参数为(to,from)。如果切换没有变化，不触发。
例：
userInfo.vue
<template>
<h1>姓名:{{ $route.params.username }}</h1>
<h2>id:{{ $route.params.id }}</h2>
</template>
<script>
export default {
beforeRouteUpdate(to, from) {
console.log(to, from);
alert(`组件加载，请求数据。路由参数为name:${this.$route.params.username},id:${this.$route.params.id}`);
}
};
</script>
App.vue
<template>
<h1>hello world</h1>
<p>
<router-link to="/user/johnyang1/888">页面1</router-link>
<br />
<router-link to="/user/johnyang2/888">页面2</router-link>
</p>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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>
main.js
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';
//import Demo1 from './components/Demo1.vue';
//import Demo2 from './components/Demo2.vue';
import User from './components/UserInfo.vue';
const app = createApp(App);
//const routes = [
// { path: '/demo1', component: Demo1 },
// //{ path: '/demo2', component: Demo2 },
//];
const routes = [
{path:'/user/:username/:id',component:User},
];
const router = createRouter({
history: createWebHashHistory(),
routes: routes
});
app.use(router);
app.mount("#app");
element-plus的引入与使用
全局:
import ElementPlus from 'element-plus';
import 'element-plus/es/components/button/style/css'
const app = createApp(App);
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
https://element-plus.gitee.io/zh-CN/guide/quickstart.html#全局配置
html中<script type="module">中的module是什么意思
在HTML中，<script>标签用于加载和执行JavaScript代码。<script>标签的type属性用于指定脚本的内容类型。当使用<script type="module">时，表示脚本内容是一个ES6模块。
ES6模块是一种 JavaScript 模块化的标准，它提供了一种组织、导入和导出 JavaScript 代码的方式，使得我们可以更好地组织和管理代码。模块化的概念是将代码划分为独立的模块，每个模块有自己的作用域，可以导入和导出需要共享的变量、函数和类。
使用<script type="module">标记脚本为ES6模块后，该脚本会遵循ES6模块的规范进行解析和执行。在ES6模块中，可以使用import关键字导入其他模块提供的功能，并使用export关键字将本模块中的功能暴露给其他模块使用。
html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>ES6 Module Example</title>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>
js
//main.js
// main.js
import { greet } from './utils.js';
greet('John');
//utils.js
// utils.js
export function greet(name) {
console.log(`Hello, ${name}!`);
}
js数组合并
js数组[{""id":1,"num":2},{"id":3,"num":1},{"id":2,"num":3}]，如何根据id，合并为[{"id":1,"num":5},{"id":3,"num":1}]
const arr = [
{ "id": 1, "num": 2 },
{ "id": 3, "num": 1 },
{ "id": 2, "num": 3 }
];
const mergedArr = arr.reduce((acc, curr) => {
const existingObj = acc.find(obj => obj.id === curr.id);
if (existingObj) {
existingObj.num += curr.num;
} else {
acc.push(curr);
}
return acc;
}, []);
console.log(mergedArr);
这里使用了 Array.reduce 方法来迭代原始数组，并通过 Array.find 方法查找已合并数组中是否存在具有相同 id 的对象。如果存在，将它们的 num 属性相加；如果不存在，则将当前对象添加到已合并数组中。
输出结果为 [{"id":1,"num":5},{"id":3,"num":1},{"id":2,"num":3}]，其中相同 id 的对象已合并。
当我们使用 arr.reduce 方法时，我们需要传递一个回调函数和一个初始值作为参数。该方法会对数组中的每个元素依次调用回调函数，并将回调函数的返回值传递给下一次调用。
在我们的示例中，回调函数有两个参数：acc（累加器）和 curr（当前元素）。acc 是在每次回调函数调用时累积的值，而 curr 则是当前正在处理的元素。
初始值为空数组 []，我们将在每次回调函数调用时更新它，以便最终获得合并后的数组。
在回调函数中，我们首先使用 Array.find 方法来查找具有相同 id 的对象。如果找到了匹配的对象，我们将其存储在 existingObj 变量中。
接下来，我们进行条件判断。如果找到了匹配的对象，则将当前元素的 num 属性值加到已存在的对象上，实现了对象的合并。否则，将当前元素添加到累加器中，因为它是一个新的 id。
最后，我们返回累加器 acc，以便在下一次回调函数调用时使用。当所有元素都被处理完毕后，arr.reduce 方法返回最终的累加器值，即合并后的数组。
vue error 'xxxx' is defined but never used ,如何屏蔽
在整个文件的顶部添加以下注释，以忽略所有未使用的变量和函数的警告：
/* eslint-disable no-unused-vars */
这将告诉ESLint（如果您正在使用它）忽略未使用的变量和函数的警告。
《style scoped》《/style》
<style scoped>是 Vue 组件中的样式块声明，用于定义组件的样式。scoped 是一个特殊的属性，它表示这个样式块只会应用于当前组件的作用域内，而不会影响到其他组件或全局样式。
当你在 Vue 组件中使用 <style scoped> 时，样式只会作用于当前组件的元素，不会泄漏到其他组件或全局样式中。这样做的好处是，可以确保组件的样式与其他组件的样式相互隔离，避免样式冲突和意外的副作用。
Vue 会自动将<style scoped>中的样式编译成具有唯一作用域的选择器，以实现样式的隔离。例如，如果你在样式块中写了一个类选择器 .my-class，Vue 会将其编译为一个带有唯一标识符的选择器，例如 .my-class[data-v-1a2b3c]，这样确保了样式只会应用于当前组件的元素。
使用<style scoped>可以方便地管理组件的样式，并确保组件之间的样式互不干扰，是 Vue 组件开发中常用的技巧之一。
should always be multi-word vue/multi-word-component-names
should always be multi-word vue/multi-word-component-names
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
})
vue3引入element plus时找不到index.css问题解决
原来
import 'element-plus/lib/theme-chalk/index.css';
改为import 'element-plus/theme-chalk/index.css';
组合式API不能调用this，用instance代替
<script>
import { getCurrentInstance } from 'vue';
export default {
props: ["items"],
setup() {
const instance = getCurrentInstance();
const selectItem=function(index){
instance.emit('selected', index);
};
return {
selectItem,
}
}
}
</script>
export
在JavaScript中，export default是一种用于导出模块的语法。它允许你在一个模块中定义一个默认导出，使得其他模块可以直接导入该默认导出。
具体来说，export default语法用于将一个值、函数、类或对象声明为默认导出。一个模块通常只能有一个默认导出，而且默认导出不需要使用花括号 {} 进行包裹。
以下是一些使用export default的示例：
导出一个值：
// module.js
const message = 'Hello, world!';
export default message;
// anotherModule.js
import myMessage from './module.js';
console.log(myMessage); // 输出：Hello, world!
导出一个函数：
// math.js
const add = (a, b) => a + b;
export default add;
// anotherModule.js
import sum from './math.js';
console.log(sum(2, 3)); // 输出：5
导出一个类：
// MyClass.js
export default class MyClass {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
// anotherModule.js
import MyClass from './MyClass.js';
const myObj = new MyClass('Alice');
myObj.sayHello(); // 输出：Hello, Alice!
JavaScript中可以通过使用export关键字导出多个值、函数、类或对象。与export default不同的是，export关键字需要使用花括号 {} 来指定要导出的内容。
导出多个值：
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// anotherModule.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 输出：5
console.log(subtract(5, 2)); // 输出：3
导出函数和类：
// utils.js
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
// anotherModule.js
import { capitalize, Person } from './utils.js';
console.log(capitalize('hello')); // 输出：Hello
const person = new Person('Alice');
person.sayHello(); // 输出：Hello, Alice!
导出对象：
// config.js
export const apiUrl = 'https://api.example.com';
export const apiKey = 'YOUR_API_KEY';
// anotherModule.js
import { apiUrl, apiKey } from './config.js';
console.log(apiUrl); // 输出：https://api.example.com
console.log(apiKey); // 输出：YOUR_API_KEY
路由name作用
在给定的路由配置中，name属性用于给路由命名，它在路由导航、动态路由匹配和程序化导航等场景中发挥重要作用。以下是name属性的一些作用：
路由导航：name属性可以在路由导航时使用，通过名称来引用路由。例如，在使用
动态路由匹配：当使用动态路由参数时，可以通过name属性来获取动态参数的路由路径。这在需要构建动态链接或处理特定路由的情况下非常有用。
路由跳转：在编程式导航中，使用name属性可以方便地进行路由跳转。通过指定路由的name属性，可以使用router.push()或router.replace()来跳转到该路由。
路由配置：name属性在路由配置中是可选的，但它可以提供更好的可读性和可维护性。通过为每个路由指定唯一的名称，可以更清晰地了解路由的用途和功能。
综上所述，name属性允许你为路由指定一个易于记忆和引用的名称，以便在不同的场景中使用该名称来执行路由导航、动态路由匹配和路由跳转等操作。它提供了更好的可读性、可维护性和灵活性。
background-image:url("~@/assets/banner.png")
这是一个使用CSS样式中background-image属性设置背景图像的示例，并且使用了Webpack的特殊语法。
在给定的示例中，url("~@/assets/banner.png")是一个URL字符串，它指定了背景图像的路径。然而，这里使用了特殊的Webpack语法来解析路径。
@符号在Webpack中通常用于表示项目的根目录。~符号是Webpack中的一个别名，用于引用项目的依赖模块。
@/assets/banner.png表示项目中assets文件夹下的banner.png文件。@符号表示项目的根目录，而/assets/banner.png指定了文件的相对路径。
通过使用这种特殊的语法，Webpack能够正确地解析和处理模块之间的依赖关系，并将背景图像正确地添加到构建过程中。这样，你就可以在CSS样式中使用这个路径，而无需担心最终构建过程中的路径问题。
需要注意的是，这种语法是特定于Webpack的，如果你使用的是其他构建工具或环境，可能需要使用不同的语法来引用背景图像。
vue从github上clone，npm run serve报错
用管理员模式打开cmd，然后npm install，然后就会下载package.json下面的dependencies中的包。
打开魔法后，可能还需要关掉腾讯安全卫士之类的软件，才能克隆成功，否则会一致报错ssl 443错误。
#title具名插槽的名称
<template #title>
<i class="el-icon-s-order"></i>
<span>Order Management</span>
</template>
这段代码是一个 Vue 组件中的模板代码片段，使用了 Vue 的插槽（slot）功能来定义一个具名插槽（named slot）。
在 Vue 组件中，插槽可以让我们在组件内部的特定位置插入和渲染额外的内容。插槽有两种类型：默认插槽和具名插槽。具名插槽允许我们在组件中定义多个插槽，并使用特定名称来引用它们。
在这个代码片段中，#title 是一个具名插槽的名称。插槽使用 template 标签包裹，并通过 # 符号后跟插槽的名称来定义。在这个例子中，#title 定义了一个名为 title 的具名插槽。
插槽内容由插槽的宿主组件提供。在宿主组件中，可以通过插槽名称将内容传递给插槽。例如，在使用这个组件的地方，可以通过以下方式将内容传递给 title 插槽：
<template v-slot:title>
<i class="el-icon-s-order"></i>
<span>Order Management</span>
</template>
在上述代码中，使用 v-slot 指令来指定要传递给 title 插槽的内容。在这个例子中，插槽内容是一个 元素和一个 元素，用于显示一个图标和一个标题，表示订单管理。
宿主组件会将插槽内容插入到对应的插槽位置，以替代原来定义的插槽占位符。这样，在组件的渲染过程中，插槽内容会被正确地渲染到相应的位置上。
通过使用具名插槽，我们可以在组件内部定义占位符，并在使用该组件时，根据需要传递不同的内容，从而实现更大的灵活性和可定制性。
