antkaz/yii2-vue

Yii 框架的 Vue.js 扩展

维护者

详细信息

github.com/antkaz/yii2-vue

主页

源代码

问题

安装数: 36,346

依赖项: 1

建议者: 0

安全: 0

星标: 21

关注者: 2

分支: 13

开放问题: 0

类型:yii2-extension

v1.0 2018-03-01 19:37 UTC

Requires

MIT ba341bdbcfffa96662f49fe83152a867191d3b72

  • Anton Kazarinov <askazarinov.woop@gmail.com>

yii2vueVue.js

This package is auto-updated.

Last update: 2024-09-08 18:46:37 UTC

README

Vue.js 扩展程序用于 Yii2


这是 Vue.js 用于 Yii2 的扩展程序。

安装

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

运行

php composer.phar require antkaz/yii2-vue

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

"antkaz/yii2-vue": "~1.0"

to

使用方法

安装扩展后，只需在您的代码中使用它即可

<?php

use antkaz\vue\Vue;
use \yii\web\JsExpression;
?>
<div class="vue">
    <?php Vue::begin([
        'clientOptions' => [
            'data' => [
                'message' => 'Hello Vue!'
            ],
            'methods' => [
                'reverseMessage' => new JsExpression("function() {this.message = this.message.split('').reverse().join('')}")
            ]
        ]
    ]) ?>

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

    <?php Vue::end() ?>
</div>

不使用小部件的替代方法

<?php

use antkaz\vue\VueAsset;
VueAsset::register($this); // register VueAsset
?>

<div id="app" class="vue">

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

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>