一、 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
有想了解更多的小伙伴可以去链接看一下,应该对你们能够有所帮助。