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前端网发表,如需转载,请注明页面地址。
code前端网