用 Blade 组件替换 Vue 组件，是不是完全有可能？

Posted 2023-02-23

【中文标题】用 Blade 组件替换 Vue 组件，是不是完全有可能？

【英文标题】：Replacing Vue Components with Blade Components, Is is fully possible?用 Blade 组件替换 Vue 组件，是否完全有可能？

【发布时间】：2020-12-28 20:11:20

【问题描述】：

我计划用刀片组件和刀片视图完全替换带有 Vue 前端的 Laravel 应用程序，但我有一个简单的问题。现在的问题是，虽然我可以使用 Vue 或其他一些 javascript 框架实现的大部分功能都可以使用刀片来完成，但是，在不使用任何其他 js 框架或编写香草js。还是这是唯一可能的方法？或者我是否需要使用带有或不带有 balde 组件的 vue js 来实现这些事件处理或使 ui 反应。如果解决方案是使用 vanilla js，那么正确的方法是什么？

例如，正如 vue 文档中所写，菜单按钮可以很容易地使用如下方式处理：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue(
  el: '#example-3',
  methods: 
    say: function (message) 
      alert(message)
    
  
)

最大的问题是blade组件可以单独替代vue js组件吗？

【问题讨论】：

您将需要一些 JavaScript（框架、库或 vanilla 等）来提供交互式页面。 Blade/html 无法单独完成。

看看livewire它通过渲染部分提供刀片内的反应性。要更深入，我建议您查看TALL stack

【参考方案1】：

Vue 在前端提供响应性，无需刷新页面或用来自 AJAX 请求的响应替换 DOM 段。

Blade 不能一对一替换Vue

将Blade 视为一个纯粹的服务器端 php 工具，可帮助您构建和呈现 HTML 文档。

另一方面，Vue 是一个 JavaScript 框架，用于帮助构建客户端应用程序。

---

TL/DR - Blade 不等于 Vue。您选择的应该取决于用例。

静态内容，使用Blade。反应式内容，使用Vue。