Day 04 Vue--前后端交互--方法

最新推荐文章于 2023-04-06 21:56:50 发布

A1L__

最新推荐文章于 2023-04-06 21:56:50 发布

阅读量233

点赞数

分类专栏： Vue 文章标签： vue dom javascript

本文链接：https://blog.csdn.net/A1L__/article/details/111301523

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Day 04 Vue–前后端交互–方法

一、fetch

vue项目跟后端交互，可以使用ajax

1、使用jquery的ajax实现

1.1 html

<!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 python后端

这是一个基于flask框架的小app 主要是

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()

2、fetche向后端发送请求

2.1 vue前端

<!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>

2.2 python后端

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()

二、axios

1、html

<!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>

2、python后端

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 直接再 {{}} 中写js代码 html中尽量少写js代码
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>

3.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="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>

四、虚拟DOM 与diff算法 key的作用

1.Vue2.0 v-for 中 :key 有什么用呢？

其实呢不只是vue，react中在执行列表渲染时也会要求给每个组件添加key这个属性

key简单点来说就是唯一标识，就像ID一样唯一性

要知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面

而隐藏在背后的原理便是其高效的Diff算法

分层级比较：只做同层级的对比
通过key值比较：出现新的key就插入同组（循环中，尽量加key，让key值唯一）
通过组件/标签进行比较：然后进行替换

2.虚拟DOM的diff算法

虚拟DOM数据渲染图示

3.具体实现

① 把树按照层级分解

② 按照key值比较

③ 通过组件进行比较

<div id="box">
    <div v-if="isShow">111</div>
    <p v-else>222</p>
    <!--    
    {tag:div,value:111}
    {tag:p,value:222}
    直接不比较，直接删除div，新增p
    -->

    <div v-if="isShow">111</div>
    <div v-else>222</div>
    <!--    
    {tag:div,value:111}
    {tag:div,value:222}
    比较都是div，只替换文本内容
    -->
</div>

A1L__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day 04 Vue--前后端交互--方法

Day 04 Vue–前后端交互–方法一、fetchvue项目跟后端交互，可以使用ajax1、使用jquery的ajax实现1.1 html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
复制链接

扫一扫

专栏目录