Yang's Blog

Vuex 状态管理与项目实战Vuex 是 Vue 的状态管理库，集中管理多个组件共享的数据，解决”跨组件传值太麻烦”的问题。 这一篇讲 Vuex 的五个核心概念、模块化、辅助函数，以及项目实战中的 axios 封装、api 模块化、移动端 vant、mixins 等工程化要点。 Java 对照：Vuex ≈ 一个”全局共享的内存数据容器”，类似后端的单例 Service + 缓存；mutations 像”同步 setter”，actions 像”异步业务方法”。 一、为什么需要 Vuex 多组件共享同一份状态（如登录用户、购物车），用 props/$emit 层层传递太繁琐。 Vuex 把共享状态集中到一个 store，任何组件都能访问和修改。 二、Vuex 五个核心概念 概念 作用 特点 state 数据源（共享数据） 只读 getters 派生数据（类似 computed） 有缓存 mutations 修改 state 的唯一途径 必须同步 actions 处理异步，再提交 mutation 可异步 modules 模块化拆分 s...

vue-router 路由路由是 SPA（单页应用）的核心：根据 URL 的变化，切换显示不同的组件，页面不刷新。 这一篇讲 vue-router 的基本使用、路由高亮、导航传参、重定向与 404、路由模式、编程式导航。 Java 对照：路由 ≈ 后端 Controller 的 URL 映射（@RequestMapping），但作用在前端，切换的是组件而不是后端接口。 一、路由基本使用（5+2 步骤）安装：npm install vue-router@3（Vue2 用 3.x）。 1234567891011121314151617181920// main.jsimport Vue from "vue";import VueRouter from "vue-router";import App from "./App.vue";import Find from "./views/Find.vue";import My from "./views/My.vue";Vue.us...

组件化开发组件是 Vue 最重要的概念——把页面拆成一块块**可复用的”积木”**，每个组件有自己的模板、数据、样式和逻辑。 这一篇讲组件的基础（注册、scoped、data 函数）和进阶（组件通信、v-model 原理、$refs、插槽、自定义指令）。其中组件通信是 Vue 的绝对重点。 Java 对照：组件 ≈ 一个”封装了 UI + 逻辑的类”，props 类似构造参数（只读传入），$emit 类似回调通知父组件。 一、组件基础1. 单文件组件 .vue 三段式123456789101112131415<template> <div class="box">{{ msg }}</div></template><script>export default { data() { return { msg: "hello" }; }};</script>...

Vue 基础与核心Vue 是渐进式 JS 框架，核心思想是数据驱动视图（MVVM）：你只管改数据，视图自动更新，不用再手动操作 DOM。 这一篇讲 Vue 的基础与核心：实例、插值、响应式原理、指令、修饰符、class/style 绑定、计算属性、侦听器、生命周期。 Java 对照：传统方式（含 jQuery）是”手动查 DOM、改 DOM”；Vue 是”改数据、框架帮你改 DOM”。这是理解 Vue 最重要的思维转变。 一、MVVM 思想1Model（数据 data） ⇄ ViewModel（Vue 实例） ⇄ View（模板 DOM） Model：数据（data） View：页面模板（HTML） ViewModel：Vue 实例，负责双向绑定——数据变了自动更新视图，视图输入自动更新数据。 二、创建 Vue 实例与插值12345678910<div id="app">{{ message }}</div><script src="vue.js"...

前端工程化前端工程化 = 用工具把”源代码”（.vue 组件、ES Module、TS、SCSS 等）转换成浏览器能直接运行的、优化后的产物。 它的核心三件套是：模块化（ES Module）+ 包管理（npm）+ 构建工具（Vite）。对 Java 程序员来说，这套东西就相当于 Maven/Gradle 的角色——管理依赖、编译打包、提供构建流程。 一、为什么需要工程化 问题 例子 工程化解决 模块化 import a from "./a.js" 把多个模块打包合并 转译 .vue 文件、TypeScript、SCSS 编译成浏览器认识的 HTML/CSS/JS 依赖管理 用了 Vue、axios 等库 npm 统一安装管理 优化 未使用代码、大文件 压缩、tree-shaking 二、模块化 ES Module（重点）1. 导出 export1234// utils.jsexport default function add(a, b) { return a + b; }...

