共计 1238 个字符，预计需要花费 4 分钟才能阅读完成。
单文件组件模式
原文链接：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 驱动的时候，上面这些毛病将变得非常明显。
非单文件组件毛病
- 全局定义 (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 等构建工具。
| <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
正文完
