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  阅读(231)  评论(0编辑  收藏  举报