Blade指令 #

一、指令概述 #

Blade指令以 @ 符号开头，提供了丰富的模板功能。

text

Blade指令分类
├── 控制结构
│   ├── @if, @elseif, @else
│   ├── @for, @foreach, @while
│   └── @switch
├── 包含指令
│   ├── @include
│   ├── @each
│   └── @yield
├── 布局指令
│   ├── @extends
│   ├── @section
│   └── @parent
├── 辅助指令
│   ├── @csrf
│   ├── @method
│   └── @error
└── 自定义指令

二、控制结构指令 #

2.1 条件指令 #

blade

<!-- @if 系列 -->
@if($condition)
    条件为真
@elseif($anotherCondition)
    另一个条件为真
@else
    条件为假
@endif

<!-- @unless -->
@unless($condition)
    条件为假时显示
@endunless

<!-- @isset -->
@isset($variable)
    变量已设置
@endisset

<!-- @empty -->
@empty($array)
    数组为空
@endempty

<!-- @auth / @guest -->
@auth
    已登录
@endauth

@guest
    未登录
@endguest

<!-- 指定守卫 -->
@auth('admin')
    管理员已登录
@endauth

2.2 循环指令 #

blade

<!-- @for -->
@for($i = 0; $i < 10; $i++)
    第 {{ $i }} 次
@endfor

<!-- @foreach -->
@foreach($users as $user)
    {{ $user->name }}
@endforeach

<!-- @forelse -->
@forelse($posts as $post)
    {{ $post->title }}
@empty
    没有文章
@endforelse

<!-- @while -->
@while($condition)
    循环内容
@endwhile

<!-- 循环控制 -->
@foreach($users as $user)
    @if($user->blocked)
        @continue
    @endif
    
    @if($user->isAdmin)
        @break
    @endif
    
    {{ $user->name }}
@endforeach

<!-- 带条件的循环控制 -->
@foreach($users as $user)
    @continue($user->blocked)
    @break($user->isAdmin)
    {{ $user->name }}
@endforeach

2.3 switch指令 #

blade

@switch($status)
    @case('active')
        <span class="badge badge-success">激活</span>
        @break
    
    @case('pending')
        <span class="badge badge-warning">待审核</span>
        @break
    
    @case('inactive')
        <span class="badge badge-secondary">未激活</span>
        @break
    
    @default
        <span class="badge badge-dark">未知</span>
@endswitch

三、包含指令 #

3.1 @include #

blade

<!-- 基本包含 -->
@include('partials.header')

<!-- 传递数据 -->
@include('partials.user-card', ['user' => $user])

<!-- 条件包含 -->
@includeIf('partials.sidebar')

<!-- 当条件为真时包含 -->
@includeWhen($showFooter, 'partials.footer')

<!-- 当条件为假时包含 -->
@includeUnless($hideAds, 'partials.ads')

<!-- 包含第一个存在的视图 -->
@includeFirst(['custom.header', 'partials.header'])

3.2 @each #

blade

<!-- 渲染集合 -->
@each('partials.user-card', $users, 'user')

<!-- 带空视图 -->
@each('partials.user-card', $users, 'user', 'partials.empty-users')

3.3 @once #

blade

@once
    <script>
        // 只执行一次的代码
    </script>
@endonce

四、表单指令 #

4.1 @csrf #

blade

<form method="POST" action="/users">
    @csrf
    <!-- 表单字段 -->
</form>

4.2 @method #

blade

<form method="POST" action="/users/1">
    @method('PUT')
    @csrf
    <!-- 表单字段 -->
</form>

4.3 @error #

blade

<!-- 检查是否有错误 -->
@error('email')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

<!-- 指定错误包 -->
@error('email', 'login')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

五、堆栈指令 #

5.1 @push和@stack #

blade

<!-- 定义堆栈位置 -->
<head>
    @stack('scripts')
</head>

<!-- 向堆栈添加内容 -->
@push('scripts')
    <script src="/example.js"></script>
@endpush

<!-- 添加到堆栈开头 -->
@prepend('scripts')
    <script src="/important.js"></script>
@endprepend

5.2 实际应用 #

blade

<!-- 布局文件 -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
    @stack('head')
</head>
<body>
    @yield('content')
    
    <script src="/app.js"></script>
    @stack('scripts')
</body>
</html>

<!-- 页面文件 -->
@extends('layouts.app')

@push('head')
    <link href="/page.css" rel="stylesheet">
@endpush

@push('scripts')
    <script src="/page.js"></script>
@endpush

@section('content')
    页面内容
@endsection

六、辅助指令 #

6.1 @php #

blade

@php
    $total = 0;
    foreach($items as $item) {
        $total += $item->price;
    }
@endphp

<p>总价: {{ $total }}</p>

6.2 @class #

blade

<div @class([
    'alert',
    'alert-success' => $success,
    'alert-danger' => $error,
    'alert-warning' => $warning,
])>
    消息内容
</div>

6.3 @style #

blade

<div @style([
    'color: red',
    'font-weight: bold' => $important,
    'text-align: center' => $centered,
])>
    文本内容
</div>

6.4 @checked #

blade

