什么是单文件组件?

单文件组件形式

非单文件组件

可以理解为是通过 html 文件来使用 Vue。

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                },
                template: '<div id="app">{{ message }}</div>'
            })
        </script>
    </body>
</html>

这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显。

非单文件组件缺点

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

单文件组件

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 webpack 或 Browserify 等构建工具。

vue 复制代码
<template>
    <div>
        {{ message }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'hello world'
        }
    }
}
</script>

这些特定的语言只是例子,你可以只是简单地使用 Babel、TypeScript、SCSS、PostCSS 或者其他任何能够帮助你提高生产力的预处理器。

单文件组件一般可以通过 Vue CLI 脚手架快速搭建一个项目,并且已经帮你配置好了 Babel、Webpack 热更新等功能。

后续所有和 Vue 相关的文章都会以单文件组件的形式来举例。

原文链接:菜园前端

相关推荐
龚思凯2 分钟前
TypeScript 中 typeof 的全面解析:从基础用法到高级技巧
前端·typescript
itslife4 分钟前
实现 render 函数 - 初始化更新队列
前端·react.js·前端框架
baozj5 分钟前
一次表单数据复用引发的 Bug:理解 Vue 中的 data 为何是函数
前端·javascript·vue.js
LRH7 分钟前
JS基础 - instanceof 理解及手写
前端·javascript
leefirm7 分钟前
node 切换版本,每次打开都是切换前的版本怎么办?Node.js 版本管理神器 NVM 完全使用指南
前端
kangyouwei9 分钟前
鸿蒙开发:18-hilogtool命令的使用
前端·harmonyos
小小神仙10 分钟前
JSCommon系列 - 为什么前端没有 Apache Commons?
前端·javascript·设计模式
WildBlue10 分钟前
🚀 React组件化实战:用TodoList项目搭乐高式开发!🎉
前端·react.js
一头小鹿11 分钟前
【JS】手写显示绑定改变this指向的方法call、apply、bind | 笔记整理
javascript
Nano11 分钟前
ES6中的Proxy和Reflect:深入解析与Vue3响应式原理的完美结合
前端·vue.js