VUE3前端学习

vue3新特性：

组合式API；

更好支持TypeScript；

状态存储框架Pinia

1.package.json运行scripts脚本，里面的build打包文件

2.都是在index.html这一个单页面进行交互，也就是SPA(Single Page Application)

• 在main.ts通过createApp函数创建一个应用实例，在实例中构建各种应用
• (.vue)文件是组件 / 页面(包含\</ template>模板，\</ script>脚本，\</ style>样式)

3.数据双向绑定

在script export方法，返回对象，在template绑定v-?,如：{{userName}}

绑定事件改变值v-，但要写方法methods

vue文件.jpg

4.网络请求

• 原生ajax：创建XMLHttpRequest() ,通过xhr的方法去配置以及发送；open方法开启发送请求功能，send方法发送出去 用omreadystatechange事件去接收响应，状态改变会触发事件 若想把json字符串转成JavaScript对象用JSON.parse(xhr.responseText),get只能发纯文本数据； post可以携带请求头:xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
• axios(请求发送库) 提供axios对象，get发送请求时若带参数params: {}是参数，post的话不用写params，直接写出来；baseurl帮我们做拼接

(async () =>{
const ins = axios.create({
baseURL:'http://wuyou.com/common'
})
//请求拦截器处理
ins.interceptors. request.use (config=>{
    console.log（发送了请求）
    return config
})
const res1 = await ins.get('/get',{
    params:
        name:‘吴悠'，I
        age: 18
    }
})
const res2 = await ins.post('/post',{
    name：'吴悠'，
    age: 18
})

• Fetch API用来代替ajax的操作

fetch('http://wuyou.com/common/post',{
    method:'PoST',
    headers:{
        'Content-Type':'application/json'
    },
    body: JSON.stringify({
        name：'吴悠'，
        age: 18
    })
    .then(res =>{
        if（res.ok){
            return res.json()
        }
    })
    .then(data =>{
        console. log(data)
    })