xrkhy的博客

单页应用程序：SPA【Single Page Application】是指所有的功能都在一个html页面上实现单页面应用程序，之所以开发效率高，性能好，用户体验好页面按需更新比如当点击【发现音乐】和【关注】时，只是更新下面部分内容，对于头部是不更新的访问路径和组件的对应关系！访问路径 和 组件的对应关系如何确定呢？路由生活中的路由：设备和ip的映射关系路径和组件的映射关系概念：路由（英文：router）就是对应关系。即路径和组件的映射关系。修改地址栏路径时，切换显示匹配的组件。

路由（英文：router）就是对应关系。通俗易懂的概念：Hash 地址(也就是锚链接#)与组件之间的对应关系。下面是我们点击b1,b2,b3,b4都会跳转，但不会刷新页面下面的hash就是#b4。

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。我们打开ElementUI官网。打开插件市场下载插件有提示。可以参考我之前的博客。

第四步：使用VSCode或者Trae CN打开项目。不同版本Vue-Cli创建的目录可能不同但是大概都是一样的。打开vscode的终端，执行一下指令npm run serve # 启动开发服务器（基于 webpack-dev-server）Webpack 使用的脚手架是vue-cli 需要全局安装。Vite 使用的脚手架是create-vue 不需要全局安装。WebpackVite是否需要全局安装需要.可使用查看全局的版本不需要查看所有脚手架版本的指令。

前端工程化指的是：在企业级的前端项目开发中 把前端开发所需的工具，技术，流程，经验等进行规范化，标准化。企业中的Vue项目和React项目,都是基于工程化的方式进行开发的好处：前端开发自成体系，有一套标准的开发方案和流程概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性，性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

​ (1) 双击显示输入框，输入框获取焦点​ (2) 失去焦点，隐藏输入框​ (3) 回显标签信息​ (4) 内容修改，回车 → 修改标签信息​ (1) 动态传递表格数据渲染​ (2) 表头支持用户自定义​ (3) 主体支持用户自定义综合案例 - 商品列表-MyTag组件抽离综合案例-MyTag组件封装-创建组件MyTag.vueApp.vue综合案例-MyTag组件控制显示隐藏MyTag.vuemain.js综合案例-MyTag组件进行v-mode

内置指令：v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能全局注册局部注册使用指令注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。如：注册指令时不用加v-前缀，但使用时一定要加v-前缀inserted:被绑定元素插入父节点时调用的钩子函数el

让组件内部的一些 结构 支持 自定义将需要多次显示的对话框,封装成一个组件组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办组件：src/components/MyDialog.vueApp.vue通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白能否给插槽设置 默认显示内容 呢？封装组件时，可以为预留的 插槽提供后备内容（默认内容）。在 标签内，放置内容, 作为默认显示内容src/App.vue组件：src/components/MyDialog.vue一个组件内有多

动态组件指的是动态切换组件的显示与隐藏。

（至少dom得渲染出来）// 接口地址：http://hmajax.itheima.net/api/news。// 2. 更新到 list 中，用于页面渲染 v-for。'beforeUpdate 数据修改了，视图还没更新''beforeCreate 响应式数据准备好之前'// 3. 更新阶段(修改数据 → 更新视图)'updated 数据修改了，视图已经更新'// this.数据名 = 请求回来的数据。// 可以开始发送初始化渲染的请求了。// 1. 创建阶段（准备数据）// 2. 挂载阶段（渲染模板）

/ this.$nextTick() 会在DOM更新之后。点击编辑显示输入框并获取焦点。问题：“显示之后”，立刻获取焦点是不能成功的！原因：Vue 是异步更新DOM (提升性能)，这样才能让函数内部的this指向Vue实例。this.$nextTick(函数体)$nextTick 内的函数体 一定是。,才会触发执行此方法里的函数体。出现下面报错，这是为什么呢?// 让输入框获取焦点。// 立即执行回调函数。

vue优势：MVVM在vue中，程序员不需要操作DOM。程序员只需要把数据维护好即可！（数据驱动视图）假设：在vue中，需要操作DOM了，需要拿到页面上某个DOM元素的引用，此时怎么办？有人会说直接引用jQuery。在vue项目，不建议大家安装和使用jQuery。因为jQuery依赖手动操作DOM强制干预视图会导致Vue的响应式系统失效。我们可以使用 ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。什么是$refs呢？

学会在Vue中使用Echarts

学会使用v-model在组件中的应用

学会使用Vue2中的组件通信。

学习Vue2的组件组成和注册。

使用cli创建Webpack工具进行开发。

学习使用Vue2的计算属性。

学会使用监听器

学习Vue2的过滤器

学会使用Vue指令。

学习什么是Vue和Vue的工作原理以及安装调试工具

Vue的学习路线