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

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 个解决方案

解决方案1
0 2018-08-04 05:30:12

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

问题描述

1 个解决方案

解决方案1 0 2018-08-04 05:30:12

解决方案1
0 2018-08-04 05:30:12