Question

据我所知，在视图中有两种使用Vuejs的方法：内联模板和组件。

＃1。内联模板

我将使用Let's Build A Forum with Laravel and TDD系列中的代码来表达我的观点。

ThreadsController：

public function show($channel, Thread $thread, Trending $trending)
    {
        if (auth()->check()) {
            auth()->user()->read($thread);
        }

        $trending->push($thread);

        $thread->increment('visits');

        return view('threads.show', compact('thread'));
    }

查看（threads.show）

@extends('layouts.app')

@section('head')
    <link rel="stylesheet" href="/css/vendor/jquery.atwho.css">
@endsection

@section('content')
    <thread-view :thread="{{ $thread }}" inline-template>
        <div class="container">
            <div class="row">
                <div class="col-md-8" v-cloak>
                    @include ('threads._question')

                    <replies @added="repliesCount++" @removed="repliesCount--"></replies>
                </div>

                <div class="col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <p>
                                This thread was published {{ $thread->created_at->diffForHumans() }} by
                                <a href="#">{{ $thread->creator->name }}</a>, and currently
                                has <span
                                        v-text="repliesCount"></span> {{ str_plural('comment', $thread->replies_count) }}
                                .
                            </p>

                            <p>
                                <subscribe-button :active="{{ json_encode($thread->isSubscribedTo) }}" v-if="signedIn"></subscribe-button>

                                <button class="btn btn-default"
                                        v-if="authorize('isAdmin')"
                                        @click="toggleLock"
                                        v-text="locked ? 'Unlock' : 'Lock'"></button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </thread-view>
@endsection

并且ThreadView组件不包含<template></template>标签。

Taylor仍将刀片用作默认刀片，仅在需要时导入Vuejs组件。

＃2。组件： 与上面相同，但是视图中的所有内容都将带入<template></template>标记中。

我应该以哪种方式在项目中使用？我看不到这两种方式的优缺点。我唯一能看到的是，如果使用内联模板，则可以使用Laravel Collection帮助程序或刀片指令（@ auth，@ guest）。

Answer 1

我认为这取决于要实现的接口的复杂性。就个人而言，我将Vuejs的全部功能用作应用程序的前端层。在这种情况下，您可以使用 Vue路由器在页面之间进行更平滑的转换，还可以使用 Vuex 作为前端层中的存储管理。

总而言之，如果要实现 SPA （单页应用程序），请选择第二种方法。但是，如果您只想使用Vuejs的有限功能，请继续第一种方法。

结合使用Laravel和Vuejs时更喜欢使用哪种模式

1 个答案: