157-vue03-fetch&axios向后端发送请求,计算属性和虚拟dom_vue3 fetch 请求转发

作者：IT小白 | 2024-03-17 17:34:11

踩

vue3 fetch 请求转发

昨日回顾

0 style和class
	-数据绑定 :属性名='js变量/js语法'
	-class:三目运算符、数组、对象{red:true}
	-style:三目运算符、数组[{background:'red'},]、对象{background:'red'}
1 条件控制
	v-if(v-show)
	v-else-if='js变量'
	v-else
3 列表渲染
	v-for='data in 4'
4 数组的检测与更新
	数组/对象数据变化以后,页面没有变化,Vue.set(对象,位置/key,value)
5 简单事件
	@click='函数名'
	@click='函数名()'
	@click='函数名(a,b)'
	@click='函数名($event)'
6 事件之数据过滤小案例
7 事件修饰符
	blur
	change
	input
8 按键修饰符
	@keyup.13
9 v-model数据双向绑定
	v-model:input
10 购物车小案例
11 购物车案例之全新,全不选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

今日内容

0.1 购物车增减功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <input type="checkbox" v-model="isAll" @change="handleChange">全选/取消
    <ul>

        <li v-for="data in datalist"><input type="checkbox" v-model="checklist" :value="data" @change="handleOne">{{data}}
            ｜
            <button @click="handleJ(data)">-</button>
            {{data.num}}
            <button @click="data.num++">+</button>
        </li>
    </ul>
    <hr>
    {{checklist}}
    <br>
    total:{{totalPrice()}}


</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',

        data: {
            isAll: false,
            datalist: [
                {name: 'apple', price: 12, num: 1},
                {name: 'banana', price: 19, num: 3},
                {name: 'peach', price: 6, num: 5},
            ],
            checklist: [],
        },
        methods: {
            totalPrice() {
                var sum_price = 0
                for (i in this.checklist) {
                    sum_price += this.checklist[i]['price'] * this.checklist[i]['num']
                }
                return sum_price
            },
            handleChange() {
                if (this.checklist.length > 0) {
                    this.checklist = []
                } else {
                    this.checklist = this.datalist
                }
            },
            handleOne() {
                if (this.checklist.length == this.datalist.length) {
                    this.isAll = true
                } else {
                    this.isAll = false
                }
            },
            handleJ(item) {
                console.log(item)
                if (item.num <= 1) {
                    item.num = 1
                } else {
                    item.num--
                }
            }
        }
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

1 v-model之lazy,number,trim

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="box">
    <input type="text" v-model.lazy="mytext">||{{mytext}}
    <br>
    <input type="number" v-model.number="mynumber">||{{mynumber}}
    <br>
    <input type="text" v-model.trim="mytrim">||{{mytrim}}||
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
           mytext:'',
           mynumber:'',
           mytrim:'',

        },
    })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2 fetch和axios向后端发送请求

与后端交互数据,首先使用flask发送数据

from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    res = make_response('hello world')
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res


if __name__ == '__main__':
    app.run()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.1 jq的ajax实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
   <button @click="handleClick">点我加载美女数据</button>
    美女你好：{{mytext}}
</div>
</body>
<script>
    var myajax=$
    var vm = new Vue({
        el: '#box',
        data: {
            mytext:'',
        },
        methods:{
            handleClick(){
                myajax.ajax({
                    url:'http://127.0.0.1:5000/',
                    method:'get',
                    success: (data)=> {
                        console.log(data)
                        this.mytext=data
                    }
                })
            }
        }

    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

2.2 fetch实现

fetch（不是所有浏览器都支持，谷歌浏览器支持）
XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。兼容性不好
polyfill: https://github.com/camsong/fetch-ie8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="box">
    <button @click="handleClick">点我加载美女数据</button>
    从后端加载的数据：
    <br>
    用户名：{{name}}
    <br>
    年龄：{{age}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: '',
            age:''
        },
        methods: {
            handleClick() {
                fetch('http://127.0.0.1:5000/').then(response => {
                    return response.json()
                }).then(json => {
                    console.log('从后端获取的json数据', json)
                    this.name=json.name
                    this.age=json.age

                }).catch(ex => {
                    console.log('出异常', ex)
                })
            }
        }
    })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

