使用 Laravel Splade 编写单页应用

Laravel Splade 由 Pascal Baljet 创建，是一个使用 Larave Blade 模板创建单页应用(SPA) 的超级简单方式。Splade 使得创建现代、动态 web 应用更为简单，使用很愉快。

Splade 提供了有用的 Blade 组件，这些组件通过开箱即用的无渲染 Vue 3 组件进行了增强，例如 <Link/> 组件。它提供了类似 SPA 的感觉，但您可以使用 Blade，在需要时添加交互式 Vue 组件。

正如您所看到的，在默认安装中，<Link /> 组件通过 XHR 获取页面数据，并在不重新加载整个页面的情况下提供 SPA 的快速感觉。

您可以同时使用 Blade 和 Vue 标记。以下是 Splade 的<Toggle/>组件中的一个示例。请注意 Vue 中的 v-show 指令和 @click 监听器，以及特定于 Blade 的组件和变量用法 {{ }}：

<x-splade-toggle>
    <div v-show="toggled">{{ $blog->full_content }}</div>
 
    <div v-show="!toggled">
        <p>{{ $blog->excerpt }}</p>
        <button @click="toggle">Expand</button>
    </div>
</x-splade-toggle>

如果您需要自定义 Vue 组件，Splade 会支持您，您甚至可以利用服务器端渲染（SSR）来提高应用程序的性能。

如果您也想使用 Laravel Breeze 或 Laravel Jetstream，Splade 为这两款产品提供入门套件。Splade 还提供了开箱即用的有用组件，无论是否使用入门套件，您都可以使用这些组件快速入门：

• Forms
• Links
• Events
• Flash
• Modals
• Table
• Teleport
• Toggle
• Transition
• 等等!

您可以查看 Splade.dev 上的主页和随附文档，快速开始使用 Splade。您还可以深入了解 Splade 是如何在底层工作的。