Vuejs js는 1페이지 어플리케이션이 아닌 여러 페이지에 대응합니다.
jquery가 아닌 양방향 바인딩을 사용해야 하기 때문에 larabel 5.3과 vuejs 2를 사용하여 애플리케이션을 빌드해야 합니다.
블레이드 템플릿을 사용하여 뷰를 설정해야 합니다.그럼, 아래와 같이 각 페이지에 vuejs를 사용해야 합니다.
리소스/어사트/js/컴포넌트/목록.표시하다
<script>
const panel = new Vue({
el: '#list-panel',
name: 'list',
data: {
message: 'Test message'
},
methods: {
setMessage: function(){
this.message = 'New message';
}
}
})
</script>
resources/sys/syslog/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.blade 등...추가 중.표시하다el: '#add-panel'
이건 내 앱이야.js.디폴트 코드는 이미 다음과 같이 코멘트했습니다.
Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));
// const app = new Vue({
// el: '#app'
// });
나는 대부분의 문서와 튜토리얼을 거의 확인하지 않았다.그러나 단일 js 파일을 사용합니다.이들은 js뿐만 아니라 템플릿이 있는 작은 요소에 대한 구성요소를 사용합니다.
vuej를 이런 식으로 사용할 수 있습니까?app.js를 사용해야 하나요?어떻게 하면 좋을까요?
블레이드 파일에 vuej를 약간 뿌리는 경우 기본적으로 두 가지 옵션이 있습니다.
옵션 #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>
- 별도의 JS 파일의 모든 페이지에 대해 '앱'을 만듭니다.페이지 이름과 동일한 이름을 사용하여 페이지 이름이 어디에 속하는지 확인하는 것이 좋습니다.
- 파일(fileName.php + assets/js/fileName.js)과 동일한 이름을 주 div로 지정합니다.
- 사용하다
#fileName' as your엘 - 블레이드 사용 중
@{{ vue expressions }}블레이드가 이를 건너뛰고 VueJ가 처리할 수 있도록 합니다.
됐다. 행운을 빈다!
언급URL : https://stackoverflow.com/questions/41539961/vuejs-js-for-multiple-pages-not-for-a-single-page-application
'programing' 카테고리의 다른 글
| Vue에서 v-model에 최소/최대 특성을 적용하는 방법 (0) | 2022.07.19 |
|---|---|
| C의 정수 자릿수를 판별하려면 어떻게 해야 하나요? (0) | 2022.07.19 |
| Java에서 2개의 XML 문서를 비교하는 가장 좋은 방법 (0) | 2022.07.19 |
| 다형성:"ArrayList list = new ArrayList" 대신 "List list = new ArrayList"를 사용하는 이유는 무엇입니까? (0) | 2022.07.19 |
| vuex 스토어에서 vue-logger를 사용하려면 어떻게 해야 합니까? (0) | 2022.07.19 |