一、认识 Vue1. 什么是 VueVue 是一套渐进式 JavaScript 框架用于构建用户界面。渐进式按需使用可以只用来替换页面局部也可以搭建完整大型项目。优点上手简单、双向绑定、虚拟 DOM、生态完善核心思想数据驱动视图修改数据自动更新页面无需手动操作 DOM2. Vue3 快速入门 HelloVue使用步骤通过 script 引入 Vue3 官方模块使用createApp()创建 Vue 应用实例使用mount()绑定页面容器div在 data 中定义数据通过插值表达式{{ }}渲染页面基础示例代码div idapp h1{{ message }}/h1 p{{ count }}/p /div script typemodule import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ data(){ return { message: Hello Vue, count: 100 } } }).mount(#app) /script插值表达式{{ }}只能写在标签内容中不能直接写在标签属性上二、Vue 核心常用指令指令HTML 标签上以v-开头的特殊属性拓展标签功能。指令作用v-for列表循环渲染数组 / 对象v-bind动态绑定标签属性简写:v-if / v-else-if / v-else条件渲染控制元素创建销毁v-show控制元素显示隐藏css 切换v-model表单双向数据绑定v-on绑定页面事件简写1. v-for 列表渲染作用遍历数组批量生成页面元素 语法tr v-for(item, index) in empList :keyitem.iditem遍历得到的数组元素index下标索引可选:key必填推荐使用唯一 id提升渲染性能不要直接使用 index⚠️ 注意遍历的数据必须在 data 中定义2. v-bind 属性绑定作用动态给 HTML 标签绑定属性src、href、class、style 等 简写:!-- 完整写法 -- img v-bind:srcitem.image !-- 简写 -- img :srcitem.image重点坑点标签属性上不能直接写插值表达式必须使用 v-bind3. v-if vs v-show显示隐藏v-if条件成立创建 DOM 元素条件不成立直接移除 DOM 适合元素很少切换、一次性显示 / 隐藏场景 支持配套v-else-if、v-elsev-show无论条件真假DOM 始终存在通过display:none控制显示隐藏 适合频繁切换显示隐藏的场景核心区别总结v-if操作 DOM 树切换开销大v-show仅操作 CSS 样式切换开销小4. v-model 双向绑定作用表单元素双向数据绑定快速获取 / 修改表单输入内容 仅适用于input、select、textarea 等表单标签input v-modelsearchName placeholder请输入名称单向绑定数据→页面双向绑定数据↔页面页面修改自动同步变量5. v-on 事件绑定作用给 HTML 标签绑定点击、输入等事件 简写!--完整写法 -- button v-on:clicksearchFunc搜索/button !--简写 -- button clicksearchFunc搜索/button三、Axios 网络请求1. 什么是 Ajax AxiosAjax异步 JavaScript 和 XML实现页面不刷新与服务器交换数据、局部更新页面Axios基于 Ajax 封装的网络请求库Vue 项目首选用来调用后端接口2. Axios 基础使用引入 Axiosaxios.get()/axios.post()发送请求.then()接收成功响应.catch()捕获异常基础示例axios.get(/api/emp/list).then(res{ console.log(res.data) }).catch(err{ console.log(请求失败,err) })四、综合实战员工列表案例整合指令实现功能v-for 渲染员工表格列表v-bind 绑定头像、属性v-if 做职位条件展示v-model 绑定搜索框v-on 绑定搜索按钮点击事件Axios 加载后端员工数据五、开发避坑总结{{ }}插值表达式只能写标签内部属性上必须用 v-bindv-for 务必添加 key优先使用唯一 id不要滥用 index频繁切换显示隐藏优先 v-show极少切换使用 v-ifv-model只能用于表单标签普通 div、span 无法使用Vue 实例挂载容器只会渲染容器内部元素不要挂载 body/htmlAxios 属于异步代码不要直接同步获取请求结果六、文末总结Vue3 核心基础就是数据驱动视图不用频繁操作 DOM。 掌握六大基础指令后结合 Axios 发起后端请求就能完成绝大多数前端页面开发是学习 Vue 项目开发的必备基础。
一、认识 Vue1. 什么是 VueVue 是一套渐进式 JavaScript 框架用于构建用户界面。渐进式按需使用可以只用来替换页面局部也可以搭建完整大型项目。优点上手简单、双向绑定、虚拟 DOM、生态完善核心思想数据驱动视图修改数据自动更新页面无需手动操作 DOM2. Vue3 快速入门 HelloVue使用步骤通过 script 引入 Vue3 官方模块使用createApp()创建 Vue 应用实例使用mount()绑定页面容器div在 data 中定义数据通过插值表达式{{ }}渲染页面基础示例代码div idapp h1{{ message }}/h1 p{{ count }}/p /div script typemodule import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ data(){ return { message: Hello Vue, count: 100 } } }).mount(#app) /script插值表达式{{ }}只能写在标签内容中不能直接写在标签属性上二、Vue 核心常用指令指令HTML 标签上以v-开头的特殊属性拓展标签功能。指令作用v-for列表循环渲染数组 / 对象v-bind动态绑定标签属性简写:v-if / v-else-if / v-else条件渲染控制元素创建销毁v-show控制元素显示隐藏css 切换v-model表单双向数据绑定v-on绑定页面事件简写1. v-for 列表渲染作用遍历数组批量生成页面元素 语法tr v-for(item, index) in empList :keyitem.iditem遍历得到的数组元素index下标索引可选:key必填推荐使用唯一 id提升渲染性能不要直接使用 index⚠️ 注意遍历的数据必须在 data 中定义2. v-bind 属性绑定作用动态给 HTML 标签绑定属性src、href、class、style 等 简写:!-- 完整写法 -- img v-bind:srcitem.image !-- 简写 -- img :srcitem.image重点坑点标签属性上不能直接写插值表达式必须使用 v-bind3. v-if vs v-show显示隐藏v-if条件成立创建 DOM 元素条件不成立直接移除 DOM 适合元素很少切换、一次性显示 / 隐藏场景 支持配套v-else-if、v-elsev-show无论条件真假DOM 始终存在通过display:none控制显示隐藏 适合频繁切换显示隐藏的场景核心区别总结v-if操作 DOM 树切换开销大v-show仅操作 CSS 样式切换开销小4. v-model 双向绑定作用表单元素双向数据绑定快速获取 / 修改表单输入内容 仅适用于input、select、textarea 等表单标签input v-modelsearchName placeholder请输入名称单向绑定数据→页面双向绑定数据↔页面页面修改自动同步变量5. v-on 事件绑定作用给 HTML 标签绑定点击、输入等事件 简写!--完整写法 -- button v-on:clicksearchFunc搜索/button !--简写 -- button clicksearchFunc搜索/button三、Axios 网络请求1. 什么是 Ajax AxiosAjax异步 JavaScript 和 XML实现页面不刷新与服务器交换数据、局部更新页面Axios基于 Ajax 封装的网络请求库Vue 项目首选用来调用后端接口2. Axios 基础使用引入 Axiosaxios.get()/axios.post()发送请求.then()接收成功响应.catch()捕获异常基础示例axios.get(/api/emp/list).then(res{ console.log(res.data) }).catch(err{ console.log(请求失败,err) })四、综合实战员工列表案例整合指令实现功能v-for 渲染员工表格列表v-bind 绑定头像、属性v-if 做职位条件展示v-model 绑定搜索框v-on 绑定搜索按钮点击事件Axios 加载后端员工数据五、开发避坑总结{{ }}插值表达式只能写标签内部属性上必须用 v-bindv-for 务必添加 key优先使用唯一 id不要滥用 index频繁切换显示隐藏优先 v-show极少切换使用 v-ifv-model只能用于表单标签普通 div、span 无法使用Vue 实例挂载容器只会渲染容器内部元素不要挂载 body/htmlAxios 属于异步代码不要直接同步获取请求结果六、文末总结Vue3 核心基础就是数据驱动视图不用频繁操作 DOM。 掌握六大基础指令后结合 Axios 发起后端请求就能完成绝大多数前端页面开发是学习 Vue 项目开发的必备基础。
