关于前端:单文件组件形式

单文件组件模式

原文链接:https://note.noxussj.top/?source=sifo

非单文件组件

能够了解为是通过 html 文件来应用 Vue。

<!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/vue@2.6.14/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 驱动的时候,上面这些毛病将变得非常明显。

非单文件组件毛病

  1. 全局定义 (Global definitions) 强制要求每个 component 中的命名不得反复
  2. 字符串模板 (String templates) 不足语法高亮,在 HTML 有多行的时候,须要用到俊俏的 \
  3. 不反对 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 显著被脱漏
  4. 没有构建步骤 (No build step) 限度只能应用 HTML 和 ES5 JavaScript,而不能应用预处理器,如 Sass 和 Babel

单文件组件

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

<template>
    <div>
        {{ message }}
    </div>
</template>

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

这些特定的语言只是例子,你能够只是简略地应用 Babel、TypeScript、SCSS、PostCSS 或者其余任何可能帮忙你进步生产力的预处理器。

单文件组件个别能够通过 Vue CLI 脚手架疾速搭建一个我的项目,并且曾经帮你配置好了 Babel、Webpack 热更新等性能。

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


原文链接:https://note.noxussj.top/?source=sifo

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据