vue实现的两种模式
Vue 实现的两种模式
Vue.js 主要支持两种实现模式：单文件组件（SFC）和运行时直接引入（CDN/脚本引入）。这两种模式适用于不同的开发场景和需求。
单文件组件（SFC）模式
单文件组件是 Vue 最推荐的开发方式，通常结合构建工具（如 Vue CLI 或 Vite）使用。一个 .vue 文件包含模板、脚本和样式三部分，结构清晰且易于维护。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
div {
color: blue;
}
</style>- 优点：模块化、支持预处理器（如 SCSS、TypeScript）、适合中大型项目。
- 适用场景：需要构建工具支持，适合现代前端工程化开发。
运行时直接引入模式
通过 CDN 或直接引入 Vue 的脚本文件，无需构建工具即可快速使用 Vue。这种方式适合简单页面或原型开发。
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app');
</script>
</body>
</html>- 优点：无需构建工具，快速集成。
- 适用场景：小型项目、学习演示或与其他后端框架（如 Django、Laravel）简单结合。
