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

Question

This might be silly to ask, but i want know what is best the way to use vue script in pages seperetly without declaring it as global ? 这个问题可能很愚蠢，但是我想知道在不声明为全局的情况下单独在页面中使用vue脚本的最佳方法是什么？ For eg, i have many pages in laravel blade ie home page, category page, product page etc. 例如，我在laravel刀片中有很多页面，即主页，类别页面，产品页面等。

Now what I want is to use vue to make api call to fetch data from the server and render the products in blade with v-for directive. 现在，我想要使用vue进行api调用，以从服务器获取数据并使用v-for指令在刀片中呈现产品。 I do not want to use vue templates 我不想使用vue templates

This is my first time working with vue, so can anyone please point me how should i approach one this. 这是我第一次使用vue，因此任何人都可以指出我该如何处理。

I tried to follow many documents on google , all of them explain on creating vue template then declare it in app.js globally and use in the blade which I do not want. 我试图遵循google上的许多文档，所有文档都说明了创建vue template然后在app.js中全局声明它并在不需要的刀片中使用。 All I want to create a vue file and do my operations and whatever the data I get and then I want to pass to the blade and use it for further mapping or looping . 我只想创建一个vue文件并进行操作以及获得的所有数据，然后将其传递给刀片服务器并将其用于进一步的mapping或looping 。

https://medium.com/justlaravel/introduction-to-vue-js-in-laravel-e8757174e58e and few more. https://medium.com/justlaravel/introduction-to-vue-js-in-laravel-e8757174e58e等。

Answer 1

Don't know how much you know. 不知道你知道多少。 There is two main ways of using vue in Laravel and they all need to have been imported "globally" in your app.js and then in your layout your wrap the contents of the body in your main vue file. 在Laravel中使用vue的主要方法有两种，它们都需要“全局”导入到app.js中，然后在布局中将主体内容包装在主vue文件中。 Note this vue file should not have template inside because it is using the inline-template attribute all the html should be inline in the component 请注意，此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

And to answer your comment if you are in an inline-template yo can 如果您使用的是内联模板，请回答您的评论，您可以

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

If you are in a normal component 如果您处于正常状态

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

The @ stops blade from thinking it is php @停止刀片认为它是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