前端入门学习：Vue学习笔记（二）

向右看齐 2023-10-06 15:56 3阅读 0赞

### **一. 数据请求** ###

### **1. fetch** ###

#### **why** ####

*  XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，
 *  而且基于事件的异步模型写起来不友好。
 *  兼容性不好

#### **polyfill** ####

//https://github.com/camsong/fetch-ie8
    
    
        //get
            fetch("**").then(res=>res.json()).then(res=>{console.log(res)})
            fetch("**").then(res=>res.text()).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.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的作用** ###

![b0047d06572347748662548a2bc9467a.png][]

（1）把树按照层级分解

![3ce1532406364ba8810f7d9c61bc339c.png][]

(2) 同key值对比

![4367dd5bc1cf4d608c305e20bf12974a.png][]

(3) 同组件对比

![30f523817ebbd9a130cd1c6b5787ce50.png][]

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

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

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

*  a.全局组件

![18da734a93ef4c229b8c5baf260b3b51.png][]

*  b.局部组件

![dd6635702e9241c881bfce02f3447f5c.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

![17986e9840004d9a83b31e5a050c0717.png][]

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

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

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

(1)单元素/组件过渡

\* css过渡

\* css动画

\* 结合animate.css动画库

![d3b287fbb10d49ee88e34aee684299fe.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

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

![cbf5b99d4af84b87986b18876d27d9c5.png][]

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

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

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

注意： 防止swipe初始化过早

https://www.swiper.com.cn/

### **三. 指令** ###

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

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

![6bbfe7d16170456680c7146c3d26a356.png][]

(2)钩子函数

\* 参数 el,binding,vnode,oldvnode

\* bind,inserted,update,componentUpdated,unbind

![857d0ff5939340c4a1448865dffbada3.png][]

(3)函数简写

(4)自定义指令-轮播

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

### **2. nextTick** ###

![a447b6f5861748528190eaf91812e4b0.png][]

*  this.$nextTick()

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

[https://cn.vuejs.org/v2/guide/filters.html][https_cn.vuejs.org_v2_guide_filters.html]https://cn.vuejs.org/v2/guide/filters.html

![9c4309da8e0f451cab071add78e8fc6e.png][]

**全局写法**

![f3ca07ef56554e379d6dc57c247d1fab.png][]

**局部写法**

![9e27fec2d1a346fab80b17cb3220aeb7.png][]

**可以串联**

![df4c5e2a236e5fe6764de39006b6b6d8.png][]

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

![ff4d4f78e152b12604037af529435ca6.png][]

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

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

### **1.写法** ###

[https://cn.vuejs.org/v2/guide/single-file-components.html][https_cn.vuejs.org_v2_guide_single-file-components.html]https://cn.vuejs.org/v2/guide/single-file-components.html

a.
        <template>
             html代码
        </template> 
        <script>
            js代码
        </script>
        <style>
            css代码
        </style>
    b.
        <template>
            html代码
        </template>
        <script src="相对路径的外部的js"></script>
        <style src="相对路径的外部的css"></style>

### **2.vue-cli3.0的使用** ###

npm install -g @vue/cli (一次安装)

vue create myapp

\*npm run serve 开发环境构建

\*npm run build 生产环境构建

\*npm run lint 代码检测工具

style标签 加上scoped属性，css局部生效 style标签 加上lang="scss"，支持scss

### **3. Vue.config.js的配置** ###

(1) proxy代理

[https://cli.vuejs.org/zh/config/\#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE][https_cli.vuejs.org_zh_config_E5_85_A8_E5_B1_80-cli-_E9_85_8D_E7_BD_AE]

devServer: {
           port:8000, //随便改端口号
           proxy: {
                '/api': {
                    target: 'https://*.*.com',
                    host: '*.*.com',
                    changeOrigin:true
                }
          }
         }

(2) alias别名配置

`@ is an alias to /src`

(3) vue.config.js 中配置 publicPath: './'

(4)关闭eslint

vue.config.js lintOnSave: false

.eslintrc 删除 '@vue/standard' （对于某个规则关闭， no-new:"off" ）

![1ce1229a100b4979aff495be1dd53cd3.png][]

### **4. 利用vue cli进行组件化开发** ###

迁移todolist、swiper案例到vue cli中

### **六. 路由开发** ###

### **1. SPA概念** ###

![de61ddcabde6da44b8e0d6eb1a81f6ca.png][]

**2.vue-router**

*  开始

*  动态路由匹配
 *  嵌套路由
 *  编程式导航 (js跳转) vs 声明式导航<router-link>
 *  命名路由
 *  重定向和别名

![493a9b2c9d7f4077a0bbeee8450c97d2.png][]

![4d20e38041604336b158184bf1a160e6.png][]

*  HTML5 History模式

vue支持两种模式

a. hash \#/home

b. history /home

*  路由守卫&路由拦截

全局拦截

单个拦截

*  路由懒加载

![179e6db149c84f3096cae4802162441f.png][]

### **3. 路由原理** ###

(1)hash路由 ==> location.hash 切换

window.onhashchange 监听路径的切换

(2)history路由==> history.pushState 切换

window.onpopstate 监听路径的切换

### **4. 项目** ###

(1) 启动案例项目开发

(2) 利用vue-router搭建项目SPA结构

[b0047d06572347748662548a2bc9467a.png]: https://img-blog.csdnimg.cn/b0047d06572347748662548a2bc9467a.png
[3ce1532406364ba8810f7d9c61bc339c.png]: https://img-blog.csdnimg.cn/3ce1532406364ba8810f7d9c61bc339c.png
[4367dd5bc1cf4d608c305e20bf12974a.png]: https://img-blog.csdnimg.cn/4367dd5bc1cf4d608c305e20bf12974a.png
[30f523817ebbd9a130cd1c6b5787ce50.png]: https://img-blog.csdnimg.cn/img_convert/30f523817ebbd9a130cd1c6b5787ce50.png
[18da734a93ef4c229b8c5baf260b3b51.png]: https://img-blog.csdnimg.cn/18da734a93ef4c229b8c5baf260b3b51.png
[dd6635702e9241c881bfce02f3447f5c.png]: https://img-blog.csdnimg.cn/dd6635702e9241c881bfce02f3447f5c.png
[17986e9840004d9a83b31e5a050c0717.png]: https://img-blog.csdnimg.cn/17986e9840004d9a83b31e5a050c0717.png
[d3b287fbb10d49ee88e34aee684299fe.png]: https://img-blog.csdnimg.cn/d3b287fbb10d49ee88e34aee684299fe.png
[cbf5b99d4af84b87986b18876d27d9c5.png]: https://img-blog.csdnimg.cn/cbf5b99d4af84b87986b18876d27d9c5.png
[6bbfe7d16170456680c7146c3d26a356.png]: https://img-blog.csdnimg.cn/6bbfe7d16170456680c7146c3d26a356.png
[857d0ff5939340c4a1448865dffbada3.png]: https://img-blog.csdnimg.cn/857d0ff5939340c4a1448865dffbada3.png
[a447b6f5861748528190eaf91812e4b0.png]: https://img-blog.csdnimg.cn/a447b6f5861748528190eaf91812e4b0.png
[https_cn.vuejs.org_v2_guide_filters.html]: https://link.zhihu.com/?target=https%3A//cn.vuejs.org/v2/guide/filters.html
[9c4309da8e0f451cab071add78e8fc6e.png]: https://img-blog.csdnimg.cn/9c4309da8e0f451cab071add78e8fc6e.png
[f3ca07ef56554e379d6dc57c247d1fab.png]: https://img-blog.csdnimg.cn/f3ca07ef56554e379d6dc57c247d1fab.png
[9e27fec2d1a346fab80b17cb3220aeb7.png]: https://img-blog.csdnimg.cn/9e27fec2d1a346fab80b17cb3220aeb7.png
[df4c5e2a236e5fe6764de39006b6b6d8.png]: https://img-blog.csdnimg.cn/img_convert/df4c5e2a236e5fe6764de39006b6b6d8.png
[ff4d4f78e152b12604037af529435ca6.png]: https://img-blog.csdnimg.cn/img_convert/ff4d4f78e152b12604037af529435ca6.png
[https_cn.vuejs.org_v2_guide_single-file-components.html]: https://link.zhihu.com/?target=https%3A//cn.vuejs.org/v2/guide/single-file-components.html
[https_cli.vuejs.org_zh_config_E5_85_A8_E5_B1_80-cli-_E9_85_8D_E7_BD_AE]: https://link.zhihu.com/?target=https%3A//cli.vuejs.org/zh/config/%23%25E5%2585%25A8%25E5%25B1%2580-cli-%25E9%2585%258D%25E7%25BD%25AE
[1ce1229a100b4979aff495be1dd53cd3.png]: https://img-blog.csdnimg.cn/1ce1229a100b4979aff495be1dd53cd3.png
[de61ddcabde6da44b8e0d6eb1a81f6ca.png]: https://img-blog.csdnimg.cn/img_convert/de61ddcabde6da44b8e0d6eb1a81f6ca.png
[493a9b2c9d7f4077a0bbeee8450c97d2.png]: https://img-blog.csdnimg.cn/493a9b2c9d7f4077a0bbeee8450c97d2.png
[4d20e38041604336b158184bf1a160e6.png]: https://img-blog.csdnimg.cn/4d20e38041604336b158184bf1a160e6.png
[179e6db149c84f3096cae4802162441f.png]: https://img-blog.csdnimg.cn/179e6db149c84f3096cae4802162441f.png