Vue之后端交互、计算、监听、组件间通信-JZTXT

一、与后端交互三种方式

1、

2、

3、

4、小电影案例

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <button @click="handleLoad">点我，加载小电影</button>
    <hr>
    <ul>
        <li v-for="item in dataList">
            <h3>电影名字：{{item.name}}</h3>
            <h3>导演：{{item.director}}</h3>
            <p>电影介绍：{{item.synopsis}}</p>
            <p><img :src="item.poster" alt="" height="300px"></p>
        </li>
    </ul>
    
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            dataList: []
        },
        methods: {
            handleLoad() {
                axios.get('http://127.0.0.1:5000/films').then(res => {
                    console.log(res.data)
                    this.dataList = res.data.data.films
                })
            }
        }
    })

</script>
</html>

flask 后端：

import json

from flask import Flask, jsonify

app = Flask(__name__)


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

    res = jsonify(res)
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


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

原生django：

import json
from django.http import HttpResponse, JsonResponse

def films(request, *args, **kwargs):
    with open('filme.json', 'rt', encoding='utf-8') as f:
        result = json.load(f)
    res = {'code': 100, 'msg': '查询成功', 'result': result}
    aa = JsonResponse(res)
    aa['Access-Control-Allow-Origin'] = '*'
    return aa

JZTXT

Vue之后端交互、计算、监听、组件间通信

一、与后端交互三种方式

二、计算属性

三、监听(侦听)属性

四、ref属性

五、Vue生命周期

六、组件介绍和使用

七、组件间通信