将数据从Laravel传递到vue中的方法有哪些?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
直接回显到数据对象或组件属性中
赞成: 简单明了
反对: 必须与嵌入到 Blade 模板中的 Vue 应用程序一起使用
可以说是将数据从 Laravel 应用程序移动到 Vue 前端的最简单方法。使用上面的任何一种方法,您都可以将 JSON 编码的数据回送给您的应用程序或其组件。
然而,最大的缺点是可扩展性。您的 JavaScript 需要直接暴露在模板文件中,以便引擎可以呈现您的数据。如果您使用 Vue 向 Laravel 站点的页面或区域添加一些基本的交互,这应该不是问题,但是您很容易就会遇到将数据强制放入压缩脚本的困难。
对于 Laravel 5.5+ 使用 json 指令:
使用自定义组件和 Laravel 自身的 json blade 指令可以让您轻松地将数据移动到道具中。此方法允许您划分 Vue 代码,将脚本与 Webpack 或 Mix 捆绑在一起,同时仍可以直接向其中注入数据。
将属性作为全局窗口注入
赞成: 在整个 Vue 应用程序和任何其他脚本中全局可用
反对: 可能很混乱,通常不建议用于大型数据集
虽然这看起来有点老生常谈,但将数据添加到窗口对象中可以轻松地创建全局变量,这些变量可以从应用程序中使用的任何其他脚本或组件访问。在过去,我用它作为存储和访问 API 基 URL、公钥、特定模型 ID 和各种其他需要在整个前端使用的小数据项的方法。
不过,使用此方法有一点需要注意,这就是访问 Vue 组件内部数据的方式。在模板内部,您将无法使用以下内容,因为 Vue 假定您尝试访问的窗口对象位于同一组件内:
// 不会起作用 & lt; template> & lt;才能div v=皐indow.showSecretWindow"比; ,,,& lt; h2>这是个秘密窗口,别告诉任何人! & lt;/h2> & lt;才能/div> & lt;/template>
相反,您需要使用返回值的计算方法:
//,会起作用 & lt; template> & lt;才能div v=皊howSecretWindow"比; ,,,& lt; h2>这是个秘密窗口,别告诉任何人! & lt;/h2> & lt;才能/div> & lt;/template> & lt; script> export 才能;default  { ,,,:计算,{ ,,,,,showSecretWindow (), { ,,,,,,,return window.showSecretWindow; ,,,,,} ,,,} ,,} & lt;/script>
如果这个方法的用例是较小的字符串或数值,并且使用Laravel自身的混合来编译,那么事情实际上会变得非常简单。您可以使用过程。env对象引用JavaScript中.env文件中的值。例如,如果我的环境变量文件中有API_DOMAIN=example.com,我可以在我的Vue组件(或使用混合编译的其他JavaScript)中使用process.env。API_DOMAIN .
<强>将API与Laravel自身的网络中间件和CSRF令牌一起使用强>
- <李>
赞成:易于启动,非常适合单页应用程序
李> <李>反对:要求前端由刀模板呈现
李>对我来说,这个解决方案是vue前端+ Laravel后端世界中最简单的入门方法。Laravel提供了两个不同的路由文件:网络。php和api。php。它们被拉入并通过应用程序提供者目录中的RouteServiceProvider。php文件映射。默认情况下,网络组的中间件设置为web api组的中间件设置为api。
追溯到<代码>应用程序/Http/内核。> 将数据从Laravel传递到vue中的方法有哪些