vue3+scss+axios,ajax,promise

zhenryx

已于 2024-10-20 20:42:29 修改

阅读量1.9k

点赞数 54

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： vue.js 前端 javascript

于 2024-08-13 15:17:12 首次发布

本文链接：https://blog.csdn.net/m0_63324578/article/details/140531754

vue2:选项式开发模式 vue3:组合式开发模式和选项式开发模式

利用vite创建vue3项目

npm create vite@latest

这是我的选项:

1.响应式数据

ref:定义基本类型响应式数据

ref和reactive均可定义对象类型的响应式数据

ref:

reactive:

vue2使用的是object.defineproperty实现响应式,vue3则是proxy实现响应式

2.computed

3.watch(需要明确指出监视的数据)

作用:监视数据的变化

只能监听以下四种数据:

①ref定义的数据

ref定义的基本类型的数据

ref定义的对象类型的数据:监视的是对象的地址值,若想监听对象内部属性的变化,需要手动开启深度监视(deep:true)

②reactive定义的对象类型数据:默认开启深度监视,无法关闭

③函数返回一个值(getter函数)

④一个包含上述内容的数组

4.watchEffect(不用明确指出监视的数据,响应式地追踪其依赖)

watchEffect与computed
watchEffect与computed有点像：

但是computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

computed若是值没有被使用时不会调用，但是watchEffect始终会调用一次

5.标签的ref属性

对于html标签:取dom元素

对于组件:取组件实例对象

6.props的使用(传值)

defineProps

7.生命周期(组件一生)[生命周期,生命周期函数,生命周期钩子]

组件的生命周期:特定的时刻调用特定的函数

vue2:4个阶段,8个钩子:

创建(创建前beforeCreate(),创建完毕created())

挂载(挂载前beforeMount(),挂在完毕mounted())

更新(更新前beforeUpdate(),更新完毕updated())

销毁(销毁前beforeDestroy(),销毁完毕Destroyed())

vue3:4个阶段,7个钩子:

创建(setup)

挂载(挂载前onBeforeMount(()=>{}),挂在完毕onMounted(()=>{}))

更新(更新前onBeforeUpdate(()=>{}),更新完毕onUpdated(()=>{}))

卸载(卸载前onBeforeUnmount(()=>{}),销毁完毕onUnmount(()=>{})

8.axios(涉及promise和ajax知识补充)

API:API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。——百度百科

补充:XML(可扩展标记语言,存储和传输数据,现被json取代)而 HTML是呈现数据.

Ajax全称:Asynchronous JavaScript and XML（异步的JavaScript和XML）

Ajax特点:在网页不刷新的情况下,向服务端发起http请求,然后得到http响应.(登陆页面不刷新显示账号情况,百度搜索某内容会出现对应相关内容,商品二级目录交互显示一级目录等)

http:超文本传输协议（英文：Hyper Text Transfer Protocol)

请求报文：从客户端发往服务器的报文。
响应报文：服务器收到请求报文后，作为响应发往客户端的报文文。

注:CR:回车 LF:换行

请求报文举;例格式:

http://www/xyz.edu.cn/dir/index.htm

GET /dir/index.htm HTTP/1.1

HOST:www/xyz.edu.cn //给出主机域名

Connection:close //告诉服务器发送完请求文档就可以释放连接

User=Agent:Mozilla/5.0 //表示用户代理使用的是火狐浏览器firefox

Accept-Language:cn //表示用户希望优先得到的是中文版本的文档

响应报文中:

#头部举例

HTTP/1.1 202 Accpted

HTTP/1.1 400 Bad Request

HTTP/1.1 404 Not Found

#常见头部(headers)

HTTP报文之"请求报文"和"响应报文"详解_请求报文是什么意思-CSDN博客

(空行)

#体(响应体)

<html>
<body>
<h1>Hello, World</h1>
</body>
</html>

网页中查看报文:

express框架:(学习Ajax)

#安装工具包 npm install -g nodemon

引入xmlhttprequest: XMLHttpRequest 详解_xmlrequest-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px blue;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result" ></div>
</body>
<script>
    const btn=document.getElementsByTagName('button')[0];
    const result=document.getElementById('result')
    btn.onclick=function (){
        const xhr=new XMLHttpRequest();
        xhr.open('GET','http://127.0.0.1:8000/server');
        xhr.send(),
        //xhr.setRequestHeader()请求头内容
        xhr.onreadystatechange=function(){
            //0未初始化 1open方法调用完毕 2send方法调用完毕
            //3服务端返回部分接口 4服务端返回所有接口
            if(xhr.readyState===4){
                if(xhr.status>=200&&xhr.status<300){
                    // console.log(xhr.status);//状态码
                    // console.log(xhr.statusText);//状态码文本
                    // console.log(xhr.getAllResponseHeaders)//响应头
                    // console.log(xhr.response)//响应体
                    result.innerHTML=xhr.response
                }
            }
        }
    }
</script>
</html>

const express = require('express')
const app = express();
app.all('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('this body')
});//all->get,post,option
app.listen(8000,()=>{
    console.log("suceess8000,watching")
})

在ajax中传递参数: