通过html文件来使用Vue的单文件组件形式详解
更新时间：2023年05月26日 08:36:08 作者：菜园前端
这篇文章主要介绍了通过html文件来使用Vue的单文件组件形式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
非单文件组件
可以理解为是通过 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 相关的文章都会以单文件组件的形式来举例，更多关于Vue单文件组件形式的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了通过html文件来使用Vue的单文件组件形式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本篇文章主要介绍了Vue.directive自定义指令的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
Vue-router中hash模式与history模式的区别详解
这篇文章主要给大家介绍了关于Vue-router中hash模式与history模式区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了全站最详细的Vuex教程,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vuex在vite&vue3中的简单使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家介绍了Vue之组件的自定义事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了Vue+Element switch组件的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了在Vue中用canvas实现二维码和图片合成海报的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要为大家介绍了vue篇之事件总线EventBus使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论