前言


一、大纲

From: https://www.imooc.com/video/12509

Blade视图页面 --> 编译 --> 原生PHP --> 并缓存起来。

既然是个模板:通用的“头部”和“尾部”。

二、添加模板文件 (.blade.php)

Blade 模板


一、模板继承

  • 定义布局 - [1]

section, yield, extends, parent四个关键字。

[resources/views/layouts.blade.php]

  • 初步理解关键字

@section

定义视图片段。

@yield

类似占位符,显示某个制定section所代表的内容。用子模板去实现它。

不可扩展。只是声明了一个视图片段。

  • 加载布局

Route --> Controller --> template for view.

[1]  路由

Route::any('section1', ['uses' => 'StudentController@section1']);

[2]  控制器

public function section1()
{
  return view('student.section1');  // 渲染模板
}

student/section1可以;student.section1也可以,但推荐后者。

[3]  视图 加载布局

新建 resources/views/student/section1.blade.php

Jeff: 这里,视图继承了layouts的内容。

@extends('layouts')

这样,便加载了默认 resources/views 下的 layouts.blade.php。

  • 继承布局 - [2]

先通过 @extends 继承父模板主体。

其实就是“重写布局”局部内容。

 

  • 若干疑难点

[1] yield与section的区别?

** 初步理解:

- @yield() 可以理解为一个占位符。
- @section('head') 表示一个存储区域,这个区域内定义的内容,在子模板中可以通过 @parent 进行调用。

** 不能被扩展如何理解:

@yield 不能被扩展,所以即使加上了 @parent 也不起作用,输出的内容只有“新的标题”,替换了“默认的标题”。

@section 定义的部分,由于使用了 @parent 关键字,父模板中的内容会被保留,然后再扩展后添加的内容进去。

[2] @section ... @stop ... @show ... @endsection

Ref: Laravel5.4初试-@yield @section @show @stop @append标签区别

Ref: Blade 模板中有关 section 的那些事【这才是原文】

** @endsection

这个在 4.0 版本中已经被移除,虽然向下兼容,但是不建议使用

** @show 与 @stop

@show 指的是执行到此处时将该 section 中的内容输出到页面,

@stop 则只是进行内容解析,并且不再处理当前模板中后续对该section的处理,除非用 @override覆盖(详见下一部分)。

通常来说,在首次定义某个 section 的时候,应该用 @show;而在替换它或者扩展它的时候,不应该用 @show,应该用 @stop。

{{-- layout.master --}}
<div id="zoneA">
  @section('zoneA')
  AAA
  @show
</div> <div id="zoneB">
  @section('zoneB')
  BBB
  @stop
</div> <div id="zoneC">
  @section('zoneC')
  CCC
  @show
</div> ---------------------------------------------------
代码如下:
{{-- page.view --}}
@extends('layout.master') @section('zoneA')
aaa
@stop @section('zoneB')
bbb
@stop @section('zoneC')
ccc
@show

最终显示结果:

从结果可以看到,zoneB 的内容丢失,因为没有用 @show 告诉引擎输出这部分的内容,而 zoneC 的内容会显示两次,并且还破坏了 layout.master 的页面结构,因为 @show 出现了两次。

ccc // 来自 page.view
<div class="zoneA">
aaa
</div> <div class="zoneB"> </div> <div class="zoneC">
ccc
</div>

一个理解: 

@section('content')
<h1>Test</h1>
@show
is equivalent to @section('content')
<h1>Test</h1>
@stop @yield('content')

二、模板调用PHP

  • view 使用 "变量 from controller"

Controller中定义了一个变量:

public function section1()
{
  $name = 'sean‘ ;
  return view('student.section1', [
    'name' => $name
  ]);
}

view的模板文件 [resources/views/student/section1.blade.php]:

@section('content')
content <p>{{ $name }} </p>
@stop

效果如下:

  • 直接调用php代码

[1] 视图中使用代码如下:

其中最后一样的or写法是上一行三元表达式的替代写法在blade中。

[2] 控制器中定义变量。

public function section1()
{
  $name = 'sean‘;
  $arr = ['sean', 'imooc'];
  return view('student.section1', [
    'name' => $name,
    'arr' => $arr,
  ]);
}
  • 转移字符@
<p>@{{ $name }}</p>
  • 模板中注释

模板的注释在解析后的html中是看不到的。

<!-- 一二三 -->    # php注释

{{-- 四五六 --}}    # 模板注释,用于比较隐私的注释方法

三、include的使用

  • 类似子函数

引入子视图,不是都需要,但用的地方也不少。

[1] Create sub-view as common1.blade.php

[2] sub-view,相当于 "将被调用" 的子函数。

<p> 我是include {{ $message }}</p>

[3] main-view 调用 sub-view 如下。

@include('student.common1', ['message' => '我是错误信息'])

这里,调用了student目录下的common1.blade.php,并给参数message传入了一个值:'我是错误信息'
  • 实际使用示范

有点占位符的意思。

四、流程控制

  • 条件判断

[1] 视图中可以使用if foreach等。

<br>
@if ($name == 'sean')
  I'm sean
@elseif ($name == 'imooc')
  I'm imooc
@else
  Who am I?
