基本规则容器和vue语法一一对应不允许多对一和一对多多对一只有第一个容器可以获得代码一对多只有第一个vue语法可以被引用v-bind 超详细讲解Vue2一、核心作用动态绑定 HTML 标签的属性把 Vue 实例中的数据赋值给标签自带属性src、href、title、width、class、style 等 区别不加v-bind引号里是纯文本字符串加v-bind引号里是JS 表达式 / 变量二、语法完整写法v-bind:属性名变量/表达式简写日常必用:属性名变量三、基础示例html预览div idapp !-- 静态写法文字固定不变 -- a hrefhttps://www.baidu.com百度/a !-- v-bind动态绑定href取自data里的url变量 -- a v-bind:hrefurl百度/a !-- 简写 -- a :hrefurl百度/a !-- 图片地址动态绑定 -- img :srcimgSrc alt图片 !-- 鼠标悬浮提示文字 -- p :titletips悬停看看/p /div script new Vue({ el: #app, data() { return { url: https://www.baidu.com, imgSrc: xxx.jpg, tips: 这是提示文字 } } }) /script四、常用场景1. 绑定 class 类名高频方式 1对象语法控制类名显示 / 隐藏:class{ 类名:布尔值 }html预览!-- isActive为true就加active类false就不加 -- div :class{ active: isActive }文字/div方式 2数组语法一次性绑定多个类html预览div :class[cls1, cls2]/div2. 绑定 style 行内样式html预览!-- 对象写法 -- div :style{ color: textColor, fontSize: size px }/div3. 支持简单运算、表达式html预览p :titlename 你好拼接文字/p div :widthnum * 100/div五、易错区分html预览!-- 错误href永远是字符串url不会读取变量 -- a hrefurl/a !-- 正确读取data中的url变量 -- a :hrefurl/a六、总结口诀属性要变加冒号 v-bind 简写最常用 src href class style 全都可用它绑定。v-model 详解Vue2一、核心作用双向数据绑定多用于表单元素输入框、单选、复选框、下拉框数据改变 → 页面表单内容自动更新页面输入内容修改 → 底层数据同步变化原理语法糖 v-bind绑定value属性v-on监听input事件二、基础语法html预览input v-modelmsg等价于完整拆解html预览input :valuemsg inputmsg $event.target.value三、最简单示例html预览div idapp p数据内容{{ msg }}/p !-- 双向绑定 -- input typetext v-modelmsg /div script new Vue({ el:#app, data(){ return { msg: 初始文字 } } }) /script效果输入框打字上方文字实时跟着变。四、各类表单用法1. 单行文本框最常用html预览input v-modelusername2. 多行文本域 textareahtml预览textarea v-modelarticle/textarea3. 单选框 radio绑定同一个变量互斥选择html预览input typeradio v-modelsex value男 男 input typeradio v-modelsex value女 女4. 复选框 checkbox单个复选框布尔值html预览input typecheckbox v-modelagree 同意协议agree 为 true /false多个复选框数组html预览input typecheckbox v-modelhobby value游戏 input typecheckbox v-modelhobby value看书 data(){ return { hobby:[] } }5. 下拉选择框 selecthtml预览select v-modelcity option郑州/option option洛阳/option /select五、v-model 三个修饰符.lazy失去焦点才更新数据不再实时同步input v-model.lazymsg.number自动把输入内容转为数字类型input v-model.numbernum.trim自动去除首尾空格input v-model.trimname六、v-model 和 v-bind 关键区别表格指令特点方向适用场景v-bind / :单向绑定数据 → 页面src、href、class、普通属性v-model双向绑定数据 ↔ 页面表单输入控件七、一句话记住v-bind 只管数据传给页面 v-model 页面输入还能反过来改数据表单专用Vue 条件渲染知识点完整总结一、v-if 系列条件判断渲染1. 三种语法格式!-- 1. 基础判断 -- div v-ifscore 90优秀/div !-- 2. 多重分支 -- div v-else-ifscore 60及格/div !-- 3. 兜底分支无需写表达式 -- div v-else不及格/div核心规则使用要求v-if、v-else-if、v-else必须紧紧挨着中间不能插入其他标签打断结构否则分支失效渲染原理条件为false时DOM 元素直接从页面删除页面源码里找不到该标签条件成立才创建 DOM适用场景元素很少切换显示隐藏、初始化大概率不渲染的场景比如权限弹窗、初次加载才展示的模块弊端频繁切换会反复创建 / 销毁 DOM性能消耗更大隐藏后无法获取 DOM 节点。补充v-if 搭配 template想要批量控制一组标签显示隐藏又不想额外嵌套 div可以用template包裹最终不会生成多余 DOMtemplate v-ifisLogin p用户名/p button退出/button /template二、v-show 显示隐藏基础写法div v-showisShow内容/div核心规则渲染原理无论真假DOM 元素始终存在页面中隐藏只是给元素添加 CSSdisplay: none适用场景需要频繁切换显示 / 隐藏弹窗、下拉菜单、折叠面板优势切换开销小性能更优隐藏状态下依旧可以获取到 DOM 元素。三、v-if 和 v-show 核心区别对照表表格对比维度v-ifv-show隐藏原理DOM 直接销毁移除CSS display:none 隐藏DOM 保留切换性能频繁切换性能差反复创建销毁 DOM频繁切换性能更好初始渲染条件为 false 时初始不渲染 DOM节省初始开销无论条件如何都会初始化渲染 DOMDOM 获取隐藏时无法获取节点始终可以获取 DOM 元素使用场景切换极少、按需加载渲染高频反复显隐四、关键注意事项初始就确定不需要展示、后续几乎不会打开选v-if一会显示一会隐藏、来回切换选v-showv-else前面必须紧跟v-if / v-else-if中间不能有任何内容隔开v-if 是惰性渲染条件不成立不会渲染节点v-show 不存在惰性渲染。简单记忆口诀低频切换用 v-if删 DOM 省初始性能 高频切换 v-show改样式切换更顺滑。Vue v-for 列表遍历 key 原理 完整总结一、v-for 基础用法1. 作用专门用来循环渲染列表数据数组、对象、字符串、数字批量生成 DOM 元素。2. 标准语法in也可以为of!-- 完整格式(元素项, 下标索引) in 数据源 -- li v-for(item, index) in list :key唯一标识 {{index}} - {{item}} /liitem遍历出来的每一项数据index当前项的下标从 0 开始:key必须绑定Vue 强制要求3. 四种遍历场景1遍历数组最常用data: { persons: [ {id:1,name:张三}, {id:2,name:李四} ] }li v-for(p,index) in persons :keyp.id {{index}}{{p.name}} /li2遍历对象格式(值, 键名, 下标) in 对象div v-for(val,key,i) in user :keykey {{key}}{{val}} /div3遍历字符串极少使用逐个取出字符span v-forchar in hello :keychar{{char}}/span4遍历指定数字次数极少循环 n 次p v-forn in 5 :keyn第{{n}}条/p二、key 的核心作用面试高频考点1. 本质key 是虚拟 DOM 的唯一身份标识Vue 更新流程数据改变 → 生成新虚拟 DOM 树新旧虚拟 DOM 进行diff 算法对比根据 key 匹配节点判断复用 / 新建 DOM最小化 DOM 操作提升渲染性能2. diff 对比规则新旧虚拟 DOM 找到了相同 key节点内容没变直接复用原来的真实 DOM无需重新渲染节点内容改变生成新 DOM替换旧 DOM旧 DOM 找不到对应 key直接创建全新 DOM 渲染页面三、用 index 当做 key 的隐患重点问题 1列表逆序操作头部添加、删除、倒序→ 效率低下示例数组头部新增数据index 会全部重新排序原本下标 0、1、2新增后全部往后顺延diff 算法认为所有节点都发生变化不会复用 DOM全部重新渲染产生多余开销问题 2列表带有输入框、表单类 DOM → 页面内容错乱输入框的值会跟着下标错乱出现内容匹配错误下标错位绑定了旧 DOM界面看着正常但内部 DOM 复用逻辑出错四、开发中 key 最佳选择首选数据自带唯一 IDid、学号、手机号、身份证等全局唯一值 最稳妥规避顺序错乱、DOM 复用错误问题仅纯展示列表不会做倒序、头部增删操作临时用 index 没问题绝对禁止随机数当做 key每次渲染 key 都变化无法复用 DOM性能极差用index作为key是不能打乱原来的顺序不写key默认遍历时index作为key五、补充注意事项v-for 优先级高于 v-if不要同一标签同时写 v-for v-if性能很差 优化方案外层用v-for内层子标签写v-if想要循环一组标签不渲染多余 div用template v-for包裹key 必须唯一不能重复。精简背诵版面试速记key 是虚拟 DOM 标识diff 算法依靠 key 对比新旧节点实现 DOM 复用 index 作 key列表倒序增删效率低带输入框会内容错乱 优先用唯一 id 作为 key纯静态展示列表可使用 index。Vue2 中 el 与 data 的两种标准写法完整对比一、el 挂载容器2 种写法写法 1配置项直接写 el最常用、简洁创建实例时直接通过el指定挂载 DOM 容器js运行new Vue({ el: #root, // 选择器字符串id/class/标签选择器都可以 data() { return { msg: 测试文字 } } })特点页面加载完毕后自动挂载无需额外代码适合固定挂载、简单页面日常开发首选写法 2实例.$mount () 手动挂载不写 el 配置项创建实例后调用方法手动挂载js运行const vm new Vue({ data() { return { msg: 测试文字 } } }) // 手动指定挂载节点 vm.$mount(#root)适用场景需要延迟挂载等待接口请求、异步逻辑完成后再渲染页面动态切换挂载容器组件化开发中更灵活等价关系el: #root完全等同于$mount(#root)二、data 数据2 种写法重中之重必须区分场景写法 1对象写法data: { ... }js运行new Vue({ el: #root, // 纯对象形式 data: { name: 尚硅谷, age: 20 } })✅适用范围仅根 Vue 实例new Vue ()❌禁止用在组件中多个组件实例会共用同一份对象数据修改一处全部同步污染写法 2函数返回对象data() { return {} }推荐通用写法js运行new Vue({ el: #root, // 函数形式每次调用返回全新独立对象 data() { return { name: 尚硅谷, age: 20 } } })适用范围根实例可以用所有 Vue 组件必须强制使用这种写法原理每次创建组件都会执行函数生成一份全新的数据对象各个组件数据相互隔离、互不干扰不会出现数据串改问题。三、整合对照完整示例组合 1el 简写 data 对象根实例简易版js运行new Vue({ el: #root, data: { msg: hello vue } })组合 2$mount 挂载 data 函数通用标准写法js运行const vm new Vue({ data() { return { msg: hello vue } } }) vm.$mount(#root)四、核心总结口诀el 两种直接写 el 自动挂载$mount 手动延迟挂载data 两种根实例可用对象组件一律函数返回对象。data 为什么不能写成箭头函数Vue21、错误写法绝对禁止js运行new Vue({ el: #root, // 箭头函数 ❌ 错误 data: () ({ name: 尚硅谷 }) })2、核心原因this 指向彻底错乱普通函数写法正确js运行data() { console.log(this) // this Vue实例(vm) return { msg: this.xxx } }普通函数的this由调用方决定Vue 内部调用 data 函数时会把this绑定为当前 Vue 实例你可以在 data 内部通过this访问实例属性、方法箭头函数特性不绑定自身 this继承外层上下文箭头函数没有独立 this会沿用定义时外层全局 thiswindowjs运行data: () { console.log(this) // 指向 window不再是Vue实例 return {} }带来两大问题无法通过this访问 Vue 实例拿不到实例内的数据、方法组件复用场景下箭头函数不会每次生成独立数据对象会出现数据共用、互相污染Vue 内部依赖 this 做响应式初始化this 错乱会直接导致响应式失效。3、补充细节根实例看似偶尔能用但依旧不推荐根实例只用一次不会复用组件箭头函数暂时不会立刻报错但一旦你需要在 data 里使用this取值直接失效规范层面统一根实例、组件全部使用普通函数写法标准正确格式js运行// 标准写法 data() { return { name: 尚硅谷 } }一句话总结箭头函数锁死外层 thisVue 需要把 this 绑定为自身实例二者冲突所以 data 不能用箭头函数。计算属性不可以添加异步任务比如定时器定时器写在watch里时写成箭头函数由js引擎调用没有自己的指向向外找到watch函数指向vmVue 事件监听、watch、computed 全套知识点总结一、DOM 事件绑定click 事件指令1. 基础写法Vue 使用事件名绑定 DOM 事件等价于v-on:!-- 方式1调用methods里的函数推荐逻辑复杂首选 -- button clickchangeWeather切换天气/button !-- 方式2直接写简单JS表达式仅限一行极简逻辑 -- button clickisHot !isHot切换天气/button2. 核心规则简短布尔切换、简单运算可直接写在行内多行逻辑、需要传参、重复调用的代码一律放进methodsmethods 内函数默认 this 指向 Vue 实例 vm可直接操作 data 数据。3. 常用拓展传参clickfn(参数)事件修饰符.stop阻止冒泡、.prevent阻止默认行为等二、监视属性 watch数据监听核心定义监听 data 中已存在的数据数据一旦发生变化回调函数自动执行适合数据变动后需要执行异步请求、定时器、复杂操作的场景。必备前提被监视的属性必须预先在 data 中声明否则无法监听。两种写法写法 1创建 Vue 实例时配置最常用new Vue({ el: #root, data: { isHot: true }, watch: { // 监听单一基础数据 isHot(newVal, oldVal) { // newVal变化后的值 oldVal变化前的值 console.log(天气切换了, newVal) } } })写法 2实例后期调用 $watch 添加监听适合页面运行过程中动态新增监听vm.$watch(isHot, (newVal) { console.log(天气变动) })深度监视 deep:truewatch默认只监听 data 第一层属性对象 / 数组内部属性修改不会触发监听data: { info: { temperature: 30 } }开启深度监听才能监测对象内部数据变化watch: { info: { handler(newVal) { console.log(温度改变) }, deep: true // 开启深度监视穿透监测对象多层属性 } }补充Vue 本身能响应对象内部数据变化只是 watch 默认关闭深层监听。三、computed 计算属性 vs watch 监听属性 核心区别表格对比项computed 计算属性watch 监视属性核心用途依靠已有数据计算出新数据侧重取值计算数据变化后触发动作侧重行为处理缓存机制有缓存依赖数据不变就不会重复计算性能更好无缓存数据每次变动都会执行回调异步支持不支持异步定时器、请求都不能写支持异步操作请求、延时任务首选使用场景数值换算、文字拼接、状态计算数据变动后发请求、定时器、复杂多步骤逻辑返回值必须 return 计算结果无需 return只执行逻辑一句话记忆要算东西用 computed要做事、异步操作用 watch。四、Vue 中 this 指向硬性规范必考Vue 管理的函数methods、computed、watch 的 handler 统一写普通 function 函数this 指向 Vue 实例 vm 禁止箭头函数箭头函数会丢失正确 this。// 正确 methods: { fn() { this.isHot !this.isHot } }非 Vue 管理的回调定时器、ajax、Promise 回调 统一写箭头函数锁住外层 this依旧指向 Vue 实例watch: { isHot(newVal) { setTimeout((){ console.log(this) // this依旧是vm实例 },1000) } }五、整体使用选择总结按钮点击切换简单状态行内表达式 /methods 均可根据数据自动算出文本、数值优先 computed数据变动要发起请求、延时操作、复杂异步逻辑优先 watch监听嵌套对象内部数据watch 配置 deep:true。Vue 动态样式绑定完整总结Vue 通过:v-bind实现动态绑定 class、行内 style 样式区别于静态class可以根据 data 数据自动切换样式一共两大类写法动态 class 绑定、动态 style 绑定。一、动态绑定 class 类样式最常用语法:class值会和元素原有静态 class 自动合并不会覆盖1. 字符串写法div classbasic :classmood内容/div适用场景只有一个样式类名类名不确定、需要随时切换原理data 里 mood 存储类名字符串修改 mood 值就切换样式示例逻辑点击随机切换happy / sad / normal三种心情样式2. 数组写法div classbasic :classclassArr内容/div适用场景需要同时挂载多个固定样式名批量启用一组样式规则数组内所有类名都会全部生效classArr:[atguigu1,atguigu2,atguigu3] // 最终渲染classbasic atguigu1 atguigu2 atguigu3想要临时移除某个样式直接修改数组删减元素即可。3. 对象写法高频重点div classbasic :classclassObj内容/div适用场景样式名称、数量提前确定动态控制启用 / 关闭某几个样式语法规则{样式名: 布尔值}布尔值为 true启用该样式false移除样式classObj:{ atguigu1:false, atguigu2:false }修改对象里布尔值就能一键开关对应样式。二、动态绑定 style 行内样式语法:style值直接绑定 css 行内样式css 属性名要改成小驼峰写法backgroundColor、fontSize1. 对象写法最常用div classbasic :stylestyleObj内容/divstyleObj:{ fontSize: 40px, color:red }适合单个区域设置一套行内样式数值可动态修改2. 数组写法div classbasic :stylestyleArr内容/divstyleArr:[ {fontSize: 40px,color:blue}, {backgroundColor:gray} ]适用场景合并多套样式对象数组内所有样式会叠加生效。三、核心区分对照表表格绑定方式写法形式使用场景class 字符串:class变量单个样式来回切换class 数组:class数组批量套用多个固定样式class 对象:class对象按需开关指定样式style 对象:style样式对象设置一套行内样式style 数组:style[对象1,对象2]叠加多套行内样式四、关键注意事项静态 classclassbasic和动态:class会合并共存不会互相覆盖css 原生短横线属性要转为小驼峰font-size→fontSize、background-color→backgroundColorstyle 属性值需要带单位px/%建议统一写字符串格式所有绑定数据都存放在 data 中修改 data 页面样式会自动响应更新。