README

Yii2 Vuejs前端。不再需要pjax和更快的渲染。

安装

安装此扩展的首选方式是通过 composer。

运行

php composer.phar require --prefer-dist lars-t/yii2-vuejs-frontend "*"

或者在您的 composer.json 文件的require部分添加

"lars-t/yii2-vuejs-frontend": "*"

使用方法

扩展安装完成后，只需在代码中使用即可

扩展您的ActiveRecord类

class YourClass extends \larst\vuefrontend\VueActiveRecord 
or for yii2-bootstrap 
class YourClass extends \larst\vuefrontend\VueBootstrapActiveRecord

在您的表单周围插入Vue-widget

<?php
    larst\vuefrontend\Vue::begin(['model'=>$model]);
.... form
    larst\vuefrontend\Vue::end();

    ?>

在您的表单中设置fieldclass

'fieldClass' => 'larst\vuefrontend\VueActiveField'
or for yii2-bootstrap 
'fieldClass' => 'larst\vuefrontend\VueBootstrapActiveField' 

并让Vue知道使用表单内的submithandler

'options' => ['v-on:submit' => new yii\web\JsExpression("submitHandler")]

默认使用VeeValidate。要禁用VeeValidate，在字段的inputOptions中设置 'veeValidate' => false。在表单中设置 enableClientValidation 为 false，以禁用jQuery客户端验证。所有yii2-validators将自动转换为v-validate（此处还有一些工作要做）。

示例yii表单

$form = ActiveForm::begin([
            'enableClientScript' => false,
            'fieldClass' => 'larst\vuefrontend\VueBootstrapActiveField',
            'options' => ['v-on:submit' => new yii\web\JsExpression("submitHandler")]
    ]);

在您的控制器中

if (Yii::$app->request->isVuejs) {  // when you did not implement VueRequest use: if (Yii::$app->request->headers->get('X-VUEJS', false)) { 
    $response = Yii::$app->response;
    $response->format = \yii\web\Response::FORMAT_JSON;
    return [
        'model' => $model->toVueArray(),                                                  // javascript object for model
        'flashes' => Yii::$app->session->getAllFlashes(),                                 // pass flashes to noty
        'form' => ['action' => \yii\helpers\Url::to(['update', 'id' => $model->id])],     // set form action
        'history' => ['location' => \yii\helpers\Url::to(['update', 'id' => $model->id])] // use pushstate history
    ];
}

示例yii gridview

            \larst\vuefrontend\Vue::begin([
        'jsName' => 'nameVm',
        'data' => [
            'model' => $dataProvider->getVueModels(),
            'gridReload' => 0,
            'gridMethod' => 'get',
            'gridUrl' => yii\helpers\Url::to(['someview/index']), // dynamic url for grid
            'gridIndex' => yii\helpers\Url::to(['someview/index']), // default url for grid
            'summary' => $dataProvider->renderSummary(),
        ],
        'watch' => [
            'gridReload' => new \yii\web\JsExpression('function(){this.gridHandler()}'),
        ],
    ]);

            \larst\vuefrontend\VueGridView::widget([
                'dataProvider' => $dataProvider,
                'modelClass'=> \frontend\models\SomeModel::class,

在您的控制器中处理网格

if (Yii::$app->request->isVuejs) {
            $response = Yii::$app->response;
            $response->format = \yii\web\Response::FORMAT_JSON;
            return [
                'model' => $dataProvider->getVueModels(), // javascript object for model
                'flashes' => Yii::$app->session->getAllFlashes(), // pass flashes to toastr

            ];
}