Laravel学习记录--laravel模板

Laravel模板 resources/views

模板后缀:
模板名以php结尾 在模板中需使用 php原生解析变量
模板名blade.php结尾 直接使用{{变量}}即可
如果有xx.php 和 xxb.lade.php两个同名模板,优先使用blade模板
laravel 方法名不需要与模板名对应

展示模板
1. return view(‘模板名’,参数)
传递一维数组,模板直接调用数组元素
2.return view(‘模板名’,[‘data’=>$data]);
传递二维数组
3.return view(‘模板名’,compact(‘data’))
等同于第二种方法,这里不需要加变量符号
blade模板使用标签

  1. 判断语句
    @if(条件语句)
    执行语句
    @elseif(条件语句)
    执行语句
    @else
    执行语句
    @endif

    @unless(条件语句)
    除非…
    执行语句
    @endunless

    判断变量是否存在
    @isset(变量)
    执行语句
    @endisset

    判断变量是否为空
    @empty(变量)
    执行语句
    @endempty

    switch 语句
    @switch(…)
    @case(…)

    @break

    @default

    @endswitch
    2.循环语句
    a.@foreach($data as $v)

    @endforeach

    b.@forelse($data as $v)

    @empty
    …值为空时执行语句
    @endforelse

模板使用php原生代码
@php

@endphp
模板引用
@include(模板名)引入子模板
问题引入:
当页面大部分内容都一样,只有其中一小块区域要发生改变时,这时候使用include还能满足需求吗?
显然不能!
这时候可以使用laravel的模板继承,类似于面向对象的思想,子模板继承父模板,同时子模板可对父模板的“方法”进行重写
使用方法:

1. section
父模板中要变化的地方键入
@section(name)

扫描二维码关注公众号,回复: 8802833 查看本文章
 @show

子模板继承
@extends(‘父模板名’)
@section(‘父模板的section_name’)
这里键入重写内容
@endsection

 下面举个简单例子
<h1>父模板原有内容</h1>
	<ul>
		<li>0</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>


	<h1>继承</h1>
	@section('con')
    <p>this is parent</p>
	@show

    //父模板con区域中 显示父模板原有内容“this is parent”
```php

在这里插入图片描述

//----------------子模板--------------------------
@extends('parent')//继承父模板parent
@section('con')//重写con区域
<h2>子模板修改内容</h2>
@endsection

效果图
在这里插入图片描述
子模板对父模板的con区域进行了重写,并且没有显示父模板原有的“this is parent” ,如果我们想显示父模板的内容使用@parent即可
在这里插入图片描述
2.@yield
yield相对于一个占位符

<h1>@yield('zan')</h1>

子模板

@extends('parent')
@section('zan','子模板内容')

或者

@extends('parent')
@section('zan')
<i>子模板<i>
@endsection

section于yield的区别简谈
@yield类似于占位符
@section类似于存储区域 ,使用@section子模板可以调用父模板的内容
组件与插槽
组件:网页中的一些元素,会页面多次出现,但其结构相同只是内容不同 这时候可以将其单独写出一个模板文件方便在各个地方都能调用,这个文件就是组件

插槽:组件中留出的内容占位符
定义组件
如:error.blade.php

  <div>
    <div class='error'>{{$插槽名}}</div>
    $slot是组件默认插槽,没有指定插槽的数据将被插入到$slot<div class='default'>{{$slot}}</div>
   </div>

调用组件
@component(‘组件名’)
@slot(‘插槽名’)
插槽内容…
@endslot
未定义插槽内容存储到$slot中
@endcomponent
模板中
在双大括号前加@表示不解析变量
@{{input}}
{!!input!!}:不将{内的代码转义}

发布了17 篇原创文章 · 获赞 0 · 访问量 464

猜你喜欢

转载自blog.csdn.net/weixin_45143481/article/details/103934940