上线github:https://blog.csdn.net/shenli_MLZS/article/details/86649036

vue up主:https://space.bilibili.com/382771183spm_id_from=333.788.b_765f7570696e666f.1
音乐后台api:https://blog.csdn.net/qq_28139021/article/details/76684436?utm_source=blogxgwz6
https://www.jianshu.com/p/67e4bd47d981
学习步骤https://www.jianshu.com/p/54546321363a?open_source=weibo_search

初始化vue项目:vue init webpack 项目名

1.组件如何使用另一个组件的数据
vue中组件通信===>1.父子组件传值
2.bus总线传值
3.vuex传值

2.下载登录的图片
3.下载登录炫酷的页面
验证码登录 https://www.cnblogs.com/JiAyInNnNn/p/11064745.html
给手机发送验证码https://www.cnblogs.com/reeber/p/11267029.html
4.当路由跳转时,保存当前组件状态
利用vue-router中的keep-alive
5.用户按关键字搜素数据,并将含有关键字的信息高亮
<方法一:利用filter过滤器搜素 ==>https://www.jb51.net/article/162113.htm
<方法二:核心思想:
1)利用oninput属性来触发搜素功能
   2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的标签,最后利用v-html来嵌入html标签来达到关键字高亮显示
   3)利用axios.CancelToken来终止上一次的异步请求,防止旧关键字查询覆盖新输入的关键字查询结果。
https://www.cnblogs.com/pengshengguang/p/8059190.html
6.展示一组数据的某一部分内容=》只展示musicData中的几项数据
7.弄清楚var validatePass2 = (rule, value, callback) => {}中的rule value callback
8.html中块级元素和行内元素
9.页面布局 ====> 流动布局 flex布局 等等
10.this. r o u t e r . p a r a m s 与 t h i s . router.params与this. router.paramsthis.router.query的区别 params与query的区别
11.rem适配
12.数组的操作 比如:cancat substr reverse split 等等

	以下方法会改变原数组:

	[].push() ==>(在数组结尾处)向数组添加一个新的元素,返回新数组的长度:
	[].pop() ==>从数组中删除最后一个元素,返回“被弹出”的值:
	[].shift() ==>删除首个数组元素,并把所有其他元素“位移”到更低的索引,返回被“位移出”的字符串:
	[].unshift() ==>(在开头)向数组添加新元素,并“反向位移”旧元素,返回新数组的长度。
	[].splice() ==>用于向数组添加新项,返回一个包含已删除项的数组,第一个参数定义了应添加新元素的位置()第二个参数定义应删除多少			元素。其余参数定义要添加的新元素。
	[].sort() ==>用于对数组的元素进行排序,数组在原数组上进行排序,不生成副本,按排序算法返回排序后的数组
	[].reverse() ==>将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组。

	以下方法不会改变原数组,会返回一个新的改变后的数组

	filter() ==>过滤
	concat() ==>  通过合并(连接)现有数组来创建一个新数组,不会更改现有数组。它总是返回一个新数组,可以使用任意数量的数组参数
	slice() ==>用数组的某个片段切出新数组,创建新数组。它不会从源数组中删除任何元素,可接受两个参数该方法会从开始参数选取元素,			直到结束参数(不包括)为止
	split()==>如果把空字符串 ("") 用作 参数,那么 stringObject 中的每个字符之间都会被分割。

13关于绑定res属性:
<1>如果给标签绑定ref = 'xxx’属性 使用this. r e f s . x x x 获 取 原 生 的 j s D O M 对 象 < 2 > r e f 属 性 值 不 能 重 名 < 3 > 如 果 是 给 组 件 绑 定 r e f 属 性 , 那 么 t h i s . refs.xxx获取原生的jsDOM对象 <2>ref属性值 不能重名 <3>如果是给组件绑定ref属性,那么this. refs.xxxjsDOM<2>ref<3>refthis.refs.xxx获取的是当前的组件对象
14如果后台返回的数据不完整,我们需要添加数据则使用vue提供的this.$set方法
15vuex中mutation里面不能使用异步操作,否则会导致state中值不会改变而页面中渲染了改变后的值,下次获取state中的值会报错,异步操作应放在action中
16什么是结构赋值

