Vue.js如何在Laravel封装组件
我在public目录使用bower安装vue.js
使用<script src="%7B%7B%20asset%20(" type="text/javascript"></script>
引入vue.js
在某个blade模板封装了以下代码:
<code><script type="text/x-template" id="orders-template"> <table class="table table-hover"> <tr> <th>订单编号 <th>购买商品 <th>优惠金额 <th>订单金额 <th>用户信息 <th>订单时间 <th>订单状态 <th>用户操作 <tr v-for="(index,item) in orders | filterBy orderno in 'orderno'"> <td>@{{ item.orderno }} <td> <p v-for="(key,object) in item.subject | json_decode"> @{{ object.num + '份' }} @{{ object.title }} @{{ '¥' + object.price }} <td> <p>@{{ item.has_one_voucher.title ? '优惠卡券:' + item.has_one_voucher.title : '' }} <p>@{{ item.activity_discount ? '活动优惠¥:' + item.activity_discount : '' }} <p>@{{ item.blance_money ? '使用余额:¥' + item.blance_money : '' }} <td> @{{ '¥' + item.total_fee }} <td> <p>@{{ '编号:' + item.uid }} <p>@{{ '姓名:' + item.realname }} <p>@{{ '手机:' + item.tel }} <p>@{{ '地区:' + item.addr3 }} <td> <p>@{{ item.create_time | date '用户下单时间:'}} <p>要求送达时间:@{{ item.reciveTime }} <p>@{{ item.delivery_time ? item.delivery_time : '' | date '送货完成时间:'}} <td> @{{ item.opstatus }} <td> <button type="button" class="btn btn-primary">编辑订单 </script></code>
我觉得在blade模板里面封装组件模板太臃肿了,有没有办法可以将vue.js组件模板和blade模板分离出来
谢谢
回复内容:
我在public目录使用bower安装vue.js
使用<script src="%7B%7B%20asset%20(" type="text/javascript"></script>
引入vue.js
在某个blade模板封装了以下代码:
<code><script type="text/x-template" id="orders-template"> <table class="table table-hover"> <tr> <th>订单编号 <th>购买商品 <th>优惠金额 <th>订单金额 <th>用户信息 <th>订单时间 <th>订单状态 <th>用户操作 <tr v-for="(index,item) in orders | filterBy orderno in 'orderno'"> <td>@{{ item.orderno }} <td> <p v-for="(key,object) in item.subject | json_decode"> @{{ object.num + '份' }} @{{ object.title }} @{{ '¥' + object.price }} <td> <p>@{{ item.has_one_voucher.title ? '优惠卡券:' + item.has_one_voucher.title : '' }} <p>@{{ item.activity_discount ? '活动优惠¥:' + item.activity_discount : '' }} <p>@{{ item.blance_money ? '使用余额:¥' + item.blance_money : '' }} <td> @{{ '¥' + item.total_fee }} <td> <p>@{{ '编号:' + item.uid }} <p>@{{ '姓名:' + item.realname }} <p>@{{ '手机:' + item.tel }} <p>@{{ '地区:' + item.addr3 }} <td> <p>@{{ item.create_time | date '用户下单时间:'}} <p>要求送达时间:@{{ item.reciveTime }} <p>@{{ item.delivery_time ? item.delivery_time : '' | date '送货完成时间:'}} <td> @{{ item.opstatus }} <td> <button type="button" class="btn btn-primary">编辑订单 </script></code>
我觉得在blade模板里面封装组件模板太臃肿了,有没有办法可以将vue.js组件模板和blade模板分离出来
谢谢
Laracasts / Skills / Javascripti / The Vast World of Vue.js 0.12 / 9. Workflow with Browerify and Elixir
上述教程详细说明了如何在 Laravel 中使用 Vue.js
https://laracasts.com/series/learning-vu...

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发
