vue.js.3

Posted 2022-08-15 zhangzhouy

目的： 是在框架中使用数据请求

回顾：

1. 封装ajax

   2. jquery 【 $$.get $$ .post $$.ajax $$ .load 】

框架：

数据请求

1. 使用原生js提供的fetch

2. 使用第三方封装库： axios

   • Vue中可以统一对axios进行挂载

     Vue.prototype.$http = axios

3. fetch vs axios

   • axios 对已获得的数据进行了一层封装 XSRF

     • axios底层自动对数据进行了格式化

   • fetch并没有进行封装，拿到就是格式化后的数据

     • fetch进行了多一层的格式化

     • res.json()

     • res.blob() 格式化二进制

     • res.text()　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

       计算属性 computed

        

       使用： 1.在选项中定义一个computed 属性，属性值是一个对象，对象中存储都是方法，这些方法必须有返回值

       \2. 在vm实例范围内，直接当做全局变量一样使用这个方法名称

       \3. 注意，方法名后不加 （）

        

       总结： methods vs computed vs watch

       • 项目中如何使用

         • 1. 事件处理程序： methods

         • 2. watch

              有大量数据交互和异步处理时进行

         • 3. computed

              • 有逻辑处理

              • V中像全局变量一样使用

       　　　　　　　　　　　　　　

       组件

       1. 了解前端组件化发展历史

          • 前后端耦合

            • 前后端不分离项目

              • 1. 找后台搭建项目开发环境

              • 2. 寻找项目目录中的静态资源目录

                   • js

                   • img

                   • css

              • 3. 同步修改css

          • 前后端分离

          • 前端团队合作项目的出现

            • 组件化为了解决多人协作冲突问题

            • 复用

       2. 组件的概念

          • 组件是一个html 、 css 、js 、img 等的一个聚合体

       3. Vue中的组件属于扩展性功能

          • 通过 Vue.extend() 来扩展的