Vue与后端交互、生命周期

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

    
    
    
    




    加载电影数据
    
加载的数据：
    

        

            
电影：{{item.name}}
            
导演：{{item.director}}
            
        

    

三：计算属性

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

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

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

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

    
    
    



    
    模板插值：
    {{myText.substring(0,1).toUpperCase()+myText.substring(1)}}
    
普通方法：{{getNameMethod()}}
    
    
计算属性：{{getName}}
    

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

    
    
    



    

    

        
{{data}}
    

四：虚拟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值比较

③ 通过组件进行比较

    
111
    
222
    

    
111
    
222
    

 

3.我理解的图

二：生命周期

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

create

let vm = new Vue()

mount

挂载，把div挂载到组件中

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干什么事

测试代码

    
    
    



    
    

    删除子组件
    显示子组件