前端入门学习：Vue学习笔记（二）_千锋教育vue笔记百度云

                    "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’})

**需要更多教程，微信扫码即可**


 ![](https://img-blog.csdnimg.cn/6ade99f981cd4927b9ee5bd0aa40fd14.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2D6ZSL5pWZ6IKy5a6Y5pa55Y2a5a6i,size_8,color_FFFFFF,t_70,g_se,x_16)


👆👆👆


****别忘了扫码领资料哦【******高清Java学习路线图******】****


****和****【各学科**********全套学习视频及配套资料********】******


 


 


### **2.axios**

axios.get(“”)
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.cfg.common-banner’
}
}).then(res=>{
console.log(res.data);
})
​
返回的数据会被包装
​
{
:
data:真实后端数据
}

### **二. 组件**


### **1. 虚拟dom与diff算法 key的作用**


![](https://img-blog.csdnimg.cn/img_convert/be3ef89fb94fa3132de7ed36dc36b721.png)


（1）把树按照层级分解


![](https://img-blog.csdnimg.cn/img_convert/607e52d2b082610d1b636e3e4196c53f.png)


(2) 同key值对比


![](https://img-blog.csdnimg.cn/img_convert/69dbb56b14d50829030c6be5124b2e8f.png)


(3) 同组件对比


![](https://img-blog.csdnimg.cn/img_convert/30f523817ebbd9a130cd1c6b5787ce50.png)


### **2. 为什么组件化**


扩展 HTML 元素，封装可重用的代码


### **3. 组件注册方式**


* a.全局组件


![](https://img-blog.csdnimg.cn/img_convert/79d1e33289e56a44f5b86839608610c4.png)


* b.局部组件


![](https://img-blog.csdnimg.cn/img_convert/c8cd4a47b9772ae22c4f83e1a91306d4.png)


### **4. 组件编写方式与Vue实例的区别**


\*自定义组件需要有一个root element


\*父子组件的data是无法共享


\*组件可以有data，methods,computed....,但是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.$refs.mytext`


v. 事件总线


`var bus = new Vue();`


\* mounted生命周期中进行监听


### **6. 动态组件**


* <component> 元素，动态地绑定多个组件到它的 is 属性
* <keep-alive> 保留状态，避免重新渲染


### **7. slot插槽 (内容分发)**


* 混合父组件的内容与子组件自己的模板-->内容分发
* 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。


a. 单个slot


b. 具名slot


![](https://img-blog.csdnimg.cn/img_convert/c401e6510f0e23664f812bc5eaec8da3.png)


注意 v-slot 只能添加在 template 上, 文本节点也可以当具名插槽内容插入


### **8. transition过渡**


Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。


(1)单元素/组件过渡


\* css过渡


\* css动画


\* 结合animate.css动画库


![](https://img-blog.csdnimg.cn/img_convert/a074938ef39c98f355e1dc179e3ba9d2.png)


(2) 多个元素过渡(设置key)


\*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。


`mode:in-out ; out-in`


(3)多个组件过渡


(4)列表过渡(设置key)


不同于 transition， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。


\* 提供唯一的 key 属性值


### **9. 生命周期**


i. 生命周期各个阶段


[https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA](https://bbs.csdn.net/topics/618166371)


ii. 生命周期钩子函数的触发条件与作用


![](https://img-blog.csdnimg.cn/img_convert/cf55b213709a3620215b25e15ee6bf04.png)


### **10. swiper学习**


[https://www.swiper.com.cn/](https://bbs.csdn.net/topics/618166371)


### **11. 自定义组件的封装**


自定义封装swiper组件（基于swiper）


注意： 防止swipe初始化过早



### **三. 指令**


### **1. 自定义指令**


(1)自定义指令介绍 directives - 对普通 DOM 元素进行底层操作


![](https://img-blog.csdnimg.cn/img_convert/81c6d795be21088b3284d52a49d0c7f4.png)


(2)钩子函数


\* 参数 el,binding,vnode,oldvnode


\* bind,inserted,update,componentUpdated,unbind


![](https://img-blog.csdnimg.cn/img_convert/432bffa0527ef041e2742c49fd0a8228.png)


(3)函数简写


(4)自定义指令-轮播


* inserted 插入最后一个元素时初始化swiper


### **2. nextTick**


![](https://img-blog.csdnimg.cn/img_convert/23b1e67305bbe38d5527392cb8dbe26b.png)


* this.$nextTick()



### **四.过滤器**


[https://cn.vuejs.org/v2/guide/filters.html](https://bbs.csdn.net/topics/618166371)


![](https://img-blog.csdnimg.cn/img_convert/55bbfc576f0637e71377bbb068fe1c55.png)


**全局写法**


![](https://img-blog.csdnimg.cn/img_convert/8cd0962f45e2306abf4be2bda03cde34.png)


**局部写法**



![](https://img-blog.csdnimg.cn/img_convert/07b081274b18a71e1ff3c9d579122b66.png)


**可以串联**


![](https://img-blog.csdnimg.cn/img_convert/df4c5e2a236e5fe6764de39006b6b6d8.png)


**过滤器是 JavaScript 函数，因此可以接收参数**


![](https://img-blog.csdnimg.cn/img_convert/ff4d4f78e152b12604037af529435ca6.png)


这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。




### **五、.单文件组件**


### **1.写法**


[https://cn.vuejs.org/v2/guide/single-file-components.html](https://bbs.csdn.net/topics/618166371)

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

https://cn.vuejs.org/v2/guide/single-file-components.html

## 算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中...(img-mpUQRRWE-1714179992022)]

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**