18H5中的物理定位和history
19 vue中的异步操作和promise操作
20 this. e m i t 和 t h i s . emit和this. emitthis.on的用法和传参的含义
this. e m i t 触 发 事 件 , t h i s . emit触发事件,this. emitthis.on绑定事件
21 vuex的使用步骤
1>下载vuex包
2>编写store.js(在里面写五大将内容)并在mian.js入口文件中引用
3>在各组件中的computed中使用
22.熟悉正则表达式
23. b u s 总 线 : 1 > 首 先 在 m i a n . j s 入 口 文 件 中 挂 载 bus总线: 1>首先在mian.js入口文件中挂载 bus线1>mian.jsbus实例==>Vue.prototype.$bus = new Vue({

})
2>通过watch监听数据变化,再通过this.$bus.$emit('name',val)传值
3>在created中在组件创建之前通过this.$bus$on('name',val)获取传递	过来的数据

24组件的使用必须通过申子 挂子 用子的三步骤
25实现网页自适应的方法:
1>使用%百分比==》简易场景实现自适应:浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大小。这样在页面宽度发生变 化时,能利用以上特性实现简易的自适应效果。
2>编写多套css代码,采用媒体查询====》如果实际开发中有复杂场景的需求,一般通过编写多套CSS代码,然后用媒体查询技术,让 页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码,虽然工作量大,但对于不同 屏幕尺寸的设备都有单独一套CSS代码维护起来更方便。
3>通过栅栏系统实现响应式布局===》响应式布局是指根据不同屏幕尺寸自动调整页面显示效果实现自适应(也要用到媒体查询技术)。 响应式布局一般有栅格系统布局,flex布局。bootstrap框架的核心就是栅格系统。 (后面详细介绍栅格系统的实现方式)
26针对html中label的for属性,表示与某个表单控件乡关联,通过id乡关联有两个关联方式
显式的联系:


隐式的联系:

27v-model是通过绑定input事件改变值的,对于表单元素只能通过value(e.target.value)获得数据,innerHTML和innerText不能获取
28父子组件传值:
父传子:直接在孩子组件内传值,子组件通过props获得数据
子传父:
1.先给父组件中绑定自定义的事件,并在父组件的methods中声明该事件处理函数
2.父组件绑定自定义事件时,必须在孩子组件标签内声明 如:<HelloWorld @father=‘father’/>
3.在子组件中触发原生事件,在原生事件处理函数中使用$emit触发父组件中自定义的事件

29数据懒加载与路由懒加载,推荐项目大的时候使用
//假设components下有一个home.vue,需要在路由页面引入
new Router({
routes:[{
path:’/’,
name:“home”,
components:()=>import("./components/home") //将路由顶部的引入,放在这里就实现路由的懒加载,()=>返回后 面跟的一个数据,()=>{}是一个函数.
}]

	});

	//组件实现方法类似,假设要引入homechild组件
	export default {
 		name"home",
	 components:{                    //注册vue组件
	 homeChild:()=>import("./homeChild");
	}
	}

