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 }}
                        @{{ '&yen;' + object.price }}
                    
                
                <td>
                    <p>@{{ item.has_one_voucher.title ? '优惠卡券:' + item.has_one_voucher.title : '' }}

                    <p>@{{ item.activity_discount ? '活动优惠&yen;:' + item.activity_discount : '' }}

                    <p>@{{ item.blance_money ? '使用余额:&yen;' + item.blance_money : '' }}
                
                <td>
                    @{{ '&yen;' + 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 }}
                        @{{ '&yen;' + object.price }}
                    
                
                <td>
                    <p>@{{ item.has_one_voucher.title ? '优惠卡券:' + item.has_one_voucher.title : '' }}

                    <p>@{{ item.activity_discount ? '活动优惠&yen;:' + item.activity_discount : '' }}

                    <p>@{{ item.blance_money ? '使用余额:&yen;' + item.blance_money : '' }}
                
                <td>
                    @{{ '&yen;' + 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...