vuejs
for yii2 web application, (*1)
[](https://packagist.org/packages/aki/yii2-vue)
[](https://packagist.org/packages/aki/yii2-vue)
, (*2)
Installation
The preferred way to install this extension is through composer., (*3)
Either run, (*4)
php composer.phar require aki/yii2-vue "*"
or add, (*5)
"aki/yii2-vue": "*"
to the require section of your composer.json file., (*6)
After installing the extension, first install the vuejs framework
Either run, (*7)
# Move to folder
cd ./vendor/aki/yii2-vue/
and run command, (*8)
# install deps
npm install
Usage, (*9)
Once the extension is installed, simply use it in your code by :, (*10)
"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">
Add Vue Router, (*11)
simply use it in your code by :, (*12)
"vue-app",
'vueRouter'=> VueRouter::widget([
'routes' => [
[
'path' => '/foo',
'component' => new VueComponent([
'template' => '@vueroot/views/foo.php',
'components' => [
'yoo-component'=> new VueComponent([
'template' => 'yoo!!! {{id}}
',
'props' => [
'id'
]
])
],
])
],
[
'path' => '/bar',
'component' => new VueComponent([
'template' => 'hello
'
])
]
]
])
]); ?>
<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> -->
Wallogit.com
