# 视图

视图组件是采用框架内置模板引擎，暂不支持其他引擎。这套模板是根据我们研发多年经验总结出来，能满足99.999%的页面编写需求。

# 简述

视图文件统一使用.html后缀，调用$this->html($template, $vars = [])函数渲染。

控制器调用，例如:

    #[Get(uri: '/', desc: '模板')]
    public function index():HttpResponse
    {
        $this->assign('title', 'herosphp');
        return $this->view('index');
    }

在 BASE_PATH . '/views/default/' 目录下创建 index.html 文件，例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
</head>
<body>
<h3>welcome, Herosphp  demo</h3>
</body>
</html>

说明 default是指默认的Skin，我们进行改版时候会新建一个Skin。配置修改在config/app.php文件上。

# 渲染

渲染模板使用$this->html($template, $vars = [])

参数： $template 指向模板的位置，例如模板文件： BASE_PATH . '/views/default/index.html', $template = 'index'
参数： $vars 赋值操作，可以在模板使用此变量

# 赋值变量

使用 $this->assign($name, $value) 函数赋值变量，模板中变量左右需要用{} 包裹

$this->html($template, $vars = []) 第二个参数也可以赋值，在模板中使用方式跟下面一致
赋值单一变量， assign('version', '4.0.0'), 模板文件中使用,例如:
```
<h3>{$version}</h3>
```

数组赋值，暂时值支持一维数组，和二维数据，多层使用.拼接

assign('arr', [
        'name' => 'tom',
        'info' => [
            'age' => 1,
        ]
    ])

模板中使用：

<h3>name : {$arr.name}, age: {$arr.info.age} {$arr.info.extra.age}</h3>

# 流程控制

流程控制主要是对 if, foreach 进行实现

# 判断语句

if 语句 =>{if 条件} ... {/if}, 条件中语法和php语法一致， eg:
```
{if isset($name)}
<h3>hello , {$name}</h3>
{/if}
```

if-else 语句 => {if 条件} ... {else} ... {/if}, eg:

{if ($name === 'tom')}
<h3>tom, hello</h3>
{else}
<h3>unknown user</h3>
{/if}

if-elseif 语句 => {if 条件} ... {elseif} ... {else} ... {/if}, eg:

{if ($name === 'tom')}
<h3>tom, hello</h3>
{elseif $name === 'cat'}
<h3>hello, cat</h3>
{else}
<h3>unknown user</h3>
{/if}

# 循环

for 语句 {for 条件} ... {/for}, eg:

{for ($i = 0; $i < 3; $i++) }
<li>item:{$i}</li>
{/for}

foreach($data as $key => $value) 语句 => {loop $data $key $value} ... {/loop}

    $data = [
        'name' => 'tomcat',
        'age' => 1,
    ];
    assign('data', $data);

模板文件：

 {loop $data $key $value}
 <li>{$key} : {$value}</li>
 {/loop}

foreach($data as $value) 语句 => {loop $data $value} ... {/loop}

    $data = [
        [
            'name' => 'tomcat',
            'age' => 1,
        ],
        [
            'name' => 'tomcat2',
            'age' => 12,
        ]
    ];
    assign('data', $data);

模板文件：

 {loop $data2 $user}
 <li>{$user.name} : {$user.age}</li>
 {/loop}

# 运行原生语句

使用 {run 语句}， eg： <h2>{run echo date('Y-m-d H:i:s');}</h2>

# 加载静态资源

使用 {res:类型静态资源路径}，类新支持 css, less, js 三种类型，静态资源路径是指放在项目根目录下public文件夹下；比如 BASE_PATH . /public/static/js/demo.js 文件对应的静态资源路径是 static/js/demo.js

使用方式:

{res:css static/css/demo.css}
{res:js static/js/demo.js}

# 加载其他模板

主要用共用模板，公共模板提取出来，比如头，导航等，使用 {require 模板路径}

注意：这里的模板路径规则和使用view($template, $vars = []) $template 参数规则一致，但又有区别，这里使用 . 拼接路径， view() 参数里面使用 / 拼接路径。

例如:

<h1 class="demo"> css</h1>

{require demo.section}
{require demo.view.section2}

← 控制器依赖注入 →