Question

我目前正在使用Laravel 5.3和Vue Js，我有以下应用程序结构。

resource / view / layouts / plane.blade.php（作为master.blade.php工作）
resource / view / layouts / dashboard.blade.php（作为child.blade.php - 扩展平面）
resource / view / index.blade.php（当前刀片文件 - 扩展仪表板）

公共/ JS / blog.js

plane.blade.php代码

 <!DOCTYPE html>
     <html lang="en" class="no-js">
         <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
                <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
                <script type="text/javascript" src="/js/blog.js"></script>

          </head>
           <body>
                  @yield('body')
           </body>
     </html>

dashboard.blade.php代码

 @extends('layouts.plane')

 @section('body')
        <div class="row" id="manage-vue">
            @yield('section')
       </div>

  @stop

index.blade.php代码

 @extends('layouts.dashboard') 

 @section('page_heading','Blog')

 @section('section')



<div >

    @{{ message }}

</div>

@stop

blog.js代码

    var myModel =  new Vue({
       el: '#manage-vue',
       data: {
           message: 'Hello Vue.js!'
       }
   });

使用这些单独的文件，我没有得到结果，因为它显示错误找不到元素：#app 。

如果我将category.js代码放在index.blade.php文件中，我会得到正确的结果。

如何处理单独的文件？

Answer 1

您必须在blog.js元素之后插入#app 。

Answer 2

而不是el，您必须使用template，如下所示：

 var myModel =  new Vue({
       template: '#app',
       data: {
           message: 'Hello Vue.js!'
       }
   });

你必须在HTML中有以下内容：

<script type="text/x-template" id="app">
  <div>
    ...
  </div>
</script>

如何从laravel刀片中分离vue js文件代码？

2 个答案: