yii2.0如何使用vue和后端PHP交互

在Yii2.0中使用Vue和后端PHP进行交互的步骤如下：

在Yii2.0项目中引入Vue相关的JS和CSS文件，可以使用CDN或本地文件，例如：

// 在视图文件中引入Vue.js文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

// 在视图文件中引入axios.js文件（用于发送HTTP请求）
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

在Yii2.0中编写接口方法，用于处理前端发送的请求并返回相应的数据。例如：

namespace app\controllers;

use yii\web\Controller;
use Yii;

class ApiController extends Controller
{
    public function actionGetData()
    {
        // 从请求参数中获取需要查询的数据
        $id = Yii::$app->request->get('id');

        // 根据$id查询数据
        $data = ['id' => $id, 'name' => 'Tom', 'age' => 20];

        // 将查询结果以JSON格式返回给前端
        return json_encode($data);
    }
}

在Vue中发送HTTP请求，并处理返回的数据。例如：

<template>
  <div>
    <h2>用户信息</h2>
    <p>ID：{{userInfo.id}}</p>
    <p>姓名：{{userInfo.name}}</p>
    <p>年龄：{{userInfo.age}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    // 发送HTTP请求获取用户信息
    axios.get('/api/get-data', { params: { id: 123 } })
      .then(response => {
        // 将返回的JSON数据转换为JavaScript对象，并保存到组件的data中
        this.userInfo = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

在上述代码中，Vue使用axios发送HTTP GET请求，请求地址为/api/get-data，并在请求参数中传递需要查询的数据ID。后端PHP代码通过Yii::$app->request->get('id')获取请求参数，查询对应的数据，将查询结果以JSON格式返回给前端。前端Vue组件通过将返回的JSON数据转换为JavaScript对象，并保存到组件的data中来展示用户信息。

注意，上述代码只是一个简单的示例，实际应用中需要根据业务逻辑进行适当的修改和优化，例如添加数据校验、错误处理、安全措施等。