Vue与后端交互、生命周期

发布时间:2024年01月10日

一:Axios

1.简介

① Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
② axios官网:axios中文网|axios API 中文文档 | axios

2.实例

json文件:film.json(这里只是一部分,原代码太多了...)
https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying
后端:main.py
import json

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/film')
def index():
    print('请求来了')
    with open('film.json', mode='rt', encoding='utf-8') as f:
        dic = json.load(f)
    res = jsonify(dic)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res


if __name__ == '__main__':
    app.run()
前端:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<body>

<div id="box">
    <button @click="handleClick">加载电影数据</button>
    <p>加载的数据:</p>
    <ul>
        <li v-for="item in dataList">
            <p>电影:{{item.name}}</p>
            <p>导演:{{item.director}}</p>
            <img :src="item.poster" alt="">
        </li>

    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            dataList: []
        },
        methods: {
            handleClick() {
                axios.get("http://127.0.0.1:5000/film/").then(res => {
                    console.log(res.data.data.films) // axios 自动包装data属性 res.data
                    this.dataList = res.data.data.films
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    })
</script>
</html>

img

三:计算属性

计算属性是基于它们的依赖进行缓存的

计算属性只有在它的相关依赖发生改变时才会重新求值

计算属性就像Python中的property,可以把方法/函数伪装成属性

1.通过计算属性实现名字首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字母大写</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <!--大段的代码写在这里不好,使用计算属性-->
    模板插值:
    {{myText.substring(0,1).toUpperCase()+myText.substring(1)}}
    <p>普通方法:{{getNameMethod()}}</p>
    <!--区别是在同一个页面中使用多次计算属性,不会多次执行-->
    <p>计算属性:{{getName}}</p>
    <!--普通方法要加括号-->

</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: 'darker',
        },
        computed: {
            getName() { // 依赖的状态改变了,会重新计算
                return this.myText.substring(0, 1).toUpperCase() + this.myText.substring(1)
            }
        },
        methods: {
            getNameMethod() {
                return this.myText.substring(0, 1).toUpperCase() + this.myText.substring(1)
            }
        }
    })
</script>
</html>

img

2.通过计算属性重写过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过计算属性重写过滤案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <p><input type="text" v-model="myText" placeholder="请输入要筛选的内容:"></p>
    <ul>
        <li v-for="data in newList">{{data}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },
        computed: {
            newList() {
                return this.dataList.filter(item => {
                    return item.indexOf(this.myText) > -1   // 返回索引大于1的元素:>-1 就表示包含在其中
                })
            }
        }
    })
</script>
</html>

img

四:虚拟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算法

img

虚拟DOM数据渲染图示

img

3.具体实现

① 把树按照层级分解

img

② 按照key值比较

img

③ 通过组件进行比较

img

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

?

img

3.我理解的图

img

二:生命周期

钩子函数描述
beforeCreate创建Vue实例之前调用
created创建Vue实例成功后调用(可以在此处发送异步请求后端数据)
beforeMount渲染DOM之前调用
mounted渲染DOM之后调用
beforeUpdate重新渲染之前调用(数据更新等操作时,控制DOM重新渲染)
updated重新渲染完成之后调用
beforeDestroy销毁之前调用
destroyed销毁之后调用

create

let vm = new Vue()

mount

挂载,把div挂载到组件中

img

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})

1.bedoreCreate

2.created

3.beforeMount

4.mounted(用得最多)

这时候可以向后端发送数据了

5.beforeUpdate

6.updated

7.beforeDestroy

8.destroyed

组件销毁 - 给组件写一个定时器

setTimeout()    // 延迟3s干什么事
setInterval()    // 延迟3s干什么事

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
    <br>
    <button @click="terminate">删除子组件</button>
    <button @click="reborn">显示子组件</button>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
            <div>
                {{name}}
                <button @click="name='Darker1'">更新数据1</button>
                <button @click="name='Darker2'">更新数据2</button>
            </div>`,
        data() {
            return {
                name: 'Darker1',
            }
        },
        beforeCreate() {
            console.group('当前状态:beforeCreate')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        created() {
            console.group('当前状态:created')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        beforeMount() {
            console.group('当前状态:beforeMount')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        mounted() {
            console.group('当前状态:mounted')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        beforeUpdate() {
            console.group('当前状态:beforeUpdate')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        updated() {
            console.group('当前状态:updated')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        beforeDestroy() {
            console.group('当前状态:beforeDestroy')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        destroyed() {
            console.group('当前状态:destroyed')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },


    })
    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        },
        methods: {
            terminate() {
                this.isShow = false
            },
            reborn() {
                this.isShow = true
            }
        }
    })
</script>
</html>
文章来源:https://blog.csdn.net/m0_71115526/article/details/135512556
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。