目录
回复内容:
首页 后端开发 php教程 Vue.js如何在Laravel封装组件

Vue.js如何在Laravel封装组件

Jun 06, 2016 pm 08:23 PM
php vue.js

我在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...

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 Dec 24, 2024 pm 04:42 PM

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

CakePHP 项目配置 CakePHP 项目配置 Sep 10, 2024 pm 05:25 PM

CakePHP 项目配置

CakePHP 日期和时间 CakePHP 日期和时间 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和时间

CakePHP 文件上传 CakePHP 文件上传 Sep 10, 2024 pm 05:27 PM

CakePHP 文件上传

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

讨论 CakePHP 讨论 CakePHP Sep 10, 2024 pm 05:28 PM

讨论 CakePHP

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 Dec 20, 2024 am 11:31 AM

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

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

See all articles