美文网首页PHP知识
6 - laravel 基础 - 视图与模板引擎

6 - laravel 基础 - 视图与模板引擎

作者: _不能说的秘密i | 来源:发表于2018-09-21 10:32 被阅读3次

    视图

    视图(模板)文件默认存放在 /resources/views 目录中

    数据显示

    // 在控制器器中间数据传递给模板
    public function sendData () {
        return view('index.blade.php', ['title'=>'首页', 'content'=>'参数数据']);
    }
    
    // 在视图中显示数据, 使用小胡子语法
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> {{title}} </title>
    </head>
    <body>
        <h1> {{content}}, 使用PHP代码,获取时间 {{date('Y-m-d')}} </h1>
    
        // 判断数据是否存在并输出
        {{ $name Or 'default' }} // 等价于: {{ isset($name) ? $name : 'Default' }}
    
        // 显示原生数据(原样显示)
        {!! $name !!} // 显示为 $name
    
    // 渲染 json
    <script>
        var json = @json($array);
    </script>
    </body>
    </html>
    

    判断视图是否处在

    use Illuminate\Support\Facades\View;
    if (View::exists('admin.user.index')) {
        echo '存在';
    }
    

    前端框架冲突解决

    由于很多 JavaScript 框架也是用花括号来表示要显示在浏览器中的表达式, 如 Vue angular
    可以使用 @ 符来使 Blade 渲染引擎该表达式应该保持原生格式不作改动, 但是如果有多个{{}}语法
    的JavaScript变量,可以使用 @verbatim 来批量设置

    @{{ name }}
    
    @verbatim
    <div class="container">
        {{ name }}
        {{ age }}
        {{ sex }}
    </div>
    @endverbatim
    

    blade模板引擎

    blade模板引擎,必须是以 .blade.php 后缀的文件

    模板继承

    • @yield() 定义区块
    • @section() @show 定义区块
    • @exends() 继承其他模板
    • @section() @endsection/@stop 定义区块
    • {{ $slot }} 定义插槽
    • @component() @endcomponent 使用组件

    定义/继承 布局

    • 定义布局 main.blade.php
    {{-- 这是模板注释, 模板注释在浏览器中是看不到的 --}}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>@yilde('title', 'default title')</title>
    </head>
    <body>
        @section('content')
    
        @show
    </body>
    </html>
    
    • 继承布局
    @extends('main.blade.php')
    @section('title', 'test title content')
    @section('section')
        <p>中间内容部分...</p>
    @endsection
    

    组件/插槽 使用

    • 定义组件 alert.blade.php
    <div class="alert alert-danger">
        <div class="alert-title">{{ $title }}</div>
        <div class="alert-content">
            {{$content}}
        </div>
    </div>
    
    • 使用组件
    @component('alert')
        @slot('title')
            mysql错误: 
        @endslot
    
        @slot('content')
            sql语句执行异常..
        @endslot
    @endcomponent
    

    流程控制

    • 分支结构
    // 单分支
    @if(true)
        hello world
    @endif
    
    // 多分支
    @if(false)
        hello
    @elseif(true)
        world
    @else
        php
    @endif
    
    • 循环结构
    // for
    @for (\$i = 0; \$i < 10; \$i++)
        {{ \$i }}
    @endfor
    
    // foreach
    @foreach ($users as $user)
        <p>This is user {{ $user->id }}</p>
        <p>This is user {{ $user->name }}</p>
        <p>This is user {{ $user->age }}</p>
    @endforeach
    
    // 条件为 true 就 continue/break
    @foreach ($users as $user)
        @continue($user->type == 1)
        <li>{{ $user->name }}</li>
        @break($user->number == 5)
    @endforeach
    
    • 原生的PHP代码
    @php
        echo 'hello world';
    @endphp
    
    • 包含子视图
    @include('layout.main');
    @include('layout.main', ['name'=>'alex', 'age'=>20]);
    

    相关文章

      网友评论

        本文标题:6 - laravel 基础 - 视图与模板引擎

        本文链接:https://www.haomeiwen.com/subject/cykanftx.html