@endif <br>
@If (in_array($name, $arr))
  true
@else
  false
@endif

[2] unless 相当于 if 取反。

<br>
@unless($name == 'sean')
  I'm sean
@endunless
  • 循环遍历

方法一

<br>
@for ($i = 0; $i < 10; $i++)
  <p>{{ $i }}</p>
#endfor 方法二 <br>
@foreach($students as $student)
  <p>{{ $student->name }}</p>
@endforeach
方法三
<br>
@forelse($students as $student)
  <p>{{ $student->name }}</p>
@empty
  <p>null</p>
@endforelse

五、模板中的URL

  • 点击链接后跳转到这里

[1]  路由

[app/Http/routes.php]

Route::any('url', ['as' => 'url', 'uses' => 'StudentController@urlTest']);

[2] 路由 --> 控制函数

[app/Http/Controllers/StudentController.php]

public function urlTest()
{
  return 'urlTest';  
}
  • 建立这个链接

在此,section1中添加一个链接:url()

看上去,貌似以下三个调用的分别是Route的那行代码的三个不同的部分。

方式一
<a href="{{ url('url') }}">url()</a> 方式二
<a href="{{ action('StudentController@urlTest') }}">action()</a>  # 写得太长 方式三
<a href="{{ route('url') }}">route()</a>

添加后效果:

[Laravel] 04 - Blade templates的更多相关文章

  1. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  2. laravel 模板 blade

    控制器布局 在Laravel框架中使用模板的一种方法就是通过控制器布局.通过在控制器中指定 layout 属性,对应的视图会被创建并且作为请求的默认返回数据. 在控制器中定义一个布局 class Us ...

  3. Laravel 4 Blade模板引擎

    http://my.oschina.net/5say/blog/201290 模板输出 基本输出 1 <!-- app/views/example.blade.php --> 2 < ...

  4. Laravel 解决blade模板转义html标签问题

    当我们使用富文本编译器(如:Ueditor编译器)保存编辑的内容后,在blade模板中,想要显示原生的html标签内容时该怎么做? 首先,了解下laravel {{ 变量名 }} 与{!! 变量名 ! ...

  5. laravel的blade模板的布局嵌套

    测试路由 Route::get('/', function() { $value = [,,]; return view('home.index', array('data' => $value ...

  6. laravel中Blade模板继承

    Blade模板继承 和 区块 <!-- 文件保存于 resources/views/layouts/app.blade.php --> <html> <head> ...

  7. js中写laravel模板blade语法和PHP逻辑解决方法

    在js中是否能够执行blade的语法?或者说在js中能否处理PHP逻辑呢? 答案是,当然的 下面来看需求:在提交表单,完成入库操作后,使用 return redirect(route('admin.u ...

  8. [Code::Blocks] Install wxWidgets & openCV

    The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...

  9. 本人SW知识体系导航 - Programming menu

    将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...

随机推荐

  1. jsp get参数乱码问题

    摘自:username2.iteye.com/blog/1597917个人理解中文传送的时后需要转码: js代码: 要进行两次转码才不会出现乱码(默认为UTF-) encodeURI(encodeUR ...

  2. windows命名管道

    命名管道是通过网络来完成进程间的通信,它屏蔽了底层的网络协议细节. 将命名管道作为一种网络编程方案时,它实际上建立了一个C/S通信体系,并在其中可靠的传输数据.命名管道服务器和客户机的区别在于:服务器 ...

  3. 通过html页面打开Android本地的app

    http://www.cnblogs.com/yejiurui/p/3413796.html 一.通过html页面打开Android本地的app 1.首先在编写一个简单的html页面 <html ...

  4. 用ndk-stack分析应用native程序异常crash掉

    adb logcat | "/home/hxl/bin/android-ndk-r10d/ndk-stack" -sym "/home/hxl/plu/BadGame/p ...

  5. 后端把Long类型的数据传给前端,前端可能会出现精度丢失的情况,以及解决方案

    后端把Long类型的数据传给前端,前端可能会出现精度丢失的情况.例如:201511200001725439这样一个Long类型的整数,传给前端后会变成201511200001725440. 解决方法: ...

  6. electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒

    公司项目有一款带即时聊天.群组功能的APP,因为要给客服人员使用,需要开发PC版本.之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实 ...

  7. 关于three.js中添加文字的方式[转]

    https://blog.csdn.net/qq563969790/article/details/76584976 网上资料大部分是通过引入外部font库进行文字效果的载入,但是在实际运行的时候发现 ...

  8. 【OpenCV学习】计算两幅图像的重叠区域

    问题描述:已知两幅图像Image1和Image2,计算出两幅图像的重叠区域,并在Image1和Image2标识出重叠区域. 算法思想: 若两幅图像存在重叠区域,则进行图像匹配后,会得到一张完整的全景图 ...

  9. GraphQL: Object doesn't support property or method 'from'

    From: https://github.com/graphql/graphiql/issues/688 psyCodelist commented 11 days ago Hi, Thank you ...

  10. 微信支付WxpayAPI_php_v3 错误修改

    微信sdk:WxpayAPI_php_v3 这是下载压缩包的目录结构. https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 ce ...