3.1 axios && fetch
目的: 是在框架中使用数据请求
回顾:
封装ajax
jquery 【
.
g
e
t
.get
.get .post
.
a
j
a
x
.ajax
.ajax .load 】
框架:
数据请求
使用原生js提供的fetch
使用第三方封装库: axios
Vue中可以统一对axios进行挂载
Vue.prototype.$http = axios
fetch vs axios
axios 对已获得的数据进行了一层封装 XSRF
axios底层自动对数据进行了格式化
fetch并没有进行封装,拿到就是格式化后的数据
fetch进行了多一层的格式化
res.json()
res.blob() 格式化二进制
res.text()
Axios总结
1.get方法
A: 无参数
axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
B: 有参数
axios({
url: 'http://xxx',
method: 'get' //默认就是get,这个可以省略,
params: {
key: value
}
})
2.post
注意: axios中post请求如果你直接使用npmjs.com官网文档, 会有坑
解决步骤:
1. 先设置请求头
2. 实例化 URLSearchParams的构造器函数得到params对象
3. 使用params对象身上的append方法进行数据的传参
// 统一设置请求头
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
let params = new URLSearchParams()
// params.append(key,value)
params.append(‘a’,1)
params.append(‘b’,2)
axios({
url: ‘http://localhost/post.php’,
method: ‘post’,
data: params,
headers: { //单个请求设置请求头
‘Content-Type’: “application/x-www-form-urlencoded”
}
})
.then(res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
Fetch
1.get
fetch(‘http://localhost/get.php?a=1&b=2’)
.then(res=> res.text()) // 数据格式化 res.json() res.blob()
.then(data => {
console.log( data )
})
.catch(error => {
if( error ){
throw error
}
})
注意事项:
A: fetch 的 get 请求的参数是直接连接在url上的, 我们可以使用Node.js提供的url或是qureystring模块来将
Object --> String
B: fetch 的请求返回的是Promise对象,所以我们可以使用.then().catch(),但是要记住.then()至少要写两个, 第一个then是用来格式化数据的,第二个then是可以拿到格式化后的数据
格式化处理方式有
fetch(’./data.json’)
.then(res=>{
res.json() //res.text() res.blob()
})
.then( data => console.log(data))
.catch( error => console.log( error ))
2.post
fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82
fetch项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975
历史
Vue1.0
Vue1.0数据请求我们使用的是一个第三方的封装库,这个封装库叫做 vue-resource
vue-resource现在已经淘汰了,它的作者也推荐我们使用axios
vue-resource使用形式和axios一样的
this.
h
t
t
p
.
g
e
t
t
h
i
s
.
http.get this.
http.getthis.http.post
this.$http({})
vue-resource有jsonp方法,而axios是没有的
Vue2.0
axios [ 可以说是目前最好的数据请求的封装库 ]
fetch
3.2 计算属性
computed 是Vue中的一个选项
作用: ?
业务: 如果我想让一个字符串反向,如何实现?
分析: 反向 -> 数组【 reverse 】
3.2.1 侦听属性
watch 是Vue中一个选项
作用: ?
监听数据的变化,当数据发生改变时,我们完成一些操作
业务:
watch: {
firstName ( val ) {
this.fullName = val + this.lastName
},
lastName ( val ) {
this.fullName = this.firstName + val
},
num: {
deep: true, // 深度监听
handler ( val ) {
// 当num发生改变时,触发的方法
console.log( val )
}
}
}
总结: methods vs computed vs watch
项目中如何使用
事件处理程序: methods
watch
有大量数据交互和异步处理时进行
computed
有逻辑处理
V中像全局变量一样使用
3.3 混入 【 青铜 】
minxin
混入的形式
全局混入 【 不推荐 】
局部混入
混入的作用:
将选项中某一个或是多个单独分离出去管理,让职能更加单一高效,符合模块化思想
局部混入的使用
选项 minxins
全局混入
Vue.mixin({})
3.4 组件 【 王者 】
了解前端组件化发展历史
前后端耦合
前后端不分离项目
找后台搭建项目开发环境
寻找项目目录中的静态资源目录
js
img
css
同步修改css
前后端分离
前端团队合作项目的出现
组件化为了解决多人协作冲突问题
复用
组件的概念
组件是一个html 、 css 、js 、img 等的一个聚合体
Vue中的组件属于扩展性功能
通过 Vue.extend() 来扩展的
ƒ Vue (options) {
if (!(this instanceof Vue)
) {
warn(‘Vue is a constructor and should be called with the new
keyword’);
}
this._init(options);
}
ƒ VueComponent (options) {
this._init(options);
}
VueComponet这个构造函数我们不进行new实例化,我们希望组件是以标签化的形式展示
-->
组件要想合法化,必须注册解析
组件的注册 【 创建 】
全局注册
局部注册
组件的规则
is属性 - 动态组件 - 动态缓存组件
template模板标签
直接子元素有且仅有一个
组件的嵌套
4.0 组件的通信 【 王者 】
为什么要进行组件通信?
组件是一个聚合体,将来项目要合并,那么必然各个组件之间需要建立联系,这个联系就是数据通信
分类
父子组件通信
理解: data选项为什么是一个函数?
组件是一个聚合体,也是一个整体,它需要一个独立的作用空间,也就是它的数据需要是独立的,目前js的最大特点是函数式编程,而函数恰好提供了一个独立作用域,所以我们data在出根组件外都是函数
理解: 为什么data函数需要返回一个返回值,返回值还是对象,不能是数组吗?
Vue通过es5的Object.definePerproty属性对一个对象进行getter和setter设置,而data选项是作为Vue深入响应式核心的选项
过程
父组件将自己的数据同 v-bind 绑定在 子组件身上
子组件通过 props属性接收
这里是father
这里是son
我收到了父亲给的 {{ money }}
这里是father
我现在有 {{ gk }}
4.1 slot
slot 插槽
比如: 插卡游戏机
-
分类
-
普通插槽
-
具名插槽
-
给slot加一个name属性
<slot name = "header"></slot>
-
-
注意: 以上内容是 Vue 2.5.x的版本
-
Vue 2.6.x以上的版本将使用 v-slot指令来代替 2.5.x使用方式
-
-
v-slot指令
- 作用:
- 可以将组件的数据在组件的内容中使用
- 作用:
4.2 过渡效果
Vue框架使用css3过渡效果或是js动画
Vue内部提供了一个叫做transition的过渡组件
使用transition包裹过渡元素,那么会自动添加 6 个类名 8个钩子函数
- 默认 类名 开头 v
- 如果有name属性,那么使用 这个name属性值作为类名开头
- 实现方式
- 在 CSS 过渡和动画中自动应用 class 【 自己写 】
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
- 第一种 [ 在 CSS 过渡和动画中自动应用 class 【 自己写 】 ]
- 第二种: animate.css 【 推荐 】
- 第三种: Vue提供了8个javascript钩子,我们需要自定义js动画
- 第四种: 使用第三方插件: Velocity.js
4.3 生命周期
4.4 swiper
swiper是一个实现滑动操作的一个第三方库,目前最好的滑动操作库
4.5 自定义指令
业务: 页面开启时自动获得 search 按钮焦点
-
定义形式
-
全局定义
// Vue.directive('focus',{ // // 5个javascript钩子 5个中掌握2个 // bind (el,binding,vnode,oldVnode) { // 当自定义指令和元素绑定时触发 // console.log( 'bind', ) // }, // inserted ( el,binding,vnode,oldVnode ) { // 当自定义指令绑定的元素插入到页面时触发 // console.log( 'el',el) // console.log( 'binding',binding) // console.log( 'vnode',vnode) // console.log( 'oldVnode',oldVnode) // console.log('inserted') // if ( binding.modifiers.a ) { // el.style.background = 'red' // } else { // el.style.background = 'blue' // } // el.value = binding.expression // el.focus() // }, // updated () { // 当自定义指令的元素或是他的子元素发生变化式触发 // }, // componentUpdate () { //当自定义指令的元素或是他的虚拟子节点 发生变化式触发 // }, // unbind () { // 当自定义指令绑定的元素解绑时触发 // } // })
-
局部定义
new Vue({ el: '#app', directives: { 'focus': { bind () { }, inserted ( el ) { el.focus() } } } })
-
4.6 过滤器
-
- 作用
- 是对已经有的数据做数据格式化
- 作用
-
-
使用格式
- 已有数据 | 过滤器名称(arg1,arg2)
<img :src = "item.img | imgFilter " οnerrοr="this.style.visibility='hidden'" >
- | 我们称之为 管道符
-
-
定义
- 全局定义
- Vue.filter
- 局部定义
- filters选项
全局定义 // Vue.filter('imgFilter',function ( val ) { // //val就是需要格式化的数据 // // console.log('val',val) // return val.replace( 'w.h', '128.180') // }) new Vue({ el: '#app', data: { lists: [] }, filters: { // 局部定义 // 过滤器名称:function () {} 'imgFilter': function ( val ) { return val.replace( 'w.h', '128.180') } }, methods: { getList () { fetch('./data/list.json') .then( res => res.json()) .then( data => { this.lists = data.movieList }) .catch( error => console.log( error )) } } })
- 全局定义
.1 todolist案例
- sui - ui库 + Vue + OOCSS
5.2 虚拟DOM & DIff算法
-
掌握程度: 了解
-
案例
- 操作真实DOM越少越好,尽量的去操作数据
- 所以总结出来虚拟dom,
- 所以Vue利用VDOM的对象模型来模拟DOM结构
- 但是当一个页面很复杂式,DOM结构的模拟就变的很复杂了,所以Vue使用了一个新的语法糖,叫做JSX
-
jsx
-
javascript + xml 让我们可以在js中书写dom结构
<template id="mask"> <div class="mask-box"> <div class="mask-bg"></div> <div class="mask-content"> <p> 您确定要离开吗? </p> <button class="button button-warning button-fill pull-right" @click = "removeItem( activeIndex )" > 确定 </button> </div> </div> </template>
-
-
render
- ( createElement => VNode )
- 将 jsx 通过 render 方法解析为对象模型
-
流程
-
第一次时
-
template模板使用jsx语法进行编辑
-
通过render函数将jsx解析为 vdom 对象模型
-
将VDOM对象模型渲染为真实DOM,然后挂载到页面中
-
当我们的数据发生改变时
-
重新生成VDOM
[外链图片转存失败(img-slWGSji0-1567125416496)(E:\1906\2-Vue.js\note\vue笔记\img\VDOM.png)]
-
总结:
-
- 为什么Vue中要使用VDOM?
-
- VDOM为什么可以优化Vue ?
-
- VDOM渲染流程
-
- JSX语法
-
- render函数
-
-
5.3 生命周期 [ 王者 ]
掌握程度
- 会写
- 会念
- 明白和了解每一个钩子函数的作用和意义
特别注意:
钩子函数不要写成箭头函数,箭头函数可能会改变this指向
-
理解: 为什么要有生命周期 ?
-
Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能,方便我们更好的去控制组件
-
类比: 人
- 出生 - 哭
- 小学 - 小学
- 中学
- 高中
- 大学 / 专科
- 工作
- 。。。
-
Vue的生命周期分为三个阶段,8个钩子函数
-
初始化
自动执行
研究方向
数据
真实DOM
-
beforeCreate
组件创建前
- 作用: 为整个生命周期做准备工作,初始化事件和自身或是子组件的生命周期做准备
- 类比: 父母为子女的相亲做准备
- 意义:
- 数据拿不到
- 真实dom拿不到
- 项目中
- 不常用
-
created
组件创建结束
- 作用: 初始化注入其他选项 和 激活 选项
- 类比: 我们本人知道了父母准备给我们相亲这件事,父母通知你了
- 意义:
- 数据可以拿到
- 真实dom拿不到
- 项目中:
- 数据请求,也可以修改一次数据
-
beforeMount
组件挂载前
挂载: 组件插入到页面
- 类比:两人初步联系
- 意义:
- 数据可以拿到
- 真实dom没有拿到
- 在项目中
- 数据请求,数据修改
- 建议不要去使用它了,让它完成内部事务,不给加负担
- 内部完成事务
- 判断el选项 - new Vue 是否有 el
- 有,继而判断是否有template选项,证明有子组件
- 有template,那么我们通过render函数将jsx解析为VDOM对象模型
- 无template,那么我们需要通过outerHTML手动渲染
- outerHTML,元素外进行渲染,并且会代替原来的容器盒子,并且template在实例内会被解析,将来不会渲染到页面
- 无: 那么我们需要手动挂载: new Vue().$mount(’#app’)
- 有,继而判断是否有template选项,证明有子组件
- 判断el选项 - new Vue 是否有 el
-
mounted
组件挂载结束,也就是已经插入到页面中了
- 类比: 两人约见面 【 奔现 】
- 意义:
- 数据可以拿到
- 真实DOM也可以拿到
- 项目中
- 数据修改,数据请求
- 真实DOM操作 【 不推荐 】
- 理由: 我们要用数据驱动视图
- 应该做的: 第三方实例化 【 静态数据 】
-
-
运行中
运行中触发条件是: 数据改变
只要数据改变,就会触发这两个钩子函数
-
beforeUpdate
组件更新前
- 类比: 奔现失败后,再一次在一次进行
- 意义:
- 数据是可以拿到更新后的数据
- 也可以拿到更新后的真实DOM
- 兵哥解析:
- 为在一次的更新准准备工作
- 生成Virtual DOM
- 项目中
- 不常用
-
updated
组件更新结束
- 类比: 两人看对眼了 / 两人看不对眼
- 看对眼: 相亲这件事就有一个结果
- 看不对眼: 相亲这件事继续
- 意义:
- 可以拿到修改后的数据
- 也可以拿到真实DOM
- 在项目中:
- 真实DOM操作 【 不推荐 】
- 第三方库动态实例化 【 动态数据 】
- 内部
- VDOM重新渲染,然后通过render函数解析为VDOM对象模型,在通过Diff进行比对生成patch补丁对象,然后重新渲染为真实DOM
- 只改变变化的部分,其他部分不改变
- VDOM重新渲染,然后通过render函数解析为VDOM对象模型,在通过Diff进行比对生成patch补丁对象,然后重新渲染为真实DOM
- 类比: 两人看对眼了 / 两人看不对眼
-
-
销毁
触发条件:组件被删除
- 外部开关销毁
- 内部调用$destroy()
这两个钩子函数没有太大区别,所以我们统一说
- beforeDestroy
- destroyed
- 外部销毁
- 通过开关完成
- DOM被删除了,组件也被删除了
- 通过开关完成
- 内部销毁
- 通过调用$destroy()来完成
- DOM没有被删除,但是组件被删除了
- Dom需要手动删除
- 通过调用$destroy()来完成
- 项目中如何使用:
- 善后
- 比如: 计时器,比如滚动事件等
- 善后
5.4 生命周期案例
- Swiper
- 静态数据
- 动态数据
- updated中写式,会有重复实例化问题
- 第一个解决方案: 加判断条件
- 第二个解决方案: setTimout
- 放在主线程后执行,异步队列中,保证真实DOM渲染完成
- 第三种解决方案: 推荐 Vue内部提供的 nextTick
- nextTick表示真实DOM渲染完成之后才执行
- Vue.nextTick( callback )
- this.$nextTick( callback )
- nextTick表示真实DOM渲染完成之后才执行
- updated中写式,会有重复实例化问题
-