Vue单文件组件 (五)

爱被打了一巴掌 2022-12-01 14:10 228阅读 0赞

vue中的单文件组件指的是**后缀为.vue的文件**。  
vue文件里由template、script、style三部分组成。  
传统文件中经常遇到以下问题，单文件组件主要是为了解决这些等问题。

1.  全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
2.  字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \\
3.  不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4.  没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel。

**完整文件：**

<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>