清辞的博客

1. 网易云音乐的自动适配问题 移动端如何适配? 把所有px转成rem 利用flexible.js – 网页宽度改变 – 自动切换html的font-size flexible.js是淘宝移动端的适配方法，可以解决所有适配问题 // 首先是一个立即执行函数，执行时传入的参数是window和document (function flexible (window, document) { var docEl = document.documentElement // 返回文档的root元素

案例目的 了解如何引入网易云的nodeJS服务器 通过网易云接口的部分功能实现简单的页面布局 通过移动端案例逐渐熟练vant组件库 1网易云音乐的本地接口 下载网易云音乐node接口项目，在本地启动，为我们vue项目提供数据支持。并且在本地通过Nodemon启动服务，拿到数据，项目下载方式如下。 https://binaryify.github.io/NeteaseCloudMusicApi/#/ 2网易云音乐案例的前端项目初始化 初始化工程vue create music-demo 下载所.

vue路由简介和基础使用 生活中的路由：设备和ip的映射关系 node.js中的路由：接口和服务的映射关系 前端路由：路径和组件的映射关系 http://localhost:8080/#/home http://localhost:8080/#/search 那么为什么要使用路由呢？一个网页可以局部刷新吗？ 就比如网易云音乐首页 https://music.163.com/ 单页面应用SPA指所有功能在一个HTML页面上实现（single page web application） 使用路由的优点：整体

什么是动态组件,如何使用动态组件，如何切换 在同一个挂载点，可以切换显示不同组件。vue内置的component组件，配合is属性。只要改变is属性的值，变为要显示的组件名即可 组件缓存 vue内置的keep-alive组件把要缓存的组件包起来，这要不会频繁的创建和销毁组件，页面更快呈现。通过组件的activated和deactivated来判断组件的存活状态 组件插槽 当组件内某一部分标签不确定时，可以使用插槽技术。先在组件内使用slot占位，使用组件时传入具体标签。传入的标签会替换.

vue的组件进阶 如何自由切换两个组件呢？我们首先想到的是用v-if。在此介绍其他的方法。 目标是动态组件- 切换组件显示，同一个挂载点要切换不同组件的显示。 <template> <div> <button @click="comName = 'UserName'">账号密码填写</button> <button @click="comName = 'UserInfo'">个人信息填写</button>

vue的生命周期是什么 vue从创建到销毁的过程 钩子函数有哪些，分别作用是什么 初始化，从创建到编译，beforeCreate/created，created函数能获取data，不能获取DOM 挂载，从编译到显示，beforeMount/monuted,mounted中获取真实DOM 更新，数据发生变化并且更新页面后，在updated中获取更新后的DOM 销毁，一般进行手动消除计时器，定时器和全局事件 axios与Ajax的关系以及原理 一种前端异步请求后端的计数，ajax是浏览器w.

1. 生命周期介绍 首先来看下面两张图，一张是完整流程图一张是介绍vue四大阶段的八大方法图 下面会详细介绍其使用情况。 所谓生命周期，就是vue从创建到销毁的整个过程。上面八大方法我们简称为钩子函数，作用是在特定的时间点执行特定的操作，就比如在组件创建完毕后，我们可以在created生命周期函数中发起Ajax请求，从而初始化data数据。 vue从创建->编译->显示->更新->销毁的过程。在每个过程中就会执行不同的方法。并且在上图我把整个生命周期分成了四个阶段。 创建-

1vue组件的封装过程 ​ 首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。 分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用 具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。 2vue组件如何进行传值

1.vue组件概念，创建和使用 当我们遇到多个重复的标签，我们可以采用vue提供的单文件，组件方式来封装一套然后复用。那么什么是组件呢？ 1 组件是可复用的Vue实例，封装标签，样式和JS代码。 2 组件化就是一种封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。 3一个页面，可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的结构样式和行为。 那么如何来创建组件呢？ 每个组件都是一个独立的个体，代码里体现为一个独立的Vue文件。分为全局注册和局部注册。全局注册那就是

1. Vue基础_更新检测,key作用 在上一章我们提到过v-for数组，那么我们的需求是如何v-for数组变化，需要同步更新到页面。但是并不是所有的数组方法都会造成v-for的更新。 <template> <div> <ul> <li v-for="(val, index) in arr" :key="index"> {{ val }} </li> </ul> &lt

1. Vue的特点 渐进式 声明式渲染 数据驱动视图 (响应式) 极少的去写DOM操作相关代码 双向绑定 组件系统 不兼容IE8及以下浏览器 2. Vue的最大优势是什么 ​ 简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离, ​ vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单. ​ 相比传统网页, vue是单页面可以只刷新某一部分 3. Vue和jQuery的区别是什么 ​ jQue

1Vue基本概念 下面给出两张图进行简单对比 由此可以感受到Vue的方便快捷。 2Vue脚手架 3Vue指令

Vue中的webpack进阶知识 1什么是webpack webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目 2webpack的优点 专注于处理模块化的项目，能做到开箱即用，一步到位 通过plugin扩展，完整好用又不失灵活 通过loaders扩展, 可以让webpack把所有类型的文件都解析打包 区庞大活跃，经常引入紧跟时代发展的新特性，能为大多

目录 1webpack基本概念 2webpack使用步骤 3webpack的配置 4webpack开发服务器 1webpack基本概念 下面给出了webpack的官方网站 概念 | webpack 中文文档 (docschina.org) 以前写完的网站，文件很多并且体积很大，因此我们可以用它来简化自己的代码。它的本质是一个第三方模块包，用于分析，并且打包代码。 2webpack使用步骤 在我们使用webpack前，需要下载yarn,并且使用yarn init命令声明一个packa.