30组件内的name属性可以用来组件的递归调用
31对数组排序
1>冒泡排序
2>选择排序
3>插入排序
4>快速排序
32深拷贝 浅拷贝 对于一个数组a 数组b复制a 如果改变a的值b也发送改变为签拷贝否则为深拷贝 深拷贝针对的是引用类型 基本数据类型值存在栈中,引用类型名存在栈中,值存在堆中
33柯里化===》就是只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。
作用:1>可以参数复用
2>提前确认
3>延迟运行
像我们js中经常使用的bind,实现的机制就是Currying.
34BFC 块格式化上下文 (Block Formatting Context) 针对于 HTML文档 起作用
作用:1>使BFC内部浮动元素不会乱跑 (让浮动元素始终在BFC范围内)
2>和浮动元素产生边界 (通过设置非浮动元素的maring为浮动元素的宽度加上你想要产生边距的宽度。 )
解决问题:1>浮动元素的父元素高度坍塌
2>两栏自适应布局
3>外边距垂直方向重合
DIFF算法来源于后端:diff算法是比较两个文件的差异,并将两个文件不同之处,将这个不同之处生成一个补丁对象(patch)
35vuex中五大将mapstates的作用
methods:mapActions([])和mapMutations([]),
computed:mapGetters([]),mapState({})
37swiper 应用于移动端的插件 animate 用于css动画
38请求中断和响应中断 this. a x i o s . i n t e r c e p t o r s . r e s p o n s e . u s e 39 如 何 改 变 视 窗 大 小 页 面 布 局 不 变 设 置 m i n − w i d t h 响 应 式 布 局 : @ m e d i a 查 询 屏 幕 大 小 设 置 多 套 c s s 样 式 40 j s 的 选 择 器 A : g e t E l e m e n t B y I d ( I D ) : 返 回 对 指 定 I D 的 第 一 个 对 象 的 引 用 , 如 果 在 文 档 中 查 找 一 个 特 定 的 元 素 , 最 有 效 的 方 法 是 g e t E l e m e n t B y I d ( ) B : g e t E l e m e n t s B y N a m e ( n a m e ) : 返 回 文 档 中 n a m e 属 性 为 n a m e 值 的 元 素 , 因 为 n a m e 属 性 值 不 是 唯 一 的 , 所 以 查 询 到 的 结 果 有 可 能 返 回 的 是 一 个 数 组 , 而 不 是 一 个 元 素 。 C : g e t E l e m e n t s B y T a g N a m e ( t a g n a m e ) : 返 回 文 档 中 指 定 标 签 的 元 素 D : g e t E l e m e n t s B y C l a s s N a m e ( ) : 返 回 文 档 中 所 有 指 定 类 名 的 元 素 E : q u e r y S e l e c t o r ( ) : 返 回 文 档 中 匹 配 指 定 c s s 选 择 器 的 第 一 个 元 素 F : q u e r y S e l e c t o r A l l ( ) : 返 回 文 档 中 匹 配 指 定 c s s 选 择 器 的 所 有 元 素 41 t h i s . axios.interceptors.response.use 39如何改变视窗大小 页面布局不变 设置min-width 响应式布局:@media查询屏幕大小设置多套css样式 40js的选择器 A: getElementById(ID): 返回对指定ID的第一个对象的引用,如果在文档中查找一个特定的元素,最有效的方法是getElementById() B: getElementsByName(name): 返回文档中name属性为name值的元素,因为name属性值不是唯一的,所以查询到的结果有可能返 回的是一个数组,而不是一个元素。 C: getElementsByTagName(tagname): 返回文档中指定标签的元素 D: getElementsByClassName():返回文档中所有指定类名的元素 E: querySelector():返回文档中匹配指定css选择器的第一个元素 F: querySelectorAll():返回文档中匹配指定css选择器的所有元素 41this. axios.interceptors.response.use39minwidth@mediacss40jsA:getElementById(ID):IDgetElementById()B:getElementsByName(name):namenamenameC:getElementsByTagName(tagname):D:getElementsByClassName():E:querySelector():cssF:querySelectorAll():css41this.router与this. r o u t e 的 区 别 t h i s . route的区别this. routethis.router 实际上 就是全局 路由对象 任何页面 都可以 调用 push(), go()等方法,this. r o u t e 表 示 当 前 正 在 用 于 跳 转 的 路 由 器 对 象 , 可 以 调 用 其 n a m e 、 p a t h 、 q u e r y 、 p a r a m s 等 属 性 ; 42 在 V u e 构 造 函 数 时 , 需 要 配 置 一 个 e l 属 性 , 如 果 没 有 e l 属 性 时 , 可 以 使 用 . route 表示当前正在用于跳转的路由器对象,可以调用其name、path、query、params等属性; 42在Vue构造函数时,需要配置一个el属性,如果没有el属性时,可以使用. routenamepathqueryparams42Vueelel使.mount(’#app’)进行挂载。
43类和伪类 类选择器就是根据class选择,伪类是在选择的元素上加:进一步选择 如div:first-child 伪类来选择div元素的第一个子元素
44跨域问题 解决方法:
前端解决:Webpack proxy 、nginx反向代理、webpack plugin 、jsonp(需要和后端一起解决,仅支持get方式)
后端解决:cors
使用Webpack proxy 解决跨域问题:在config/index.js中添加’/api’,然后在main.js中Vue.prototype.HOST = ‘/api’,最后用字符串拼接url , var urls = this.HOST +’/soso/fcgi-bin/clie’,就可以只要this.$axios.get()

45类 伪类 伪元素 :CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化,CSS3中的标准是伪类使用单冒号“:”而伪元素使用双冒号“::”(避免混淆)伪类与类优先级相同,伪元素与标签优先级相同
类:
伪类:用于向某些选择器添加特殊的效果
伪元素:用于将特殊的效果添加到某些选择器,伪元素在一个选择器中只能出现一次,并且只能出现在末尾

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