Vue3 入门基础一、什么是VueVue 是一款用于构建用户界面的渐进式 JavaScript 框架。官网https://cn.vuejs.org/Vue 不只是框架同时是一套完整生态。Vue核心思想数据驱动视图我们只需要维护数据页面自动跟随数据变化更新不需要手动操作DOM。二、Vue3快速入门 HelloVue案例完整代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleVue快速入门/title/headbody!-- 准备被Vue控制的容器 --dividapp!-- 插值表达式 {{ }} 渲染数据 --h1{{ message }}/h1/div!-- typemodule ES模块方式引入Vue3 --scripttypemodule// 引入createApp工厂函数import{createApp}fromhttps://unpkg.com/vue3/dist/vue.esm-browser.js;// 创建vue实例并挂载到#app容器createApp({// 提供数据data(){return{message:Hello Vue}}}).mount(#app);/script/body/html步骤拆解引入Vue模块官方CDN准备DOM容器div#appVue只会控制容器内部内容创建Vue应用实例通过data()提供数据.mount(#app)挂载容器建立关联插值表达式{{ 变量名 }}将数据渲染到页面三、Vue常用指令大全指令HTML标签上带有v-前缀的特殊属性用来拓展标签功能。通用格式标签 v-xxx表达式/标签1. v-for 列表渲染作用遍历数组/对象批量生成重复元素语法v-for(item, index) in 数组 :key唯一值item遍历得到的每一项index下标索引可选可省略:key给元素绑定唯一标识Vue虚拟DOMdiff优化优先使用id不推荐index完整示例!DOCTYPEhtmlhtmllangzh-CNbodydividappul!-- 遍历数组 --liv-for(item,index) in list:keyshturl.{{ index }} - {{ item.name }}/li/ul/divscripttypemoduleimport{createApp}fromhttps://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({data(){return{list:[{id:1,name:Vue基础},{id:2,name:v-for指令},{id:3,name:常用指令}]}}}).mount(#app)/script/body/html⚠️注意v-for写在需要重复生成的标签上遍历的数据必须在data内定义。2. v-bind 属性绑定作用动态给HTML标签绑定属性值src、href、class、style等完整写法v-bind:属性名变量简写语法:属性名变量日常开发最常用完整示例!DOCTYPEhtmlhtmllangzh-CNbodydividapp!-- 完整写法 --av-bind:hrefurl完整写法链接/abr!-- 简写推荐 --a:hrefurl简写链接/abrimg:srcimgSrcwidth100/divscripttypemoduleimport{createApp}fromhttps://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({data(){return{url:https://cn.vuejs.org/,imgSrc:https://cn.vuejs.org/logo.svg}}}).mount(#app)/script/body/html重点属性动态赋值不能直接写插值表达式必须使用v-bind / :3. v-if / v-else-if / v-else 条件渲染作用根据条件创建/销毁DOM元素条件为true渲染元素条件false直接从页面移除标签4. v-show 条件显示作用控制元素显示隐藏元素始终存在页面底层原理切换CSSdisplay:nonev-if vs v-show 核心区别面试高频v-if条件不成立元素不会被渲染到页面DOM树切换时会频繁创建销毁DOM✅适合元素很少切换显示隐藏的场景v-show无论真假DOM一开始就渲染只是切换css display样式✅适合频繁切换显示/隐藏场景对比示例!DOCTYPEhtmlhtmllangzh-CNbodydividapph3v-if演示/h3pv-ifflag我是v-if控制的内容/ph3v-show演示/h3pv-showflag我是v-show控制的内容/p/divscripttypemoduleimport{createApp}fromhttps://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({data(){return{flag:false}}}).mount(#app)/script/body/html打开浏览器开发者工具Elements面板可以直观看到两者差异。5. v-model 双向数据绑定作用表单元素(input、select、textarea)实现双向绑定数据 ↔ 输入框内容互相同步示例dividappinputv-modelusernameplaceholder请输入姓名p你输入的内容{{ username }}/p/divscripttypemoduleimport{createApp}fromhttps://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({data(){return{username:}}}).mount(#app)/script6. v-on 事件绑定作用给标签绑定点击、键盘等事件完整写法v-on:事件名处理函数简写语法事件名处理函数buttonv-on:clickhandleClick点击/button!-- 简写 --buttonclickhandleClick点击/button四、Ajax1. 定义Ajax Asynchronous JavaScript And XML异步JavaScript和XML。现在传输数据主流使用JSONXML是早期数据格式。2. 核心作用数据交换浏览器向服务器发请求、接收服务端返回数据异步交互不用刷新整个网页局部更新页面。✅ 案例百度搜索联想、注册时用户名实时校验。3. 同步 vs 异步同步发送请求 → 页面阻塞等待服务器返回结果等待期间不能操作页面服务器响应结束后才能继续执行代码。异步发送请求后页面不会阻塞可以继续操作网页等服务器数据返回后自动执行回调处理数据。Ajax本质就是异步网络请求。五、Axios1. 介绍Axios是对原生Ajax的封装库简化异步请求代码开发更方便。2. 基础使用步骤在页面引入axios的js文件scriptsrchttps://unpkg.com/axios/dist/axios.min.js/script发送请求接收响应写法1基础通用写法axios({method:GET,// 请求方式 GET / POSTurl:请求地址// paramsget请求url参数// datapost请求请求体数据}).then(result{// 请求成功 result.data 拿到后端数据}).catch(err{// 请求失败处理})写法2推荐【请求别名简写】// GET请求axios.get(url地址).then(res{}).catch(err{})// POST请求axios.post(url地址,请求参数).then(res{}).catch(err{})六、async await作用简化异步代码把基于then回调的异步代码写成看起来像同步代码的形式可读性更高。语法规则async修饰函数标记这是异步函数await只能写在async函数内部用来等待异步请求执行完成拿到返回结果替代.then()写法。示例asyncsearch(){// 等待axios请求完成接收返回结果letresultawaitaxios.get(xxx地址);console.log(result.data);}重点注意await不能单独在全局使用必须包裹在async函数里面七、Vue 生命周期1. 概念生命周期Vue组件从创建 → 渲染 → 更新 → 销毁完整全过程。生命周期钩子组件运行到对应阶段时Vue自动调用执行的函数。2. 8个生命周期钩子Options API钩子函数阶段常用场景说明beforeCreate创建前组件刚初始化拿不到data数据极少使用created创建后data数据已初始化可以访问数据最早可以发ajax请求的钩子beforeMount载入前模板编译完成DOM还没渲染到页面mounted挂载完成✅最常用DOM已经渲染完毕可以操作页面DOM、发起初始Ajax请求beforeUpdate更新前数据变化后页面DOM重新渲染之前触发updated更新后DOM更新渲染完成之后触发beforeUnmount销毁前组件销毁之前执行可以清理定时器、监听事件unmounted销毁后组件完全销毁资源释放完成