Blade模板

Blade也就是MVC中的V层, 存储在resources/views目录下

  1. //resources/views/user.blade.php
  2. <html>
  3.     <body>
  4.         <h1>{{ $name }}</h1>
  5.     </body>
  6. </html>
  8. //app/http/Controllers/home/UserController.php
  9.  return view('home.user',['name'=>'PHP课程');

如果你的视图存储在 resources/views/admin/profile.blade.php，则可以这样引用它：

  1. return view('admin.user', $data);

视图优化

为了提高性能，你可能希望在部署过程中运行以下命令：

  1. php artisan view:cache

你可以使用 view:clear 命令清除视图缓存：

  1. php artisan view:clear

编译的视图将会存在 storage/framework/views/目录下。

如果不想您的数据被转义，那么您可使用如下的语法：

  1. {!! $name !!}.

模板变量

  1.  {{ time() }}.

渲染 JSON

  1. <script>
  2.     var app = @json($array);
  4.     var app = @json($array, JSON_PRETTY_PRINT);
  5. </script>

控制结构

If 语句

  1. @if (count($records) === 1)
  2.     I have one record!
  3. @elseif (count($records) > 1)
  4.     I have multiple records!
  5. @else
  6.     I don't have any records!
  7. @endif

Blade 还提供了一个 @unless 指令：

  1. @unless (Auth::check())
  2.     You are not signed in.
  3. @endunless

@isset 和 @empty 指令亦可作为它们所对应的 PHP 函数的快捷方式：

  1. @isset($records)
  2.     // $records 已经定义但不为空
  3. @endisset
  5. @empty($records)
  6.     // $records 为空……
  7. @endempty

switch

  1. @switch($i)
  2.     @case(1)
  3.         First case...
  4.         @break
  6.     @case(2)
  7.         Second case...
  8.         @break
  10.     @default
  11.         Default case...
  12. @endswitch

循环

  1. @for ($i = 0; $i < 10; $i++)
  2.     The current value is {{ $i }}
  3. @endfor
  5. @foreach ($users as $user)
  6.     <p>This is user {{ $user->id }}</p>
  7. @endforeach
  9. @forelse ($users as $user)
  10.     <li>{{ $user->name }}</li>
  11. @empty
  12.     <p>No users</p>
  13. @endforelse
  15. @while (true)
  16.     <p>I'm looping forever.</p>
  17. @endwhile

终止循环或跳过当前迭代：

  1. @foreach ($users as $user)
  2.     @if ($user->type == 1)
  3.         @continue
  4.     @endif
  6.     <li>{{ $user->name }}</li>
  8.     @if ($user->number == 5)
  9.         @break
  10.     @endif
  11. @endforeach

Loop 变量

  1. @foreach ($users as $user)
  2.     @if ($loop->first)
  3.         This is the first iteration.
  4.     @endif
  6.     @if ($loop->last)
  7.         This is the last iteration.
  8.     @endif
  10.     <p>This is user {{ $user->id }}</p>
  11. @endforeach

如果您在嵌套循环中，您可以使用循环的 $loop 的变量的 parent 属性访问父级循环：

  1. @foreach ($users as $user)
  2.     @foreach ($user->posts as $post)
  3.         @if ($loop->parent->first)
  4.             This is first iteration of the parent loop.
  5.         @endif
  6.     @endforeach
  7. @endforeach

注释

  1. {{-- 注释 --}}

PHP

  1. @php
  2.     //
  3. @endphp

表单

CSRF 域

任何您在应用中定义 HTML 表单的时候，您都应该在表单中包含一个隐藏的 CSRF token 域，这样一来， CSRF 保护 中间件便能校验请求。您可以使用 @csrf Blade 指令来生成一个 token 域：

  1. <form method="POST" action="/profile">
  2.     @csrf
  4.     ...
  5. </form>

方法域

由于 HTML 表单不能够构造 PUT ， PATCH 或 DELETE 请求，您需要添加隐藏的 _method 域来模拟这些 HTTP 动作。您亦可使用 @method Blade 指令来创建这个方法域：

  1. <form action="/foo/bar" method="POST">
  2.     @method('PUT')
  4.     ...
  5. </form>

引入子视图

Blade 的 @include 指令可用于从另一个视图包含一个 Blade 视图。子视图将继承父视图中所有可用的变量：

  1. <div>
  2.     @include('shared.errors')
  4.     <form>
  5.         <!-- Form Contents -->
  6.     </form>
  7. </div>

除了子视图继承父视图中所有可用的数据，您亦可通过数组将数据传递给子视图：

  1. @include('view.name', ['some' => 'data'])

模板继承

  1. // resources/views/layouts/app.blade.php
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <title>@yield('title','默认值')-PHP BOX</title>
  10.     <meta name="description"  content="@yield('description','默认值')">
  11.     <style>
  12.         .header{
  13. width: 100%;
  14.             height: 80px;
  15.             background: #2d3748;
  16.         }
  17.         .main{
  18. min-height: 600px;
  19.         }
  20.         .footer{
  21. width: 100%;
  22.             height: 80px;
  23.             background: aqua;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.  <div class="header">
  29. 顶部导航
  30.  </div>
  31. <div class="main">
  33.     @section('content')
  34.         主体代码块
  35.         @show
  36. </div>
  37. <div class="footer">
  38. 底部
  39. </div>
  40. </body>
  41. </html>

``php
// resources/views/user.blade.php

@extends(‘layouts.app’)

@section(‘title’,”个人中心”)

@section(‘content’)
@parent
<div>
<h1>我是个人中心</h1>
</div>
@endsection

  2. ## 组件
  4. 我们可以使用下面命令来创建组件

php artisan make:component Alert

  2. 那个 `make:component` 命令还将为组件创建视图模板。视图将放在 `resources/views/components` 目录中。为自己的应用程序编写组件时，组件会在 `app/View/components` 目录和 `resources/views/components` 目录中自动发现，因此通常不需要进一步的组件注册。
  4. 也可以在子目录中创建组件：
  6. ```php
  7. php artisan make:component Forms/Input

上面的命令将在 App\View\Components\Forms 目录中创建一个 Input 组件，该视图将放在 resources/views/Components/Forms 目录中。

渲染组件

要显示组件，可以在其中一个 Blade 模板中使用 Blade 组件标记。Blade 组件标记以字符串 x- 开头，后跟组件类的蛇形名称：

  1. <x-alert/>
  3. <x-user-profile/>

如果组件类嵌套在 App\View\Components 目录的更深处，则可以使用 . 字符表示目录嵌套。例如，如果我们假设一个组件位于 App\View\Components\Inputs\Button.php ，我们可以这样处理：

  1. <x-inputs.button/>

给组件传递数据

你可以使用 HTML 属性将数据传递给 Blade 组件。硬编码、原始值可以使用简单的 HTML 属性字符串传递给组件。PHP 表达式和变量应通过使用 : 字符作为前缀的属性传递给组件：

  1. <x-alert type="error" :message="$message"/>

类似于 VUE 组件语法

你应该在组件类的构造函数中定义组件所需的数据。组件上的所有公共属性将自动提供给组件的视图。不必从组件的 render 方法将数据传递到视图：

  1. <?php
  3. namespace App\View\Components;
  5. use Illuminate\View\Component;
  7. class Alert extends Component
  8. {
  9.     /**
  10.      * The alert type.
  11.      *
  12.      * @var string
  13.      */
  14.     public $type;
  16.     /**
  17.      * The alert message.
  18.      *
  19.      * @var string
  20.      */
  21.     public $message;
  23.     /**
  24.      * 创建组件实例
  25.      *
  26.      * @param  string  $type
  27.      * @param  string  $message
  28.      * @return void
  29.      */
  30.     public function __construct($type, $message)
  31.     {
  32.         $this->type = $type;
  33.         $this->message = $message;
  34.     }
  36.     /**
  37.      * 将一个视图或者字符串传递给组件用于渲染
  38.      *
  39.      * @return \Illuminate\View\View|\Closure|string
  40.      */
  41.     public function render()
  42.     {
  43.         return view('components.alert');
  44.     }
  45. }

渲染组件时，可以通过按名称回显变量来显示组件公共变量的内容：

  2. <div class="alert alert-{{ $type }}">
  3.     {{ $message }}
  4. </div>

驼峰命名

应使用 camelCase 指定组件构造函数参数，而在 HTML 属性中引用参数名称时应使用 kebab-case。例如，给定以下组件构造函数：

  1. /**
  2.  * 创建组件实例
  3.  *
  4.  * @param  string  $alertType
  5.  * @return void
  6.  */
  7. public function __construct($alertType)
  8. {
  9.     $this->alertType = $alertType;
  10. }

$alertType 参数可以使用如下所示的方式接受数据：

  1. <x-alert alert-type="danger" />

访问组件类中的属性和插槽

Blade 组件还允许你访问类的 render 方法中的组件名称、属性和插槽。但是，为了访问这些数据，应该从组件的 render 方法返回闭包。闭包将接收一个 $data 数组作为它的唯一参数。此数组将包含几个元素，这些元素提供有关组件的信息：

  1. /**
  2.  * 获取表示组件的视图/内容
  3.  *
  4.  * @return \Illuminate\View\View|\Closure|string
  5.  */
  6. public function render()
  7. {
  8.     return function (array $data) {
  9.         // $data['componentName'];
  10.         // $data['attributes'];
  11.         // $data['slot'];
  12.                  return 'components.alert';
  14.         return '<div>Components content</div>';
  16.         return <<<'blade'
  17.                 <div class="alert alert-danger">
  18.                     {{ $message }}
  19.                 </div>
  20.             blade;
  21.     };
  22. }

组件传递的数据无法修改,修改数据可以在构造函数中修改。

闭包应该返回一个字符串。如果返回的字符串与现有视图相对应，则将呈现该视图；否则，返回的字符串将作为内联 Blade 视图进行计算。

插槽

你通常需要通过 「插槽」 将其他内容传递给组件。通过回显 $slot 变量来呈现组件插槽。为了探索这个概念，我们假设 alert 组件具有以下内容： 类似VUE

  1. <!-- /resources/views/components/alert.blade.php -->
  3. <div class="alert alert-danger">
  4.     {{ $slot }}
  5. </div>

我们可以通过向组件中注入内容将内容传递到 slot ：

  1. <x-alert>
  2.     <strong>Whoops!</strong> Something went wrong!
  3. </x-alert>

有时，组件可能需要在组件内的不同位置渲染多个不同的插槽。让我们修改警报组件以允许注入 「标题」插槽：

  1. <span class="alert-title">{{ $title }}</span>
  3. <div class="alert alert-danger">
  4.     {{ $slot }}
  5. </div>

可以使用 x-slot 标记定义命名插槽的内容。任何不在显式 x-slot 标记中的内容都将传递给 $slot 变量中的组件：

  1. <x-alert>
  2.     <x-slot name="title">
  3.         Server Error
  4.     </x-slot>
  6.     <strong>Whoops!</strong> Something went wrong!
  7. </x-alert>

作用域插槽

如果你使用过诸如 Vue 之类的 JavaScript 框架，那么你可能熟悉 「作用域插槽」，它允许你从插槽中的组件访问数据或方法。通过在组件上定义公共方法或属性，并通过 $component 变量访问插槽中的组件，可以在 Laravel 中实现类似的行为。在本例中，我们假设 x-alert 组件在其组件类上定义了一个公共的 formatAlert 方法：

  1. <x-alert>
  2.     <x-slot name="title">
  3.         {{ $component->formatAlert('Server Error') }}
  4.     </x-slot>
  6.     <strong>Whoops!</strong> Something went wrong!
  7. </x-alert>

内联组件视图

  1. /**
  2.  * 获取表示组件的视图/内容。
  3.  *
  4.  * @return \Illuminate\View\View|\Closure|string
  5.  */
  6. public function render()
  7. {
  8.     return <<<'blade'
  9.         <div class="alert alert-danger">
  10.             {{ $slot }}
  11.         </div>
  12.     blade;
  13. }

使用组件布局

之前我们使用模板继承的方式进行布局。现在我们学习了组件 接下来我们使用组件的方式的来进行布局。

  1. // resources/views/components/layout.balde.php
  2. <html>
  3.     <head>
  4.         <title>{{ $title ?? 'Todo Manager' }}</title>
  5.           <style>
  6.         .header{
  7.             width: 100%;
  8.             height: 100px;
  9.             background-color:#f90;
  10.         }
  11.         .main{
  12.             display: flex;
  13.             width: 100%;
  14.             min-height:500px;
  15.         }
  16.         .ce{
  17.             width: 300px;
  18.             background-color:pink;
  19.         }
  20.         .content{
  21.             width: 100%;
  22.             background-color:#cbd5e0;
  23.         }
  24.     </style>
  25.     </head>
  27.     <body>
  28.       <header class="header"></header>
  29.     <div class="main">
  30.         <div class="ce">
  31.             我是侧边栏
  32.         </div>
  33.         <div class="content">
  34.                         {{ $slot }}
  35.         </div>
  36.     </div>
  37.     </body>
  38. </html>

应用布局组件

一旦定义了 layout 组件，我们就可以创建一个使用该组件的 Blade 视图。在本例中，我们将定义一个显示任务列表的简单视图：

  1. // resources/views/user.blade.php
  2. <x-layout>
  3.        <div>
  4.                 <h1>我是个人中心</h1>
  5.         </div>
  6. </x-layout>

请记住，注入到组件中的内容将提供给 layout 组件中的默认 $slot 变量。正如你可能已经注意到的，如果提供了 $title 插槽，那么我们的 layout 也会尊从该插槽；否则，将显示默认的标题。我们可以使用 x-slot插入标题

  2. <x-layout>
  3.     <x-slot name="title">
  4.         Custom Title
  5.     </x-slot>
  7.     @foreach ($tasks as $task)
  8.         {{ $task }}
  9.     @endforeach
  10. </x-layout>

更多相关文章

  1. Element Plus组件-按钮、图标、ColorPicker 颜色选择器、日历、R
  2. 认识组件库
  3. 【前端】移动端吸顶后页面滚动，导航也随之变化定位的组件 大家有
  4. 【前端】关于vue的data，和return data的区别？
  5. iOS tableView右侧索引视图状态获取的方法实例
  6. Vue一个通用的组件传递点击事件的两种种简单方法
  7. Vue组件为什么data必须是一个函数呢？本文案例详解
  8. PHP 服务器组件和变量
  9. react-redux源码不完全指北

随机推荐

  1. 如何在chart.js中为饼图添加标签
  2. 禁用Chrome严格的MIME类型检查
  3. JavaScript正则表达式定义字符集
  4. 用npm-run自动化任务
  5. “错误:路径必须是字符串”(v5.10.0)
  6. 放在和中的javascript语句，但是语句不在函
  7. 使用php Ajax在数据库中插入动态数据
  8. 打字稿：无法访问类属性[重复]
  9. Change ALL links, hrefs,urls with vani
  10. 1、突然对jQuery的心血来潮