Din*_*nga 15 laravel vue.js vue-component laravel-5.3 vuejs2
我需要使用laravel 5.3和vuejs 2构建一个应用程序,因为我需要使用双向绑定而不是使用jquery.
我需要使用刀片模板设置视图.然后,我需要在每个页面中使用vuejs,如下所述.
资源/断言/ JS /组件/ List.vue
<script>
const panel = new Vue({
el: '#list-panel',
name: 'list',
data: {
message: 'Test message'
},
methods: {
setMessage: function(){
this.message = 'New message';
}
}
})
</script>
资源/断言/视图/后/ index.blade.php
<div id="panel" class="panel panel-default">
<div class="panel-heading">Posts</div>
<div class="panel-body">
<p>{{ message }}</p>
<button v-on:click="setMessage">SET</button>
</div>
</div>
在Add.vue中有add.vue到create.blade.php等... el: '#add-panel'
这是我的app.js. 我已经注释了默认代码,如下所示.
Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));
// const app = new Vue({
// el: '#app'
// });
我几乎没有检查过大部分文档和教程.但是他们使用单个js文件.他们使用带有模板的小元素组件,而不仅仅是js.
是否有可能以这种方式使用vuejs？我需要使用app.js. 做这个的最好方式是什么？
Hel*_*cas 28
如果你想在你的刀片文件中洒一些vuejs,你基本上有两个选择:
声明全局Vue组件
例
// in laravel built in app.js file
Vue.component('foo', require('./components/Foo.vue'));
Vue.component('bar', require('./components/Bar.vue'));
const app = new Vue({
el: '#app'
});
创建一个主要的布局文件,其中根div的id为 #app
// layout.blade.php
<html>
<header></header>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
最后在你的意见中:
//some-view.blade.php
@extends('layout')
@section('content')
<foo :prop="{{ $someVarFromController }}"></foo>
@endsection
这就是我目前使用的,实际上给了我更大的灵活性
// in laravel built in app.js file
const app = new Vue({
el: '#app',
components: {
Foo: require('./components/Foo.vue'),
Bar: require('./components/Bar.vue')
}
});
在布局文件中,您将使用vuejs动态组件
<html>
<header></header>
<body>
<div id="app">
@if (isset($component))
<component :is={{ $component }} inline-template>
@endif
@yield('content')
@if (isset($component))
</component>
@endif
</div>
</body>
</html>
在您的观点中:
//some-view.blade.php
@extends('layout', ['component' => 'foo'])
@section('content')
// all the vue stuff available in blade
// don't forget to use the @ symbol every time you don't want blade to parse the expression.
// Example: @{{ some.vue.propertie }}
@endsection
最后,您可以像往常一样创建vue组件
// resources/assets/js/components/foo.vue
<script>
export default {
// the component
}
</script>
M U*_*M U 12
#fileName' as yourel`@{{ vue expressions }}中让Blade跳过这个并允许VueJS处理它.完成.祝好运!
| 归档时间： |
|
| 查看次数： |
13828 次 |
| 最近记录： |