写一个vue与flask交互的代码

可以的，以下是一个简单的 Vue 和 Flask 交互的代码示例：

Vue 代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  methods: {
    async getData() {
      const response = await fetch("http://localhost:500/data");
      const data = await response.json();
      this.message = data.message;
    },
  },
};
</script>

Flask 代码：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/data")
def get_data():
    data = {"message": "Hello, Vue!"}
    return jsonify(data)

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

这个代码示例演示了如何在 Vue 中使用 fetch 方法从 Flask 服务器获取数据，并将数据显示在页面上。在 Flask 服务器端，我们定义了一个路由 `/data`，当 Vue 组件调用这个路由时，Flask 服务器会返回一个 JSON 格式的数据，其中包含一个消息。在 Vue 组件中，我们使用 `async/await` 来处理异步请求，并将返回的数据显示在页面上。