Vuejs js 用于多页面,不适用于单页面应用
Vuejs js for multiple pages, not for a single page application
我需要使用 laravel 5.3 和 vuejs 2 构建应用程序,因为我需要使用 two-way 绑定而不是使用 jquery。
我需要使用 blade 模板设置视图。然后,我需要在每个页面中使用 vuejs,如下所述。
resources/asserts/js/components/List.vue
<script>
const panel = new Vue({
el: '#list-panel',
name: 'list',
data: {
message: 'Test message'
},
methods: {
setMessage: function(){
this.message = 'New message';
}
}
})
</script>
resources/asserts/views/post/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 个要创建。blade.php 等...
在 Add.vue 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 吗?最好的方法是什么?
- 为单独的 JS 文件中的每个页面创建 'app'。好的做法是使用与页面名称相同的名称,以明确其所属位置。
- 将您的主 div 命名为与文件相同的名称 (fileName.php + assets/js/fileName.js).
- 使用
#fileName' as your
el`
- 在 Blade 中使用
@{{ vue expressions }}
让 Blade 跳过这个并让 VueJS 处理那个。
完成。祝你好运!
如果你想在你的 blade 文件中加入一些 vuejs,你基本上有两个选择:
选项#1
声明全局 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
选项#2
这是我目前正在使用的,实际上给了我更多的灵活性
// 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>
我需要使用 laravel 5.3 和 vuejs 2 构建应用程序,因为我需要使用 two-way 绑定而不是使用 jquery。
我需要使用 blade 模板设置视图。然后,我需要在每个页面中使用 vuejs,如下所述。
resources/asserts/js/components/List.vue
<script>
const panel = new Vue({
el: '#list-panel',
name: 'list',
data: {
message: 'Test message'
},
methods: {
setMessage: function(){
this.message = 'New message';
}
}
})
</script>
resources/asserts/views/post/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 个要创建。blade.php 等...
在 Add.vue 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 吗?最好的方法是什么?
- 为单独的 JS 文件中的每个页面创建 'app'。好的做法是使用与页面名称相同的名称,以明确其所属位置。
- 将您的主 div 命名为与文件相同的名称 (fileName.php + assets/js/fileName.js).
- 使用
#fileName' as your
el` - 在 Blade 中使用
@{{ vue expressions }}
让 Blade 跳过这个并让 VueJS 处理那个。
完成。祝你好运!
如果你想在你的 blade 文件中加入一些 vuejs,你基本上有两个选择:
选项#1
声明全局 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
选项#2
这是我目前正在使用的,实际上给了我更多的灵活性
// 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>