<input type="checkbox" @checked($user->active)>

6.5 @selected #

blade

<select name="status">
    <option value="active" @selected($user->status === 'active')>激活</option>
    <option value="inactive" @selected($user->status === 'inactive')>禁用</option>
</select>

6.6 @disabled #

blade

<button @disabled($formSubmitted)>提交</button>

6.7 @readonly #

blade

<input type="text" @readonly($user->isLocked)>

6.8 @required #

blade

<input type="text" @required($field->required)>

七、JavaScript指令 #

7.1 @json #

blade

<script>
    var user = @json($user);
    var settings = @json([
        'theme' => 'dark',
        'lang' => 'zh',
    ]);
</script>

7.2 @verbatim #

blade

@verbatim
    <div>
        {{ 这不会被Blade处理 }}
        {{ $variable }}
    </div>
@endverbatim

八、生产指令 #

8.1 @production #

blade

@production
    <!-- 只在生产环境显示 -->
    <script>
        // 生产环境分析代码
    </script>
@endproduction

8.2 @env #

blade

@env('local')
    <!-- 只在本地环境显示 -->
    <div class="debug-info">
        调试信息
    </div>
@endenv

@env(['local', 'staging'])
    <!-- 在本地和测试环境显示 -->
@endenv

九、自定义指令 #

9.1 注册自定义指令 #

php

// app/Providers/AppServiceProvider.php

public function boot()
{
    Blade::directive('datetime', function ($expression) {
        return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
    });
    
    Blade::directive('money', function ($expression) {
        return "<?php echo number_format($expression, 2); ?>";
    });
}

9.2 使用自定义指令 #

blade

<p>日期: @datetime($post->created_at)</p>
<p>金额: @money($order->total)</p>

9.3 自定义if语句 #

php

Blade::if('admin', function () {
    return auth()->check() && auth()->user()->isAdmin();
});

Blade::if('role', function ($role) {
    return auth()->check() && auth()->user()->hasRole($role);
});

blade

@admin
    <p>管理员内容</p>
@endadmin

@role('editor')
    <p>编辑内容</p>
@endrole

9.4 自定义组件标签 #

php

Blade::component('components.alert', 'alert');

blade

<x-alert type="success">
    操作成功
</x-alert>

十、常用自定义指令示例 #

10.1 格式化指令 #

php

// 日期格式化
Blade::directive('date', function ($expression) {
    return "<?php echo ($expression)->format('Y-m-d'); ?>";
});

// 时间格式化
Blade::directive('time', function ($expression) {
    return "<?php echo ($expression)->format('H:i:s'); ?>";
});

// 货币格式化
Blade::directive('currency', function ($expression) {
    return "<?php echo '¥' . number_format($expression, 2); ?>";
});

10.2 条件指令 #

php

// 检查权限
Blade::if('can', function ($permission) {
    return auth()->check() && auth()->user()->can($permission);
});

// 检查订阅
Blade::if('subscribed', function () {
    return auth()->check() && auth()->user()->subscribed();
});

blade

@can('edit-posts')
    <a href="/posts/create">创建文章</a>
@endcan

@subscribed
    <p>高级功能</p>
@elsesubscribed
    <a href="/subscribe">订阅</a>
@endsubscribed

10.3 辅助指令 #

php

// 截断文本
Blade::directive('truncate', function ($expression) {
    return "<?php echo Str::limit($expression, 100); ?>";
});

// 安全输出
Blade::directive('safe', function ($expression) {
    return "<?php echo e($expression); ?>";
});

十一、指令最佳实践 #

11.1 避免复杂逻辑 #

blade

{{-- 不推荐 --}}
@if(User::where('active', 1)->count() > 0)
    ...
@endif

{{-- 推荐：在控制器中处理 --}}
@if($hasActiveUsers)
    ...
@endif

11.2 使用组件替代复杂指令 #

blade

{{-- 不推荐：复杂的自定义指令 --}}
@formatUser($user, ['showEmail' => true, 'showPhone' => false])

{{-- 推荐：使用组件 --}}
<x-user-card :user="$user" show-email />

11.3 合理使用@once #

blade

{{-- 只需要执行一次的代码 --}}
@once
    <script>
        // 初始化代码
    </script>
@endonce

十二、指令性能优化 #

12.1 视图缓存 #

bash

# 缓存视图
php artisan view:cache

# 清除视图缓存
php artisan view:clear

12.2 避免运行时计算 #

php

// 不推荐
Blade::directive('users', function () {
    return "<?php echo App\Models\User::count(); ?>";
});

// 推荐：在控制器中传递数据
return view('dashboard', ['userCount' => User::count()]);

十三、总结 #

13.1 核心指令 #

指令	用途
@if/@else/@endif	条件判断
@foreach/@endforeach	循环遍历
@include	包含视图
@push/@stack	堆栈管理
@csrf	CSRF保护
@method	表单方法伪装
@error	错误显示

13.2 自定义指令 #

方法	用途
Blade::directive()	自定义指令
Blade::if()	自定义条件
Blade::component()	注册组件

13.3 下一步 #

掌握了Blade指令后，让我们继续学习数据库配置，了解Laravel数据库操作！