zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    perf-stat
    perf原理
    ubuntu中Docker的安装与使用
    NVM相关手册及新特性理解
    #2018BIT软件工程基础#结对项目:四则运算题目生成
    #2018BIT软件工程基础#个人项目:数独
    第一篇博文:自我介绍&新学期展望
    越早明白这些道理,越能少走一些弯路
    把知识连接起来就是创意
    【翻译】24款界面精美的免费UI工具包
  • 原文地址:https://www.cnblogs.com/fslnet/p/15335818.html
Copyright © 2011-2022 走看看