Laravel通过blade模板引擎实现视图渲染
Laravel提供了blade模板引擎来进行视图渲染。 PHP代码可以直接在blade中使用,而blade最终会在PHP中进行编译和缓存。仅当blade文件改变时。稍后重新编译,可以节省成本并提高应用程序性能。blade档案.作为视图文件,它存储在 laravel 的 resources/views 目录中。
1。定义模板
blade定义模板页面的方式与创建HTML页面相同,只不过使用@section或@yield来正确定位。当其他页面引用模板页面时,内容将填充到占位符中。位置足够
<html> <head> <title>@yield('title')</title> </head> <body> <header class="header"> @section('header') 这是头部<br> @show </header> <div class="middle"> <aside class="aside"> 这是侧边栏 @yield('aside') </aside> <div class="content"> @section('content') 这是主体内容 @show </div> </div> <footer class="footer"> 这是底部 @yield('footer') </footer> </body> </html>
部分和产量都是占位符。差异反映在参考模板中。当使用yield时,指定的占位符被完全替换,而当使用section时@section可以通过@parent保留。 ()~@显示内容。
如果需要将外部js、css文件引入到blade中,可以使用相对于public文件夹的绝对路径。例如,要引入位于 public/css/ 中的内置引导程序,您可以使用
2。参考模板
要参考模板,首先通过@extends()引入要使用的模板。模板位置是相对于视图地图的。然后通过@section()~@stop在模板的指定位置填写需要替换的内容(注意定义模板时与@section~@show的区别),例如填写与header:
@extends('') {{--引入模板views/template/layout.--}} @section('title') 登录界面 @stop @section('header') {{--填充到header对应的占位符--}} @parent {{--保留模板原内容--}} 头部替换内容 @stop
引入组件:通过@component引入组件模板。例如,定义了一个错误组件的通用警告:
<div style="color: #ff5b5d;"> <h5>{{$title}}</h5> {{$slot}} </div>
在页面中使用该组件:
@component('') {{--引入组件views/template/alert.--}} @slot('title') {{--指定替代组件中的$title位置--}} alert标题 @endslot alert组件内容 @endcomponent
@component~@endcomponent 之间的内容会自动替换 {{$slot}} 组件,如果你想指定替换位置,可以通过@slot()~@endslot
引入子视图:如果想在页面中引入Future子视图,可以使用@include()
@include('')
通过{ { $var}} ,里面的指令经过PHP的htmlentities函数处理,防止XSS攻击。例如,向控制器引入视图时,传递变量参数:
public static function showBlade(){ return view('',['var'=>'test']); }
在blade中使用这个变量
变量为:{{isset($var)? $var: '默认值'}}
有时我们希望blade不要按原样解析并输出文本。例如,vue 中也使用 {{}} 来包装变量。我们不想让blade来写它。这种情况下我们可以使用@:
原始文本输出:@{{ $ var }}
3。流程控制
blade提供了一套流程控制指令来控制页面渲染,使得页面渲染速度更快。这些控制指令与PHP非常相似。
if判断:
@if ($val >80) 优秀 @elseif ($val>60) 及格 @else 不及格 @endif
循环:
@for ($i = 0; $i < 10; $i++) The current value is {{ $i }} @endfor @foreach ($users as $user) <p>This is user {{ $user->id }}</p> @endforeach
切换分支:
@switch($i) @case(1) First case... @break @case(2) Second case... @break @default Default case... @endswitch
认证:@auth和@guest语句可用于快速判断当前用户是否登录:
@auth // 用户已登录... @endauth @guest // 用户未登录... @endguest
版权声明
本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。