使用 Vue 实现我的第一个程序
作为一名 Java 后端开发人员，我深知前后端分离的重要性。虽然 Vue + Spring Boot 已经诞生多年，但它仍是非常经典且成熟的技术栈。最近我已经基本掌握了 Spring Boot，接下来便开始学习 Vue，希望通过这个小练习巩固基础，并在学完后手写一个小项目。
环境准备
引入 Vue 库
本例中使用本地
js/vue.js文件，也可以直接通过 CDN 引入最新稳定版：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
HTML 基础结构
在页面中预留一个挂载点，用于渲染 Vue 实例。
代码示例
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>使用 Vue 实现第一个程序</title>
<!-- 引入 Vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 指定 Vue 实例的挂载位置 -->
<div id="app"></div>
<script>
// 第一步：创建 Vue 实例
// 必须使用 `new Vue()`，否则会报错：
// Vue is a constructor and should be called with the `new` keyword
const options = {
// template：用于指定模板字符串，可包含标准 HTML 和 Vue 特有的模板语法
template: '<h1>Hello Vue!</h1>'
};
const app = new Vue(options);
// 第二步：将 Vue 实例挂载到页面元素
// $mount('#app') 会替换 id="app" 的元素内容
app.$mount('#app');
</script>
</body>
</html>代码解析
new Vue(options)
options必须是一个普通的 JavaScript 对象，包含多个“配置项”（key:value）。常用配置项有
el、data、methods、template等，本例只演示了最简单的template。
template 模板
模板可以是纯 HTML，也可以包含 Vue 插值（如
{{ message }}）、指令（如v-for、v-if）等。在真实项目中，一般配合单文件组件（
.vue文件）或构建工具（Webpack、Vite）使用。
挂载实例
app.$mount('#app')等同于在options中设置el: '#app'，将 Vue 实例与 DOM 关联，渲染内容替换挂载点。
小结
核心步骤：引入 Vue →
new Vue({...})→$mount('#app')本文示例简单展示了 Vue 实例的创建与渲染流程。下一步计划：
学习组件化开发
引入
data、methods、生命周期钩子等配置项整合 Spring Boot 后端，完成一个完整的前后端示例项目
- 微信
- 赶快加我聊天吧
- 赶快加我聊天吧
