Laravel框架中Blade模板的用法示例


Posted in PHP onAugust 30, 2017

简介

Blade它不像其他流行的 PHP 模板引擎那样限制你在视图中使用原生的 PHP 代码,事实上它就是把 Blade 视图编译成原生的 PHP 代码并缓存起来。缓存会在 Blade 视图改变时而改变,这意味着 Blade 并没有给你的应用添加编译的负担。Blade 视图文件使用 .blade.php 后缀,一般情况下都被存储在 resources/views 目录。

1. 继承、片段、占位、组件、插槽

1.1 继承

1.1.1 定义父模板

Laravel/resources/views/base.blade.php

1.1.2 子模板继承

路径:Laravel/resources/views/child.blade.php

@extends('base')

1.2 片段

1.2.1 父模板定义片段

@section('part')
// 中间内容即使一个片段
@show

1.2.2 子模板填充片段

@section('part')

片段填充内容

@endsection

1.3 占位

1.3.1 父模板占位:

@yield('title')

1.3.2 子模板填充占位

第一种填充(文本):

@section('title' , '填充的文本占位')

第二种填充(文本 or html)

@section('title')

填充的占位

@endsection

1.4 组件、插槽

1.4.1 定义组件

路径:Laravel/resources/views/component.blade.php

<div class='component'>
 <!-- $title,$content 变量实际上就是预定义的插槽 -->
 <div class='title'>{{ $title }}</div>
 <div class='content'>{{ $content }}</div>
</div>

1.4.2 使用组件

路径:Laravel/resources/views/test.blade.php

@component('component')
 @slot('title')
  组件标题
 @endsolt
 
 @slot('content')
  组件内容
 @endslot
@endcomponent

2. 数据显示

2.1 转义输出

{{ $name }}

2.2 未转义输出

{!! $name !!}

2.3 原格式输出

第一种(适合量不多):

@{{ name }}

第二种(适合量多):

@verbatim
{{ name }}
{{ sex }}
{{ age }}
@endverbatim

3. 流程控制

3.1 for

注意:

  • 没有 $loop 变量
  • 没有 @empty
  • 有 @break
  • 有 @continue
@for ($i = 0; $i < 10; ++$i)
 {{ $i }} <br />
@endfor

3.2 foreach

注意:

  • 有 $loop 变量
  • 没有 @empty
  • 有 @break
  • 有 @continue
@foreach ($data as $k => $v)
 {{ $k }} <br />
@endforeach

3.3 forelse

注意:

  • 有 $loop 变量
  • 必须有 @empty
  • 有 @break
  • 有 @continue
@foreach ($data as $k => $v)
 {{ $k }} <br />
@empty

    数组没有数据

@endforeach

4. 使用原生 PHP

@php 
echo "使用原生 PHP";
@endphp

5. 包含子视图

注意

  • 被包含的子视图可以引用父视图定义的所有变量。
  • 你可以传递额外的数据到子视图

定义父视图 parent.blade.php,并包含子视图 child.blade.php,且传入额外数据

/**
 * 父视图
 * 父视图拥有变量 $name = 'chenxuelong'
 */

<div class='parent'>
 <div class='username'>{{ $username }}</div>
 <div class='child'>
  <!-- 包含子视图 -->
  @include('child' , [
   'other' => '额外数据'
  ])
 </div>
</div>

/**
 * 子视图
 */
 <div class='username'>{{ $username }}</div>
 <div class='other'>{{ $other }}</div>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
我的论坛源代码(十)
Oct 09 PHP
PHP脚本数据库功能详解(中)
Oct 09 PHP
PHP EOT定界符的使用详解
Sep 30 PHP
PHP分页函数代码(简单实用型)
Dec 02 PHP
php判断输入不超过mysql的varchar字段的长度范围
Jun 24 PHP
smarty模板局部缓存方法使用示例
Jun 17 PHP
PHP Web木马扫描器代码分享
Sep 06 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
Feb 26 PHP
Netbeans 8.2将支持PHP7 更精彩
Jun 13 PHP
PHP中new static()与new self()的比较
Aug 19 PHP
PHP Post获取不到非表单数据的问题解决办法
Feb 27 PHP
php连接MSsql server的五种方法总结
Mar 04 PHP
php实现支持中文的文件下载功能示例
Aug 30 #PHP
利用PHPStorm如何开发Laravel应用详解
Aug 30 #PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
Aug 29 #PHP
PHP单例模式与工厂模式详解
Aug 29 #PHP
PHP迭代与递归实现无限级分类
Aug 28 #PHP
yii2中LinkPager增加总页数和总记录数的实例
Aug 28 #PHP
PHP大文件分割上传 PHP分片上传
Aug 28 #PHP
You might like
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python中类的继承代码实例
2014/10/28 Python
Python工厂函数用法实例分析
2018/05/14 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
五四青年节的活动方案
2014/08/20 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2014年学生会工作总结
2014/11/07 职场文书
立项申请报告范本
2015/05/15 职场文书
文化大革命观后感
2015/06/17 职场文书
AJAX学习笔记
2021/05/18 Javascript