组件实现应用中局部功能代码和资源的集合data写成函数式浅拷贝其中一组发生变化后另一个不变Vue2 组件基础 组件嵌套 代码笔记梳理你贴了两段原生 Vue2非脚手架代码第一段组件的定义、全局注册、局部注册、组件使用第二段组件嵌套组件内部注册子组件一、组件三大步骤第一段代码核心定义组件Vue.extend(配置对象)⚠️组件配置对象和new Vue()区别两点不要写el由 Vue 实例 vm 的el决定挂载哪个容器data必须是函数data(){ return {} }防止多个组件实例共用一份对象引用改一个全部都变template写组件 HTML 结构只能一个根容器包裹const school Vue.extend({ template:div.../div, data(){ return { schoolName:尚硅谷 } }, methods:{} }) //简写可以省略Vue.extend直接写对象 const school { template:div.../div, data(){return{}} }注册组件✅全局注册Vue.component(组件标签名,组件对象)所有 vm 实例都可以直接用Vue.component(hello, hello)✅局部注册在 new Vue 的components配置里注册仅当前 vm 容器可用new Vue({ el:#root, components:{ xuexiao: school, //key页面写的标签名value组件对象 xuesheng: student } })使用组件页面写标签xuexiao/xuexiao注意无脚手架环境不要自闭合xuexiao/会导致后面 DOM 渲染失效必须成对闭合。组件名规则单个单词school/School多单词短横线命名my‑school原生浏览器直接可用大驼峰MySchool只能脚手架环境使用原生 html 不识别不要和原生 html 重名比如div、h1name配置给 vue 开发者工具显示组件名字不影响页面标签使用二、组件嵌套第二段代码核心子组件在父组件的 components 中局部注册父组件 template 中直接写子组件标签执行顺序定义 student 子组件定义 school 父组件在它内部components:{student}注册子组件template 写student/studentapp 组件引入 school、hello 组件Vue 实例 vm不写大量标签直接用template:app/app挂载#rootconst school Vue.extend({ template: div h2学校{{name}}/h2 student/student !-- 使用子组件 -- /div , components:{ student } //在父组件内部注册子组件 })整体层级关系vm(Vue实例) └── app组件 ├─ hello组件 └─ school组件 └─ student组件重要组件只能在注册它的那个组件 template 内部使用student 只在 school 里面注册app 和 vm 中不能直接写student/student。三、两段代码易错点总结组件data必须函数不要写成对象data:{}复用组件数据会互相污染template 模板只能一个根 div不能并列多个根标签原生浏览器环境组件标签必须成对xxx/xxx不要自闭合xxx/全局注册全部可用局部注册只在当前组件生效嵌套子组件写在父组件components不是写在最外层 vm谁要用谁注册。补充小区别vmnew Vue根 Vue 实例唯一负责挂载页面普通组件不能直接挂载必须被别的组件 /vm 调用VueComponent 核心知识点Vue.extend()返回的不是普通对象是VueComponent 构造函数。vmnew Vue()得到Vue 实例vc组件实例new VueComponent()得到Vue 内部自动帮我们 new不用手动写1. 关键要点const school Vue.extend(options)→school就是VueComponent 构造函数不是实例。 页面写school/schoolVue 底层自动执行new school()生成组件实例 vc。每一次Vue.extend()都会生成一个全新独立的 VueComponent 构造函数const school Vue.extend({...}) const hello Vue.extend({...}) // school 和 hello 是两个完全不同的构造函数互不干扰this 指向高频考点✅组件内 data /methods/computed /watch 里面的 this → vc组件实例 VueComponentmethods:{ showName(){ console.log(this) // vc 组件实例对象 } }✅new Vue({})根实例里面 data/methods 中的 this →vmVue 实例vm 和 vc 的关系vc.__proto__ VueComponent.prototypeVueComponent.prototype.__proto__ Vue.prototype实例.proto→ 指向自己构造函数的.prototype构造函数.prototype→ 是实例的原型对象笔试经常考Q组件实例 vc 为什么可以调用this.$emit Avc 的原型链vc.__proto__ → VueComponent.prototype.__proto__ → Vue.prototype$emit定义在 Vue.prototype 上沿着原型链查找到。QVueComponent 和 Vue 是什么关系 A不是相等是原型继承关系。小总结✅拿能力继承 Vue 原型上所有实例方法组件可以做事件通信✅省代码不需要复制一套 API✅做隔离组件和根实例区分开组件不允许写 el✅面试高频考点通俗比喻Vue.prototype好比一个工具箱里面放着$emit、$watch各种工具。vm根实例直接拿着这个工具箱。vc组件不直接拿工具箱通过一根链子原型链可以访问工具箱里面全部工具。 但是 vc 自己不能做根 vm 的事情不能写 el 挂载页面。例子普通 JS原型链vc → VueComponent.prototype → Vue.prototype 所以组件实例 vc可以直接使用 Vue 原型上的方法比如$watch、$emit等。局部注册的子组件谁要用谁就在自己的components选项注册。 示例代码中test组件只在hello组件内部注册所以只有hello的 template 中可以写test/test#root容器、school 组件中直接写test/test会报错没有注册。div idroot school/school hello/hello !-- test/test 这里直接写会报错vm没有注册test组件 -- /div6. 打印验证打开控制台可以看console.log(school) // VueComponent构造函数 console.log(vm) // vm 根Vue实例点击按钮控制台打印的this就是 vc 组件实例。7. 简写回顾//完整写法 const school Vue.extend({ template:..., data(){return{} } }) //简写省略Vue.extendVue底层会自动帮我们调用 const school { template:..., data(){return{} } }8. vm 和 vc 对比表格表格vmVue 实例vcVueComponent 组件实例创建方式new Vue(options)Vue 内部自动new VueComponent()el 配置✅可以写 el❌组件不能写 eldata对象 / 函数都可以必须是函数thisvm 实例vc 组件实例作用根实例挂载容器复用组件原型链理解组件实例可以继承 Vue 原型上所有的属性和方法所以 vc 也能调用$emit、$on等。易错坑不要手动写new school()Vue 解析组件标签自动帮你 new。多次复用同一个组件标签每一个标签都会生成独立 vc 实例data 函数返回新对象数据隔离。子组件只对注册它的父组件生效外部无法直接使用。Vue 脚手架笔记整理一、脚手架文件结构├── node_modules # 项目所有依赖包npm install自动生成不要手动改 ├── public │ ├── favicon.ico # 浏览器页签小图标 │ └── index.html # 唯一主页面整个Vue项目挂载在这里 ├── src # 写代码的源代码文件夹我们主要操作这里 │ ├── assets # 静态资源图片、css等 │ │ └── logo.png │ ├── components # 存放.vue组件自定义组件放这里 │ │ └── HelloWorld.vue │ ├── App.vue # 根组件汇总所有其他组件 │ └── main.js # **项目入口文件**程序从这里开始运行 ├── .gitignore # git忽略哪些文件不做版本管理 ├── babel.config.js # js语法转译配置ES6转ES5兼容旧浏览器 ├── package.json # 项目配置项目名字、版本、npm命令、依赖列表 ├── package‑lock.json # 锁定包版本保证所有人安装版本一致不要手动修改 └── README.md # 项目说明文档✨重点自定义组件建议放在src/components/文件夹导入路径示例import Student from ./components/Student.vue你刚才报错就是路径写错没有指向 components 文件夹。二、Vue 两个版本区别vue.js完整版包含Vue 核心功能 模板解析器可以使用template:配置项写模板。vue.runtime.xxx.js运行时版脚手架默认用这个只包含Vue 核心功能没有模板解析器❌不能写template配置项✅要用render(createElement)函数生成页面内容// main.js脚手架默认写法 new Vue({ render: h h(App) }).$mount(#app)render 函数作用代替模板解析器把 App.vue 渲染到页面。记忆口诀完整版带解析器运行版不带解析器脚手架用运行版靠 render。三、vue.config.js 配置文件这个文件脚手架初始不会自动生成需要自己在项目根目录手动新建。查看脚手架全部默认配置终端执行vue inspect output.js执行后项目根目录会生成output.js里面是全部默认配置。常用配置课堂练习必用module.exports { lintOnSave: false, //关闭eslint代码规范校验消除一堆波浪警告 }修改完必须CtrlC停止服务重新npm run serve才生效。官方文档https://cli.vuejs.org/zh配套考点小结整个 Vue 项目只有一个真正的 html 文件public/index.htmlmain.js 入口文件创建 Vue 实例。App.vue 是根组件所有组件都在它里面汇总。组件放 components 文件夹导入路径写对否则报Module not found找不到模块。ref 属性总结作用ref用来给DOM 元素或者组件实例打标识之后通过this.$refs.xxx获取对应的对象。两种使用场景1. ref 写在普通 HTML 标签上h1 reftitle/h1this.$refs.title→得到原生 DOM 元素可以操作 DOM获取 innerText、修改样式等2. ref 写在组件标签上School refsch/this.$refs.sch→得到这个组件的实例对象VueComponent可以拿到组件内部的 data、调用组件的 methods 方法你的代码示例拆解showDom(){ alert(this.$refs.title); // h1.../h1 原生DOM alert(this.$refs.sch); // School组件实例对象 }⚠️注意点$refs只在挂载完成之后才有值created()阶段拿不到mounted()、点击事件里可以正常获取。$refs是对象key 就是 ref 写的名字。ref不是响应式不要拿来做数据绑定只用于获取 DOM / 组件实例。如果 v-for 循环里用 refthis.$refs.xxx拿到的是数组。记忆口诀ref 打标记$refs 来获取 普通标签得 DOM组件标签得实例。props 笔记整理考试背诵版以props为主props 配置项功能让子组件接收父组件传递过来的数据。父组件传递数据!-- 传字符串 -- Demo name张三/ !-- 传数字、布尔、对象等必须加 v-bind / : -- Demo :age18 :info{a:1}/子组件接收数据三种写法① 简单接收只接收不做校验props: [name,age,sex]② 接收 类型限制props:{ name: String, age: Number, sex: String }③ 接收 类型 是否必填 默认值最重要props:{ name:{ type: String, // 限制数据类型 required: true, // 是否为必填项 true必填 default: 老王 // 默认值父不传就用这个 } }注意required和default不要同时写必填就不要给默认值。⚠️重要备注高频考点props 是只读Vue 底层监视 props子组件直接修改 props控制台抛出警告数据不会生效。如果业务需要修改这份数据两种方案方案一复制到 data 副本仅子组件内部使用父组件数据不变data(){ return { myAge: this.age // 把props的age拷贝到data之后修改myAge } }局限仅初始化拷贝一次后续父组件更新 propsdata 副本不会自动同步。方案二$emit 触发自定义事件标准单向数据流修改父源数据子组件this.$emit(change-age, 20)父组件监听事件修改自己的数据StudentInfo :agea change-agea$event/易错点总结传递非字符串一定要加:否则会当成字符串。Demo age18 / !-- ❌age值是字符串18 -- Demo :age18 / !-- ✅age值是数字18 --default如果是对象 / 数组必须写成函数返回不能直接写对象字面量。//对象类型默认值写法 info:{ type:Object, default(){ return {} } }props 优先级高于 datatemplate 可以直接使用 props 里的变量。背诵短句props 父传子本身是只读 简单数组接收对象可以限制类型必填默认 要改分两种拷贝 data 改副本或者 emit 通知父改源。mixin 混入 笔记整理1. 功能把多个组件重复共用的配置data、methods、生命周期、computed 等提取出来做成混入对象复用代码不用每个组件重复写。2. 使用方式① 定义混入对象新建mixin.jsexport const myMixin { data(){ return { msg:混入的数据 } }, methods:{ show(){ alert(混入的方法) } }, mounted(){ console.log(混入的mounted) } }② 局部混入组件内使用只对当前组件生效script import {myMixin} from ./mixin export default { name:Demo, mixins:[myMixin], // 数组可以写多个混入对象 // 组件自己配置 } /script③ 全局混入main.js所有组件全部生效import Vue from vue import {myMixin} from ./mixin Vue.mixin(myMixin) //之后所有组件自动合并这个混入配置3. ✨合并规则考试重点生命周期钩子全部执行混入先执行组件自身后执行混入 mounted → 组件 mounted两个都跑不会覆盖。data、methods、computed组件自身优先会覆盖混入的同名属性如果混入和组件有同名 data/methods组件自己的优先级更高覆盖混入。示例 混入msg:混入的数据组件 datamsg:组件自己的数据最终页面显示组件自己的数据4. 特点 坑点局部混入只作用写了mixins:[xxx]的组件。全局混入所有组件包括第三方组件都会生效谨慎使用。可以传入多个混入对象mixins:[m1,m2,m3]多个混入之间后面的会覆盖前面同名 data/methods。mixin 里面的 data 不是响应式共享每个组件使用混入都会生成独立副本互不干扰。简短背诵版mixin 抽公共配置分为局部混入、全局混入 生命周期钩子全都执行混入先跑 data/methods 同名组件自身优先级更高覆盖混入。对比表格局部混入全局混入写法组件内mixins:[mixinObj]Vue.mixin(mixinObj)main.js 写生效范围当前组件项目全部组件小考点mixins是数组可以引入多个混入对象。Vue2 插件 (plugin) 笔记1. 功能用来增强 Vue可以给 Vue 添加全局功能全局过滤器、全局指令、全局混入、实例方法 / 属性。2. 本质插件是带有install方法的对象。const myPlugin { install(Vue, options){ // 插件逻辑 } }第一个参数Vue构造函数第二个参数options使用者调用Vue.use(插件, 传入的配置)传过来的数据3. 自定义插件完整写法// my-plugin.js export default { install(Vue, options) { //1.全局过滤器 Vue.filter(myFilter, function(val){ return val.toUpperCase() }) //2.全局自定义指令 Vue.directive(focus,{ inserted(el){ el.focus() } }) //3.全局混入 Vue.mixin({ mounted(){ console.log(插件全局mixin) } }) //4.给Vue原型添加实例方法/属性所有组件可以 this.$xxx 调用 Vue.prototype.$hello function(){ alert(hello插件) } Vue.prototype.$test 100 } }4. 使用插件Vue.use(插件, [配置参数]) 配置的参数可传递给插件在main.js引入并使用import Vue from vue import myPlugin from ./my-plugin // 使用插件第二个参数传给install的options Vue.use(myPlugin, { name:测试配置 }) new Vue({ el:#app })⚠️重要Vue.use()要写在new Vue()之前。install 内部四种增强能力汇总Vue.filter()— 注册全局过滤器Vue.directive()— 注册全局指令Vue.mixin()— 设置全局混入Vue.prototype.$xxx— 添加实例方法 / 属性组件内部this.$xxx访问高频考点 坑插件必须有install方法没有 install 的对象不能作为插件。Vue.use(插件, 配置对象)配置对象会作为 install 的第二个参数。Vue.use()会自动缓存同一个插件多次 use 只会执行一次 install。原型上挂载的方法所有组件实例通过this.$xxx访问不要和内置属性重名。背诵短句插件增强 Vue本质带 install 的对象 install 第一个参数是 Vue 构造函数第二个是配置 options use 来启用可以注册过滤器、指令、全局混入、原型方法 use 写在 new Vue 之前。对比区分表格mixin 混入plugin 插件作用复用组件配置 (data/methods/ 生命周期)全局增强 Vue 能力局部使用mixins:[xxx]无局部只能 Vue.use 全局注册全局Vue.mixin()Vue.use(plugin)插件内部可以调用Vue.mixin()实现全局混入。scoped 样式笔记1. 作用style scoped让样式只作用于当前组件防止不同组件之间样式冲突样式污染。2. 写法style scoped .box { color: red; } /style3. 底层原理Vue 给当前组件所有 DOM 标签自动生成唯一data‑v‑xxx属性同时编译 css给每一条选择器加上这个属性筛选。模板div classbox data‑v‑7ba2ac34/div编译后 css.box[data‑v‑7ba2ac34] { color:red; }样式只会匹配带这个data‑v‑xxx属性的元素别的组件没有该属性不会被影响。4. 坑点考试常考scoped 样式无法修改子组件内部的 DOM 元素子组件模板的标签会带自己的data‑v属性父组件 scoped 的选择器带父的data‑v匹配不到子组件内部元素。深度选择器//deep/用来穿透 scoped修改子组件内部样式/* vue2 */ .box .child-inner{ color:blue; } /* 或者 */ .box /deep/ .child-inner{ color:blue; }去掉scoped样式变成全局样式整个项目所有组件都会生效容易类名冲突。一个组件可以写多个 style 标签可以一部分 scoped 局部一部分全局style scoped /* 局部 */ /style style /* 全局无scoped */ /style背诵短句scoped 实现组件样式局部生效防止样式冲突 原理添加唯一data‑v‑xxx属性 scoped 不能直接改子组件内部样式需要深度选择器/deep/穿透。对比表格写法生效范围style scoped仅当前组件局部style全局所有组件考点问答题为什么加 scoped 就不会样式冲突 答Vue 编译时给组件 DOM 添加唯一data‑v‑xxx属性css 选择器自动附加该属性样式只匹配本组件 DOM。CSS 和 Less 的区别CSS原生层叠样式表浏览器直接识别。LessCSS 预处理器不是原生 CSS浏览器不认识必须编译转换成普通 CSS 才能运行。对比表表格对比原生 CSSLess预处理器本质浏览器可直接解析的样式语言CSS 的增强工具最终编译输出 CSS变量❌没有变量写死颜色、尺寸✅支持变量color:red;统一管理嵌套❌只能平铺写选择器✅支持嵌套贴合 HTML 结构代码简洁运算❌不能计算✅支持加减乘除width:100px 20px样式复用❌复制粘贴重复代码✅Less‑mixin复用一套样式片段导入import a.cssimport a.less可以引入 less 文件浏览器直接运行不能直接运行需要编译成 CSS示例对比✅原生 CSS.box { color:#f00; } .box .item { font‑size:16px; } .box:hover { background:#eee; }✅Less 写法red: #f00; .box{ color:red; .item{ font‑size:16px; } :hover{ background:#eee; } }打包的时候less 会被编译转换成上面那份普通 CSS 交给浏览器。在 Vue 中使用!-- 普通css -- style scoped .box{} /style !-- less必须加 langless -- style langless scoped c:red; .box{ color:c; } /style安装依赖npm i less less‑loader7 -DLess 新增四大能力CSS 没有变量xxx统一管理颜色、尺寸嵌套减少重复写父选择器代表自身运算尺寸、颜色可以计算mixin 样式混入复用一堆 css 属性关键点Less不能替代 CSS只是写 CSS 的工具最终产物依旧是 CSS。浏览器只认识 CSS不识别变量、嵌套这些 less 语法。写 less 只是开发阶段方便打包自动翻译成 css。记忆口诀CSS 浏览器直接跑 Less 是预处理器写得爽编译变 CSS 新增变量、嵌套、运算、样式 mixin。注意区分两个 mixinVue 的 mixinJS 逻辑复用scriptLess 的 mixin样式代码复用style