from flask import Flask,make_response,jsonify
app=Flask(__name__)

@app.route('/')
def index():
    res=jsonify({'name':'lqz','age':18})
    # 这两行代码处理跨域
    res=make_response(res)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res
if __name__ == '__main__':
    app.run()
1
2
3
4
5
6
7
8
9
10
11
12

2.3 axios(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Title</title>
</head>
<body>
<div id="box">
    <button @click="handleClick">点我加载电影数据</button>
    <ul>
        <li v-for="item in datalist">
            <p>电影名：{{item.name}}</p>
            <p>导演：{{item.director}}</p>
            <img :src="item.poster">
        </li>
    </ul>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist:[],
        },
        methods: {
            handleClick() {
                 axios.get("http://127.0.0.1:5000/film").then(res=>{
                    console.log(res.data)
                     if(res.data.status==0){
                        this.datalist=res.data.data.films
                     }
                })

            }
        }

    })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

from flask import Flask, make_response, jsonify
import json
app = Flask(__name__)

@app.route('/film')
def film():
    with open('film.json', 'rt', encoding='utf-8') as f:
        dic = json.load(f)
    res = jsonify(dic)

    # 这两行代码处理跨域
    res = make_response(res)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res

if __name__ == '__main__':
    app.run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3 计算属性

3.1 通过计算属性来实现人名首字母大写

1 直接再{{}}中写js代码       html中尽量少写jsdiamond
2 使用函数  {{函数()}}       使用多次会执行多次
3 使用计算属性               当作变量来使用，多次使用只会执行一次
1
2
3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <p>{{name}}</p>
    <p>{{name.substring(0,1).toUpperCase()+name.substring(1)}}</p>
    <!--    <p>{{upperName()}}</p>-->
    <!--    <p>{{upperName()}}</p>-->
    <!--    <p>{{upperName()}}</p>-->

    <p>{{getName}}</p>
    <p>{{getName}}</p>
    <p>{{getName}}</p>
    <p>{{getName}}</p>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: 'asdfasdf'
        },
        methods: {
            upperName() {
                console.log('我执行了')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        },
        computed: {
            getName() {
                console.log('我执行了')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            },
        }

    })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

3.2 通过计算属性重写过滤小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <input type="text" v-model="myinput" @input="handleChange">   {{myinput}}
    <br>
    <div>
        <p v-for="data in new_arr">{{data}}</p>
    </div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput:'',
            arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
        },
        computed:{
            new_arr(){
                return this.arr.filter(item=>{
                    return item.indexOf(this.myinput) >-1
                })
            }
        }

    })

</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

4 虚拟dom与diff算法 key的作用

1 vue有虚拟dom，跟真实dom做替换，使用的算法是diff算法
2 几种方案
	-分层级比较
    -同key值比较（循环中尽量加key）
    -组件或标签的比较去替换
1
2
3
4
5

详细:
https://segmentfault.com/a/1190000020170310

5 组件化开发基础

1 组件是什么
	扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有html
2 分类
	-全局组件
    -局部组件
3 工程化以后
	一个组件就是一个  xx.vue
    
4 element ui 其实就是写了一堆好看的组件，以后我们直接拿过来用就可以了
1
2
3
4
5
6
7
8
9
10
11

5.1 定义全局组件并使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">

    <div @click="handleClick">我是根组件的div</div>
    <child></child>
    <ul>
        <li v-for="i in 4">{{i}}</li>
    </ul>
    <div>
        <child></child>
    </div>



</div>


</body>
<script>
    //创建组件对象(全局组件)
    Vue.component('child', {
        template: `
            <div>
                <div style="background: red" @click="handleClick">我是头部</div>
                <div v-if="isShow">显示消失</div>
            </div>
        `,
        methods:{
            handleClick(){
                console.log('我被点击了')
                this.isShow=!this.isShow
            }
        },
        data(){
            return {
                isShow:true
            }
        },
    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow:true,
        },
        methods:{
              handleClick(){
                console.log('根组件我被点击了')
            }
        }

    })


</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

什么是跨域问题以及如何解决？

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/257259?site