AJAXAJAX（Asynchronous JavaScript And XML）的核心思想：浏览器用 JS 异步地发 HTTP 请求，拿到数据后局部更新页面，不刷新整页。 这一篇完整覆盖 AJAX 的整套知识：Promise（异步基础）→ XMLHttpRequest（经典实现）→ fetch（现代原生）→ async/await（优雅写法）→ axios（最常用库）。 Java 对照：axios ≈ 后端的 RestTemplate / OkHttp / HttpClient；Promise ≈ CompletableFuture。 一、AJAX 概述1. 为什么需要异步12345678910// 同步（阻塞）：请求期间页面卡死console.log("1");同步请求(); // 假设要等 3 秒console.log("2");// 异步（不阻塞）console.log("1");异步请求(() => console.log("2")); ...

进阶知识点补充这一篇是收尾的进阶补充，把之前零散或没深入的知识点集中讲透：原型与原型链、深浅拷贝、防抖/节流、Symbol、迭代器与生成器，以及严格模式、柯里化、类型判断、逻辑赋值运算符、Proxy 等。 一、原型与原型链（深入）1. 核心关系（基础回顾）123456789function Person(name) { this.name = name;}Person.prototype.say = function () { console.log(this.name);};const p = new Person("Tom");p.say(); // "Tom" 三条关键等式（原型链的本质）： 123p.__proto__ === Person.prototype; // true（实例 → 原型对象）Person.prototype.__proto__ === Object.prototype; // true（原型对象 → Obje...

BOMBOM（Browser Object Model，浏览器对象模型）是浏览器提供的、用来操作浏览器本身的对象集合，window 是它的顶层对象。 这一篇讲 BOM 的重要对象：window、location、history、navigator、screen，以及本地存储 localStorage / sessionStorage（重点）。 一、window 对象window 是全局对象，所有全局变量和全局函数都是 window 的属性和方法。 123var name = "Tom";console.log(window.name); // "Tom"（全局变量挂在 window 上）console.log(window === window.window); // true 1. 常用方法1234567alert("提示框"); // 弹窗提示confirm("确定吗？"); // 确认框，返回 true / falseprompt("请输入&qu...

事件事件是用户与页面交互的桥梁：点击、输入、滚动、按键都会触发事件，JS 通过监听事件来响应用户操作。 这一篇讲事件的注册与解绑、事件类型、事件对象、事件流（冒泡/捕获）、事件委托。其中事件流和事件委托是重点，也是 JS 与 Java GUI（如 Swing 的监听器）最大的差异。 一、注册与解绑事件1. 三种注册方式12<!-- 方式一：HTML 属性（不推荐，结构和逻辑混在一起） --><button onclick="alert('hi')">按钮</button> 12345678910// 方式二：DOM 属性（同一事件只能绑一个，后写覆盖前写）btn.onclick = function () { console.log("点击"); };// 方式三：addEventListener（推荐，可绑多个，按顺序执行）btn.addEventListener("click", function () { con...

DOM 基础与节点操作DOM（Document Object Model，文档对象模型）是浏览器把 HTML 解析成的一棵节点树，JS 通过 document 对象操作这棵树，就能动态改变页面内容。 这一篇把 DOM 的基础操作合并讲完：获取元素、操作内容、操作属性与样式、节点关系、增删节点、表单操作。这是 DOM 的地基，后面所有交互都建立在它之上。 一、DOM 概念123456<!DOCTYPE html><html><body> <div id="box">hello</div></body></html> 浏览器会把它解析成一棵节点树：document → html → body → div，每个标签都是一个”节点（元素节点）”。 二、获取元素12345678910// 1. 按 id（返回单个元素，不存在返回 null）document.getElementById("box");// 2. 按标签名 / 类名（返回动态 HTMLColle...