前端知识点也可以当做面试题含vue
一、webpack3.x打包工具
三大组成结构、package.json、webpack.config.js、serve.js
1、Package.json:下载目录需要的依赖包
2、Webpack.config.js:是配置webpack的打包文件的配置由下四个部分组成
(1)entry:入口
(2)Ouput:出口
(3)Module:这个里面处理各种文件的loader
(4)Plugins:webpack用的的插件
3、serve.js在自己本地起一个服务器
4、处理图片用url-loader可以把用到的图片打包到指定目录,单纯只对css里图片
如要概括html'里的图片,需要下载一个loader html-withimg-loader、再配置
Serve.js:是利用webpack自带的服务器在自己电脑上起一个服务
(1)html5、css3新增标签以及属border-radius圆角、animation动画特效
二、ajax方法参数性
(2)、html5:header、nav、article、footer语义化标签、audio音频标签、canvas基于 script的画布
三、、css3:伪类悬着器、用于插雪碧图或者箭头等需求。Background:rgba背景色 透明度、transform、transition过度效果、
(1)、url要求为string类型参数
(2)、要求为string类型,请求方式post或者get、put和delet只有部分浏览器支持
(3)、timeout求情超时时间(毫秒)
(4)、async要求boolean类型设置为true时候所有请求都会是异步、反之同步为false 同步会锁定浏览器、用户其他操作必须等待请求完成才可以执行
(5)Cache默认为true,参数类型boolean。设置为false时候将不会从缓存中加载请 求信息
(6)DataType要求类型为string的参数,预期服务器返回的数据类型,可以用以下类 型
1、xml返回xml文档
2、Html返回纯html信息
3、Json返回json数据类型
4、Jsonp使用sonp形式调用函数
5、Text返回纯文本字符串
四、ajax跨域问题解决方案 同源策略
(1)、后端返回jsonp数据格式、缺点是只支持get请求
(2)、CORS解决,也是由后端解决
(3)、代理请求方式,常用的是用nodeJs可以代理、ajax请求的是本地接口、然后由 本地接口向实地接口请求数据,再返回给前端
五、闭包、
声明一个函数中的函数叫闭包
可以避免使用全局变量,防止全局变量污染
会造成内存泄漏(有一块内存空间被长期占用而得不到释放)
六、Vue-Router
(1)组件之间传参数
父子组件:子组件通过props方式接收数据
子传父:$emit方式传递参数
兄弟之间传值:eventBus创建一个事件中心,相当于中转站可以传递事件和接收事 件项目比较小的时候用这个比较合适
(2)路由router
有组件三种:router-link、router-view、keep-alive
Active-class是router-link的终极属性,用来做选中样式切换、当router-link标 签被点击时候会应用这个样式
动态路由:
创建主要是用path属性过程中使用动态路由参数参数值被设置到 this.$route.params下,通过这个属性可以获取到动态参数
导航钩子:
全局前置守卫:
to 和form都是路由对象,to代表要进入的目标。From代表当前正要离 开的路由。Next是必须要调用的方法
Const router = new VueRouter({})
Router.beforeEach((to,from,next) = {
})
全局后置钩子:
后置钩子并没有next函数,也不会改变导航本身
路由独享钩子:beforEnter
(3)$router和$route的区别
Router是全局路由对象是VueRouter的实例,包含了路由跳转方法、钩子函数。
Route路由信息对象、跳转的路由对象,每个路由都会有route对象
(4)vue-router响应路由参数变化
用watch检测
watch: {
$route(to, from){
console.log(to.path)
// 对路由变化做出响应
}
}
组件内导航钩子函数
(5)vue-router传参
第一种params:只能使用name,不能使用path、参数不会显示在路径上,浏览器 强制刷新参数会被清空
第二种query:参数会显示在路径上,刷新不会被清空。Name可以使用path属性
(6)vue-router的两种模式
第一种hash模式:原理是onhashchage事件,可以在window对象上监听这个事件
第二种history模式:利用的h5中History Interface新增的pushState()和replaceState() 方法。需要后台支持,如果刷新时,服务器没有响应响应的资源,会刷出404。
七、vuex的五个核心
(1)State:基本数据
(2)Getters:从基本数据派生的数据
(3)Mutations:提交更改数据的方式,同步!
(4)Actions:像一个装饰器,里面包裹mutations,使之前可以异步
(5)Modules:模块化vuex
八、Axios
(1)axios是一个基本es6中的promise的异步ajax请求库,可以使用在浏览器和node 中支持请求。响应拦截、请求取消、转换请求数据和响应数据、批量发送多个请求。 客户端支持防御XSRF
前端知识点也可以当做面试题含vue的更多相关文章
- 点击每个li输出里面的内容(前端很常问的面试题之一)
点击每个li输出里面的内容(前端很常问的面试题之一) 前端 面试 JavaScript <!DOCTYPE html> <html lang="en"> & ...
- 【转载】经典10道c/c++语言经典笔试题(含全部所有参考答案)
经典10道c/c++语言经典笔试题(含全部所有参考答案) 1. 下面这段代码的输出是多少(在32位机上). char *p; char *q[20]; char *m[20][20]; int (*n ...
- Vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...
- 前端知识点总结(HTML)
前端知识点总结(HTML) 一,头部常用的标签 1,link标签 (1),设置ico图标 <link rel="shortcut icon" href="favi ...
- JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- 前端知识点回顾——HTML,CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
- php开发面试题---vue面试题(vue.js的好处及作用)
php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...
- 【转】前端框架天下三分:Angular React 和 Vue的比较
前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...
- 前端三大主流框架的对比React、Vue、Angular
前端三大主流框架的对比React.Vue.Angular React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的 ...
随机推荐
- 联想在S规则债券市场完成了里程碑式的新债券发行
腾讯科技讯,香港,2020 年 4 月 24 日-联想集团(HKSE:992)(ADR:LNVGY)今日宣布,在S规则债券市场上成功发行了里程碑式的 6.5 亿美元债券. 这些债券吸引了全球大量固定收 ...
- 【Linux常见命令】find命令
find - search for files in a directory hierarchy find命令用来在指定目录下查找文件. 任何位于参数之前的字符串都将被视为欲查找的目录名. 如果使用该 ...
- 从零搭建Prometheus监控报警系统
什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB).Prometheus使用Go语言开发,是Google BorgMon监控系统 ...
- 51NOD 2072 装箱问题 背包问题 01 背包 DP 动态规划
有一个箱子容量为 V(正整数,0<=V<=20000),同时有 n 个物品(0<n<=30),每个物品有一个体积(正整数). 现在在 n 个物品中,任取若干个装入箱内,使得箱子 ...
- Redis服务器和客户端的通信
Redis客户端使用RESP(Redis序列化协议)与Redis服务器进行通信,RESP在位于TCP之上,而网络模型上客户端和服务器是保持的双工的连接.如图1 而一个简单的请求/响应的串行通信模型如下 ...
- MySQL存储过程举例
涉及循环.动态sql等主要的MySQL存储过程知识. 需求: 遍历所有[test_ondev_[0-9]]开头的表,将其中的所有数据按表中的col字段存储到[test_ondev_history_ + ...
- vue.prototype和vue.use的区别和注意点
1.vue.prototype:实例上挂载属性/方法,例如Vue.prototype.axios = axios; 2.vue.use:引入插件,例如vuex,vue.use(vuex)如图,vue. ...
- CF#132 C. Logo Turtle DP
C. Logo Turtle 题意 有一个海龟在一个x轴的0点,给出一个由'F','T'组成的字符序列. 海龟要按照这个序列进行行动,如果第i个字符为'F',表示沿当前方向走,'T'表示转身. 现在你 ...
- [csu1603]贪心
题意:有n门考试,对于考试i,不复习它能考si分,复习它的每小时能提高ai分,每过一小时ai会减小di,也就是说,连续复习某门科目每小时提高的分为ai, ai-di, ai-2di...,但每门考试最 ...
- vscode调试webpack的启动和打包部署过程,nodejs调试
launch.json ``` { // 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述. // 欲了解更多信息,请访问: https://go.micr ...