1. 项目概述纯手工打造的Vue2记事本应用这个案例展示了如何在不依赖Vue CLI脚手架的情况下从零开始构建一个完整的记事本应用。与常见的脚手架项目不同我们采用最基础的HTML文件引入Vue.js的方式通过CDN直接加载Vue2核心库这种原始开发方式特别适合以下场景需要快速验证某个Vue特性的小型demo老项目渐进式引入Vue的过渡阶段对构建工具链不熟悉的初学者入门练习我在2016年首次接触Vue2时就采用这种方式实测发现它能帮助开发者更清晰地理解Vue的核心工作原理。下面这个案例完整还原了当年我的第一个Vue项目包含这些年积累的优化技巧。2. 环境准备与基础搭建2.1 文件结构设计虽然是非脚手架项目但合理的目录结构仍然必要/project-root ├── index.html # 主入口文件 ├── css/ │ └── style.css # 全局样式 ├── js/ │ ├── app.js # Vue实例初始化 │ └── store.js # 简易状态管理 └── data/ # 本地存储数据备份2.2 Vue2的CDN引入在index.html头部添加!-- 开发环境版本 -- script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script !-- 生产环境版本压缩版 script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/script --重要提示Vue2与Vue3的CDN引入方式不同务必确认版本号。我曾因忘记指定版本号导致自动加载了Vue3而出现兼容性问题。3. 核心功能实现详解3.1 数据模型设计在app.js中初始化Vue实例new Vue({ el: #app, data: { notes: JSON.parse(localStorage.getItem(vue-notes)) || [], currentNote: { id: null, title: , content: }, searchText: }, // 其他选项... })这里采用localStorage实现数据持久化是小型应用的经典方案。注意JSON.parse可能抛出异常生产环境需要try-catch包装。3.2 计算属性的妙用computed: { filteredNotes() { return this.notes.filter(note note.title.includes(this.searchText) || note.content.includes(this.searchText) ) }, totalCharacters() { return this.notes.reduce((sum, note) sum note.content.length, 0) } }计算属性是Vue2响应式系统的核心特性之一。相比methods它具有缓存机制只有依赖项变化时才会重新计算。在展示派生数据时性能更优。3.3 事件处理与表单绑定div classeditor input v-modelcurrentNote.title keyup.entersaveNote placeholder输入标题... textarea v-modelcurrentNote.content blurautoSave/textarea button clicksaveNote保存/button /div这里展示了Vue2经典的双向绑定v-model自动同步表单输入与数据模型event监听DOM事件按键修饰符keyup.enter实现回车保存4. 高级功能实现技巧4.1 本地存储优化方案基础版的localStorage直接存储存在性能问题。改进方案methods: { saveToStorage() { // 防抖处理 clearTimeout(this.debounceTimer) this.debounceTimer setTimeout(() { localStorage.setItem(vue-notes, JSON.stringify(this.notes)) }, 500) } }4.2 简易路由实现虽然是非单页应用但可以通过动态组件模拟路由data: { currentView: list }, components: { note-list: ListComponent, note-editor: EditorComponent }component :isnote- currentView/component4.3 响应式样式技巧利用Vue的class绑定实现交互效果div :class{ note-card: true, active: note.id currentNote.id } clickselectNote(note) {{ note.title }} /div.note-card { transition: all 0.3s ease; } .note-card.active { border-left: 3px solid #42b983; }5. 常见问题与解决方案5.1 数据不更新的典型场景问题直接通过索引修改数组项时Vue无法检测变化// 错误做法 this.notes[index].title 新标题 // 正确方案 Vue.set(this.notes, index, {...this.notes[index], title: 新标题})5.2 事件监听的内存泄漏在自定义组件中手动添加的事件监听器需要在beforeDestroy钩子中移除beforeDestroy() { window.removeEventListener(resize, this.handleResize) }5.3 第三方库集成问题当引入jQuery等库时避免直接操作DOM。正确做法mounted() { this.$nextTick(() { $(this.$el).datepicker({ onSelect: (date) { this.currentNote.date date } }) }) }6. 项目优化与扩展方向6.1 性能优化建议虚拟滚动当笔记数量超过100条时实现只渲染可视区域项目差分更新只将修改过的笔记同步到localStorageWeb Worker将搜索/统计等耗时操作放到后台线程6.2 功能扩展思路Markdown支持集成marked.js库标签系统为笔记添加分类功能导出PDF使用jsPDF库实现夜间模式通过CSS变量切换主题6.3 向Vue3迁移的注意事项虽然本项目基于Vue2但可以提前做好迁移准备避免使用将被废弃的API如filters将Options API代码组织成可复用的composition函数替换eventBus为provide/inject这个案例展示了Vue2核心概念的实际应用虽然现在Vue3已成为主流但理解这些基础原理对掌握任何前端框架都至关重要。我在教学过程中发现跳过脚手架直接手写Vue应用的学生往往对响应式原理有更深刻的理解。