README

用于 yii2 网络应用

安装

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

运行以下命令之一：

php composer.phar require aki/yii2-vue "*"

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

"aki/yii2-vue": "*"

到

安装扩展后，首先安装 vuejs 框架，并运行以下命令

运行以下命令之一：

# Move to folder
cd ./vendor/aki/yii2-vue/

使用

# install deps
npm install

使用

一旦扩展安装完成，你只需在代码中使用它即可

<?php
use aki\vue\Vue;
?>
<?php Vue::begin([
    'id' => "vue-app",
    'data' => [
        'message' => "hello world!!",
        'seen' => true,
        'todos' => [
            ['text' => "akbar joudi"],
            ['text' => "aref mohhamdzadeh"]
        ]
    ],
    'methods' => [
        'reverseMessage' => new yii\web\JsExpression("function(){"
                . "this.message = this.message.split('').reverse().join(''); "
                . "}"),
    ],
    'watch' => [
        'message' => new JsExpression('function(newval, oldval){
            console.log(newval)
        }'),
    ]
]); ?>

    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>

    <p v-if="seen">Now you see me</p>


    <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
    </ol>

    <p>{{ message }}</p>
    <input v-model="message">


<?php Vue::end(); ?>

添加 Vue Router

只需在代码中简单地使用它即可

<?php
use aki\vue\Vue;
use aki\vue\VueRouter;
use aki\vue\VueComponent;
?>
<?php Vue::begin([
    'id' => "vue-app",
    'vueRouter'=> VueRouter::widget([
        'routes' => [
            [
                'path' => '/foo',
                'component' => new VueComponent([
                    'template' => '@vueroot/views/foo.php',
                    'components' => [
                        'yoo-component'=> new VueComponent([
                            'template' => '<div>yoo!!! {{id}}</div>',
                                'props' => [
                                    'id'
                                ]
                            ])
                        ],
                ])
            ],
            [
                'path' => '/bar',
                'component' => new VueComponent([
                    'template' => '<div>hello</div>'
                ])
            ]
        ]
    ])
]); ?>

    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

    <!-- route outlet -->
    <?= VueRouter::$outlet ?><!-- <router-view></router-view> -->
<?php Vue::end(); ?>