前端⼊门学习：Vue学习笔记（⼆）
⼀. 数据请求
1. fetch
why
•是⼀个设计粗糙的 API，配置和调⽤⽅式⾮常混乱，⽽且基于事件的异步模型写起来不友好。兼容性不好polyfill
//get
fetch("**").then(res=>res.json()).then(res=>{console.log(res)})
fetch("**").then(res=&()).then(res=>{console.log(res)})
//post
fetch("**",{
method:'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "name=kerwin&age=100"
}).then(res=>res.json()).then(res=>{console.log(res)});
fetch("/users",{
method:'post',
// credentials: 'include',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name:"kerwin",
age:100
})
}).then(res=>res.json()).then(res=>{console.log(res)});
注意
Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'}) 2.axios
<("")
axios.post("")
axios.put("")
axios.delete("")
axios({
url:"",
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"1.0.0","e":"1"}',
'X-Host': 'mall.cfgmon-banner'
}
}).then(res=>{
console.log(res.data);
})
返回的数据会被包装
{
*:*
data：真实后端数据
}
⼆. 组件
1. 虚拟dom与diff算法 key的作⽤
（1）把树按照层级分解
(2) 同key值对⽐
(2) 同key值对⽐
(3) 同组件对⽐
2. 为什么组件化
网络前端需要学什么扩展 HTML 元素，封装可重⽤的代码
3. 组件注册⽅式
•a.全局组件
•b.局部组件
4. 组件编写⽅式与Vue实例的区别
*⾃定义组件需要有⼀个root element
*⽗⼦组件的data是⽆法共享
*组件可以有data，，但是data 必须是⼀个函数
5. 组件通信
i. ⽗⼦组件传值 (props down, events up)
ii. 属性验证
props:{name:Number} Number,String,Boolean,Array,Object,Function,null(不限制类型)
iii. 事件机制
a.使⽤ $on(eventName) 监听事件
b.使⽤ $emit(eventName) 触发事件
iv. Ref
<input ref="mytext"/> this.$
v. 事件总线
var bus = new Vue();
* mounted⽣命周期中进⾏监听
6. 动态组件
•<component> 元素，动态地绑定多个组件到它的 is 属性<keep-alive> 保留状态，避免重新渲染
7. slot插槽 (内容分发)
•混合⽗组件的内容与⼦组件⾃⼰的模板-->内容分发⽗组件模板的内容在⽗组件作⽤域内编译；⼦组件模板的内容在⼦组件作⽤域内编译。
a. 单个slot
b. 具名slot
注意 v-slot 只能添加在 template 上, ⽂本节点也可以当具名插槽内容插⼊
8. transition过渡
Vue 在插⼊、更新或者移除 DOM 时，提供多种不同⽅式的应⽤过渡效果。
(1)单元素/组件过渡
* css过渡
* css动画
* 结合animate.css动画库
(2) 多个元素过渡(设置key)
*当有相同标签名的元素切换时，需要通过 key 特性设置唯⼀的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
mode:in-out ; out-in
(3)多个组件过渡
(4)列表过渡(设置key)
不同于 transition，它会以⼀个真实元素呈现：默认为⼀个 <span>。你也可以通过 tag 特性更换为其他元素。
* 提供唯⼀的 key 属性值
9. ⽣命周期
i. ⽣命周期各个阶段
ii. ⽣命周期钩⼦函数的触发条件与作⽤
10. swiper学习
11. ⾃定义组件的封装
⾃定义封装swiper组件（基于swiper）
注意：防⽌swipe初始化过早
三. 指令
1. ⾃定义指令
(1)⾃定义指令介绍 directives - 对普通 DOM 元素进⾏底层操作
(2)钩⼦函数
* 参数 el,binding,vnode,oldvnode
* bind,inserted,update,componentUpdated,unbind
(3)函数简写
(4)⾃定义指令-轮播
•inserted 插⼊最后⼀个元素时初始化swiper
2. nextTick
•this.$nextTick()
四.过滤器
全局写法
局部写法
可以串联
过滤器是 JavaScript 函数，因此可以接收参数
这⾥，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第⼀个参数，普通字符串 'arg1' 作为第⼆个参数，表达式 arg2 的值作为第三个参数。
五、.单⽂件组件
1.写法
a.
<template>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。