El componente de archivo único en vue se refiere al archivo con el sufijo .vue .
El archivo vue consta de tres partes: plantilla, script y estilo.
Los siguientes problemas se encuentran a menudo en archivos tradicionales, y el componente de archivo único es principalmente para resolver estos problemas.
- Las definiciones globales requieren que los nombres de cada componente no se repitan
- Las plantillas de cadenas carecen de resaltado de sintaxis. Cuando HTML tiene varias líneas, ugly \
- Sin soporte CSS (Sin soporte CSS) significa que cuando HTML y JavaScript están en componentes, CSS obviamente se pierde
- Ningún paso de compilación restringe el uso de HTML y JavaScript ES5, pero no de preprocesadores como Pug (anteriormente Jade) y Babel.
Archivo completo:
<template>
<div class="container">demo</div>
</template>
<script>
export default {
// 头部信息 可以添加标题这些 具体看vue-meta文档
metaInfo: {
title: 'demo'
},
// 组件
components: {
},
// props 可以是数组或对象，用于接收来自父组件的数据
// props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
props: {
// page: {
// type: Number,
// required: true,
// default: 1,
// },
// page: {
// type: [Number, String],
// default: () => 1,
// },
},
// Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化
data() {
return {
// a: 1
}
},
// 计算属性
// 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
// 注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
// 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
computed: {
},
// 观察属性
// 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
// Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
watch: {
},
// 实例初始化之后
// 数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate() {
},
// 实例初始化完成
// 实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
created() {
},
// 挂载开始之前 相关的 render 函数首次被调用
beforeMount() {
},
// 挂载完成
// 该钩子在服务器端渲染期间不被调用
// mounted 不会承诺所有的子组件也都一起被挂载
// 如果你希望等到整个视图都渲染完毕 可以用 vm.$nextTick 替换掉 mounted
mounted() {
},
// keep-alive 组件激活时调用。
// 该钩子在服务器端渲染期间不被调用。
activated() {
},
// keep-alive 组件停用时调用。
// 该钩子在服务器端渲染期间不被调用。
deactivated() {
},
// 数据更新时调用
// 该钩子在服务器端渲染期间不被调用 因为只有初次渲染会在服务端进行
// 发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
beforeUpdate() {
},
// 数据更新完成
// 数据更改 导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
// 所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。
// 如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
updated() {
},
// 实例销毁之前调用
// 该钩子在服务器端渲染期间不被调用
beforeDestroy() {
},
// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
// 该钩子在服务器端渲染期间不被调用
// destroyed() { },
// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
// 此钩子可以返回 false 以阻止该错误继续向上传播。
// errorCaptured(err, vm, info) { },
// 方法
methods: {
}
}
</script>
<style lang="scss" scoped>
// lang可以填scss sass less等等预处理器
// 添加scoped会使css的作用域只在这个组件内
.container{
}
</style>