Blade 模板引擎

1，Blade 模板引擎有三种常见的语法：

通过 {{ }} 渲染 PHP 变量（最常用）
通过 {!! !!} 渲染原生 HTML 代码（用于富文本数据渲染）
通过以 @ 作为前缀的 Blade 指令执行一些控制结构和继承、引入之类的操作

<h1>{{ $name }}</h1> 
{!!  html !!} 
@ if($users==1) 
   代码
@endif

@empty 
    该组中没有任何用户 
@endempty

2，Blade 模板代码存放在以 .blade.php 后缀结尾的视图文件中，最终会被编译为原生 PHP 代码，并缓存起来，直到视图模板有修改才会再次编译，所以拥有与原生 PHP 几乎一致的性能。可以在 Blade 模板中使用原生 PHP 代码。

3，通过{{$name}} 等价于 <?php echo htmlentities($name);?>

{{ isset($name) ? $name : 'Default' }}等价于{{ $name or 'Default' }}

4, {{-- 注释内容 --}}

5,html页面中的js渲染，使用@{{$vuedata}}

// Blade 引擎会将其编译为对应的 PHP 代码
{{ $phpData }}
// Blade 引擎编译时会移除 @，保留 {{ $vueData }} 结构
@{{ $vueData }}

6，控制语句

@if (count($students) === 1) 
    操场上只有一个同学
@elseif (count($students) === 0)
    操场上一个同学也没有
@else
    操场上有 {{ count($students) }} 个同学
@endif

@unless ($user->hasPaid()) 
    用户支付之后才能享受该服务
@endunless

@isset($records)
    // 记录被设置
@endisset

@empty($records)
    // 记录为空
@endempty

@switch($i)
    @case(1)
        // $i = 1 做什么
        @break

    @case(2)
        // $i = 2 做什么
        @break

    @default
        // 默认情况下做什么
@endswitch

// for 循环
@for ($i = 0; $i < $talk->slotsCount(); $i++) 
    The number is {{ $i }}<br> 
@endfor

// foreach 循环
@foreach ($talks as $talk)
    {{ $talk->title }} ({{ $talk->length }} 分钟)<br> 
@endforeach

// while 循环  
@while ($item = array_pop($items)) 
    {{ $item->orSomething() }}<br> 
@endwhile

@forelse ($students as $student)
    // do something ...
@empty
    // do something else ...
@endforelse

<ul> 
@foreach ($pages as $page)
    @if ($loop->first)
        // 第一个循环迭代
    @endif 
    <li>{{ $loop->iteration }}: {{ $page->title }} 
        @if ($page->hasChildren()) 
        <ul> @foreach ($page->children() as $child) 
            <li>{{ $loop->parent->iteration }}. {{ $loop->iteration }}: {{ $child->title }}</li> 
            @endforeach 
        </ul> 
        @endif 
    </li> 
    @if ($loop->last)
        // 最后一个循环迭代
    @endif
@endforeach 
</ul>

7，通过@include 引入组件

<!-- resources/views/sign-up-button.blade.php --> 
<a class="button button--callout" data-page-name="{{ $pageName }}">
    <i class="exclamation-icon"></i> {{ $text }} 
</a>


-----------------------------------------------

<!-- resources/views/home.blade.php --> 
<div class="content" data-page-name="{{ $pageName }}">
    <p>为什么要注册 Laravel 学院: <strong>能提供更多服务</strong></p>
    @include('sign-up-button', ['text' => '看看到底有哪些服务']) 
</div>

8，模板继承：@extends 指令来明确的指定继承某个布局，@section 指令就如它的名字所暗示的那样定义了一个内容区块，而 @yield 指令是用来显示所提供的挂件区块所包含的内容。

第一种：

父视图中：使用 @yield("content") ，留出子视图显示位置。

子视图中：先使用 @extends("parent_filename") 先继承父视图，再使用 @section("content") //子视图内容 ... @endsection 继承父视图中的位置。

第二种：

父视图中：使用 @section("flag-name") //父视图内容 ... @show 留出继承区域位置。

子视图中：使用 @extends("父模板文件名") 继承父视图；

使用 @section("flag-name") 继承 flag-name 标记位；

使用 @parent 可以调用父视图对应标签中的内容；

使用 @endsection 或 @stop 结束一个位置的继承，@endsection 和@stop 的不同是，@endsection 之后，当前文件还可以被其它文件继承，而@stop 则表示终止，不再被继承。

例子：

父视图

//demo.blade.php
html>
    <head>
        <title>App Name - @yield('title')</title>
        <style>
        *{
            font-size: 14px;
        }
        </style>
    </head>
    <body>
        @section('sidebar')
            这是父元素的 sidebar ***
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

子视图

{{-- 注释部分 --}}
{{-- 保存在 resources/views/index.blade.php 文件中  --}}
{{-- 在子页面 index.blade.php引入父页面demo.blade.php） --}}

@extends('components.demo')

@section('title', 'Page Title')

@section('sidebar')
    @parent
    <p>+我是子页面的一段内容要添加在父页面的sidebar里面</p>
@endsection

@section('content')
    <p>+这是 子页面 的 content的内容</p>
@endsection

@yield 指令是用来显示指定部分的内容；

@section 指令定义了视图的一部分布局内容。指令的参数与子视图相对应，就会显示匹配的内容。

@extends('components.demo')
继承resources/views/components/demo.blade.php 的文件内容

@section('title', 'Page Title')
匹配父视图的的title属性，然后替换内容显示为 Page Title；
如果没有传第二个参数，就以 @endsection 结束，之间的内容为匹配要显示的内容

@endsection 指令仅定义了一个片段，
@show 则在定义的同时立即 yield 这个片段。如果不加 @show，在页面中不会显示@section指令的内容

@parent 指令向布局的 sidebar 追加（而非覆盖）内容，
@parent 指令将被布局中的内容替换（不会显示指令，只会内容）

@yield 指令还接受一个默认值作为第二个参数。
如果被「yield」的片段未定义，则该默认值就会被渲染。
例如： @yield('content', 'my_test') // 默认显示内容 my_test

9，堆，使用push压入内容，使用 @stack 来渲染堆

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

使用

<head>
  <!-- Head Contents -->

  @stack('scripts')
</head>

posted @ 2021-09-25 22:20 fsl 阅读(547) 评论(0) 编辑收藏举报

刷新页面返回顶部

feng

Blade 模板引擎