Vue怎么实现点点击按钮修改数据前后端接口怎么写。

首先，前端通过 Vue 绑定数据，当点击按钮时，调用 Vue 实例中的方法，通过 AJAX 请求修改后端接口数据。以下是一个简单的代码示例：

前端代码：

<template>
  <div>
    <p>原始数据：{{ data }}</p>
    <button @click="updateData">修改数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    }
  },
  methods: {
    updateData() {
      // 发送 AJAX 请求，修改后端接口数据
      axios.put('/api/data', { newData: 'new data' })
        .then(response => {
          // 修改成功后，更新前端绑定的数据
          this.data = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  mounted() {
    // 页面加载时，获取后端接口数据
    axios.get('/api/data')
      .then(response => {
        this.data = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

后端代码（假设使用 Node.js 和 Express）：

const express = require('express')
const app = express()

let data = '原始数据'

// 获取数据接口
app.get('/api/data', (req, res) => {
  res.send(data)
})

// 修改数据接口
app.put('/api/data', (req, res) => {
  data = req.body.newData
  res.send(data)
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

在这个示例中，前端页面加载时会先调用获取数据接口，获取后端接口的原始数据，并绑定到页面元素上。当点击修改数据按钮时，会调用修改数据接口，通过 AJAX 发送 put 请求，将新的数据传递给后端，后端接口接收到请求后，修改数据并返回修改后的数据。前端接收到修改后的数据后，更新绑定的数据，页面也会相应地更新。