Question

这可能很愚蠢，但是我想知道在不声明为全局的情况下，在页面中单独使用vue脚本的最佳方法是什么？例如，我在laravel刀片中有很多页面，即主页，类别页面，产品页面等。

现在，我要使用vue进行api调用，以从服务器获取数据并使用v-for指令在刀片中呈现产品。我不想使用vue templates

这是我第一次使用vue，所以任何人都可以指出我该如何处理。

我试图遵循Google上的许多文档，所有文档都解释了如何创建vue template，然后在app.js中全局声明它，并在不需要的刀片中使用。我只想创建一个vue文件并进行操作以及获得的所有数据，然后将其传递给刀片服务器并将其用于进一步的mapping或looping。

https://medium.com/justlaravel/introduction-to-vue-js-in-laravel-e8757174e58e 还有更多。

Answer 1

不知道您知道多少。在Laravel中使用vue的主要方法有两种，它们都需要先“全局”导入到app.js中，然后再导入到布局中您可以将主体内容包装在主vue文件中。请注意，此vue文件内部不应包含模板，因为它使用inline-template属性，因此所有html都应在组件中内联

    <body>
    <div id="channel">
      <channel inline-template>
        <div>
          @yield('content')
        </div>
      </channel>
    </div>
    <script src="{{ mix("js/channel.js") }}"></script>
    </body>
    </html> 

1. one way doing it is then to make normal vue components like so. This means 
that you need to have a <template></template> inside the vue component.

    @extends('layouts.app')

    @section('content')
       <div class="columns is-multiline">
          <div class="column is-7">
            <div class="columns is-multiline">
              <admin-web-orders v-bind:site="site" v-if="site"></admin-web-orders>
              </div>
            </div>
          </div>
    @endsection


2. Other way would be using inline templates this alows you to use all the blade stuff but still use vue 

@extends('layouts.app')
@section('content')
  <div class="columns is-multiline">
    <div class="column is-7">
      <div class="columns is-multiline">
        <admin-web-orders inline-template>
          <div class="content has-padding-2" v-if="orders && orders.data && orders.data.length == 0">
            <div class="column is-8 is-offset-2 has-text-centered">
              <figure class="image has-no-margin">
                <img src="{{ asset("my asset") }}" alt="">
              </figure>
              <p class="has-text-grey">
                <b>Prova gärna att lägga till <a href="{{ route("myRoute") }}" class="link has-text-info">Annonsering</a></b>
              </p>
            </div>
          </div>
        </admin-web-orders>
      </div>
    </div>
  </div>
@endsection

如果您使用的是内联模板，请回答您的评论

<li v-for="item in items">@{{ item.name }} </li>

如果您处于正常状态

 <li v-for="item in items">{{ item.name }} </li>

@阻止刀片认为它是php

如何在不使用Laravel中的vue模板的情况下使用vue脚本

1 个答案: