vue 组件-单文件组件
Vue的单文件组件（Single File Component）是一种将模板、样式和逻辑代码封装在一个文件中的组件开发方式。它使用了以.vue为后缀的文件，结构清晰，便于维护和复用。
示例
一个典型的Vue单文件组件包含三个部分：模板（Template）、脚本（Script）和样式（Style）。
-
模板（Template）：模板部分定义了组件的结构和布局，使用HTML标记和Vue的模板语法进行编写。可以使用Vue的指令、插值表达式、事件绑定等功能来动态渲染和交互。
-
脚本（Script）：脚本部分定义了组件的行为和逻辑，使用Vue的组件选项进行编写。可以在脚本中定义组件的数据、计算属性、方法、生命周期钩子等。还可以引入其他模块、组件和插件，对外暴露组件接口。
-
样式（Style）：样式部分定义了组件的样式和布局，可以使用CSS、Sass、Less等预处理器进行编写。样式可以通过作用域或全局方式应用到组件中，避免样式冲突和影响。
单文件组件的优势在于将组件的相关代码集中在一个文件中，提高了代码的可读性和可维护性。同时，它也支持热重载和模块化开发，方便开发者进行组件的调试和复用。
以下是一个简单的Vue单文件组件的示例：
{{ message }}
在上面的示例中，模板部分定义了一个标题和一个按钮，通过插值表达式动态显示message的值。脚本部分定义了message的初始值和一个方法来改变message的值。样式部分定义了标题的颜色，并使用scoped属性使样式只作用于当前组件。
以上是Vue单文件组件的基本介绍和示例，通过单文件组件可以更方便地开发和管理Vue组件。
不同版本的Vue：
- Vue.js 1.x：是Vue的第一个版本，具有基本的数据绑定和组件化能力，但缺少一些高级特性。
- Vue.js 2.x：是Vue的当前稳定版本，引入了虚拟DOM、渲染优化、更好的性能和开发体验等特性。
- Vue.js 3.x：是Vue的最新版本，重点改进了性能、体积和开发体验，引入了Composition API、更好的TypeScript支持等新特性。
config.js：
config.js是一个常见的配置文件，用于存放项目的配置选项。在Vue项目中，可以使用vue.config.js文件来配置Vue CLI的行为和项目的构建过程。通过修改该文件中的配置项，可以自定义构建、开发服务器、打包等行为。
ref属性：
ref是Vue中的一个特殊属性，用于在模板中获取对应元素或组件的引用。通过在模板中给元素或组件添加ref属性，并为其指定一个唯一的名称，就可以在Vue实例中通过this.$refs来访问该元素或组件的实例。ref属性可以用于访问DOM元素的属性和方法，或者调用组件的方法。
配置项props：
props是Vue组件中的一个配置项，用于接收父组件传递的数据。通过在子组件的props中声明需要接收的属性，并指定其类型、默认值等，子组件就可以在模板中使用这些属性。父组件在使用子组件时，可以通过属性的方式向子组件传递数据，子组件就可以在props中接收并使用这些数据。
例如，在子组件中声明了一个props属性message，父组件可以通过在子组件标签上使用v-bind指令来传递数据：
<template>
<div>{{ message }}div>
template>
<script>
export default {
props: {
message: {
type: String,
default: 'Hello, World!'
}
}
};
script>
父组件使用子组件并传递数据的示例：
<template>
<div>
<my-component :message="parentMessage">my-component>
div>
template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
parentMessage: 'Hello, Vue!'
};
}
};
script>
在上述示例中，父组件通过:message="parentMessage"将parentMessage的值传递给子组件的message属性，子组件就可以在模板中使用message属性来显示传递的数据。
混入（Mixin）：
混入是Vue中一种可重用的组件选项，它可以包含组件的各种选项，如数据、方法、生命周期钩子等。通过混入，可以将这些选项合并到组件中，从而实现代码的复用。
混入可以在全局范围内使用，也可以在组件级别使用。在全局范围内使用混入时，混入的选项将被合并到所有组件中，而在组件级别使用混入时，混入的选项将被合并到该组件中。
例如，定义一个混入对象：
const myMixin = {
data() {
return {
message: 'Hello, Mixin!'
};
},
methods: {
sayHello() {
console.log('Hello from mixin!');
}
}
};
在组件中使用混入：
import myMixin from './myMixin';
export default {
mixins: [myMixin],
created() {
console.log(this.message); // 输出：Hello, Mixin!
this.sayHello(); // 输出：Hello from mixin!
}
};
在上述示例中，通过mixins选项将混入对象myMixin合并到组件中，从而可以在组件中使用混入对象中定义的data和methods。在created生命周期钩子中，可以访问混入对象中的数据和方法。
scoped：
scoped是Vue中样式的一个特殊属性，用于限定样式的作用范围。当在单文件组件的样式部分添加scoped属性时，样式仅作用于当前组件的模板部分，不会影响其他组件或全局样式。
例如，一个带有scoped属性的单文件组件：
<template>
<div class="container">
<h1>{{ message }}h1>
<button @click="changeMessage">Change Messagebutton>
div>
template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
changeMessage() {
this.message = 'Hello, World!';
}
}
};
script>
<style scoped>
.container {
background-color: #f0f0f0;
padding: 10px;
}
h1 {
color: blue;
}
style>
在上述示例中，.container样式只会应用于当前组件的模板部分，不会影响其他组件或全局样式。同样，h1样式只会应用于当前组件的模板中的h1标签。
使用scoped属性可以避免样式冲突和命名冲突，使样式更具可维护性和隔离性。