Viewi组件完全入门一个HTML加一个PHP文件如何构建可交互UI【免费下载链接】viewiUnique and efficient front-end framework for PHP项目地址: https://gitcode.com/gh_mirrors/vi/viewiViewi 是一款为 PHP 开发者打造的独特且高效的前端框架它的组件模式简单到令人惊讶一个 HTML 文件写界面一个 PHP 文件写逻辑两者组合就能构建出可交互的响应式 UI。本文将从零开始带你快速理解 Viewi 组件的运作方式。为什么 Viewi 适合 PHP 开发者上手响应式 UI传统做法中PHP 负责吐出静态 HTML而按钮点击、数据刷新等交互必须交给 JavaScript 框架完成——这意味着你要维护两套心智模型。Viewi 的思路很直接用你熟悉的 PHP 写一切。界面用类 HTML 模板描述写法和普通 HTML 几乎没有区别逻辑、数据、事件处理全部写在 PHP 类中继承自 BaseComponent框架自动把 PHP 中的交互方法转译成浏览器里运行的响应式代码转译核心见 JsTranspiler.php。对新手来说最大的好处是不需要学 JS 框架也能做出点一下就刷新的界面。快速上手新建一个 Viewi 项目Viewi 通过 Composer 安装要求 PHP 8.0 及以上见 composer.jsoncomposer create-project viewi/viewi my-app命令行工具会自动生成一套开箱即用的项目骨架模板位于 stubs/new-app/。生成后的目录长这样目录/文件作用Views/Home/首页组件HomePage.html HomePage.phpViews/Common/通用组件如顶部菜单 MenuBarViews/Layouts/页面布局模板 Layoutroutes.php路由配置把 URL 指向组件类assets/样式文件内置 mui 移动端样式组件解剖一个 HTML 一个 PHP 是黄金搭档以脚手架自带的首页为例它由两个文件组成。界面文件stubs/new-app/NS/Views/Home/HomePage.htmlLayout title$title h1$title/h1 /Layout逻辑文件stubs/new-app/NS/Views/Home/HomePage.phpclass HomePage extends BaseComponent { public string $title Viewi - Reactive application for PHP; }规则非常简单同名文件成对出现HomePage.htmlHomePage.php框架自动配对PHP 类中的公共属性会直接暴露给模板$title就是这么被渲染出来的HTML 里的大写标签如Layout、MenuBar是组件引用可以直接嵌套复用布局中预留的slot/slot见 stubs/new-app/NS/Views/Layouts/Layout.html会被组件自身的内容填充。最后还差一步——在路由中挂上组件stubs/new-app/routes.php 中只需一行$router-get(/, HomePage::class);访问首页Viewi 就会把这对 HTML PHP 文件编译成完整的响应式页面。让界面动起来属性绑定与事件处理真正体现可交互的是模板的两种语法属性绑定和事件绑定。看一个官方博客示例来自 README.mddiv Thumbnail blog$blog / a href{$blog-url} h3{$blog-title}/h3 p{$blog-description}/p /a LikeButton liked{$blog-favorite} (click)like / /div对应的 PHP 类只有一个方法class Blog extends BaseComponent { public BlogModel $blog; public function like() { $this-blog-favorite !$this-blog-favorite; } }拆解一下发生了什么liked{$blog-favorite}把 PHP 属性值绑定到组件属性上数据变了界面自动更新(click)like监听点击事件点击后调用 PHP 里的like()方法like()修改数据后Viewi 的响应式机制会自动重新渲染依赖该数据的界面——你写的是 PHP运行在浏览器里的却是实时响应的 UI。上图正是这个示例的运行效果点赞按钮的状态由 PHP 数据驱动交互却发生在浏览器端毫无跳转。进阶方向生命周期、路由与工具函数掌握HTML PHP 双文件的基本功后可以沿以下路径继续深入生命周期钩子OnInit初始化、OnMounted挂载完成等位于 src/Viewi/Components/Lifecycle/适合在组件就绪时加载数据客户端路由ClientRoute.php 支持无刷新切换页面构建单页应用体验PHP 函数转译Viewi 内置了数百个常用 PHP 函数的浏览器端实现数组、字符串、日期、数学等位于 src/Viewi/PhpJsFunctions/意味着你的 PHP 代码可以直接跑在浏览器里构建与优化组件会被 Builder.php 打包分块配合 CssBundle.php 等资产组件自动合并、压缩 CSS。小结PHP 也能优雅地做前端回顾一下 Viewi 组件入门的完整链路一个HTML 模板描述界面支持属性绑定$xxx和事件绑定(click)一个PHP 类继承 BaseComponent存放数据与交互逻辑路由把 URL 指向组件类框架负责编译、响应式更新与资源打包。如果你的目标是只用 PHP 就构建可交互的 Web 界面Viewi 提供了一个几乎零切换成本的方案——界面思维还是 HTML逻辑语言还是 PHP交互能力却是现代前端级别的。【免费下载链接】viewiUnique and efficient front-end framework for PHP项目地址: https://gitcode.com/gh_mirrors/vi/viewi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Viewi组件完全入门：一个HTML加一个PHP文件如何构建可交互UI
Viewi组件完全入门一个HTML加一个PHP文件如何构建可交互UI【免费下载链接】viewiUnique and efficient front-end framework for PHP项目地址: https://gitcode.com/gh_mirrors/vi/viewiViewi 是一款为 PHP 开发者打造的独特且高效的前端框架它的组件模式简单到令人惊讶一个 HTML 文件写界面一个 PHP 文件写逻辑两者组合就能构建出可交互的响应式 UI。本文将从零开始带你快速理解 Viewi 组件的运作方式。为什么 Viewi 适合 PHP 开发者上手响应式 UI传统做法中PHP 负责吐出静态 HTML而按钮点击、数据刷新等交互必须交给 JavaScript 框架完成——这意味着你要维护两套心智模型。Viewi 的思路很直接用你熟悉的 PHP 写一切。界面用类 HTML 模板描述写法和普通 HTML 几乎没有区别逻辑、数据、事件处理全部写在 PHP 类中继承自 BaseComponent框架自动把 PHP 中的交互方法转译成浏览器里运行的响应式代码转译核心见 JsTranspiler.php。对新手来说最大的好处是不需要学 JS 框架也能做出点一下就刷新的界面。快速上手新建一个 Viewi 项目Viewi 通过 Composer 安装要求 PHP 8.0 及以上见 composer.jsoncomposer create-project viewi/viewi my-app命令行工具会自动生成一套开箱即用的项目骨架模板位于 stubs/new-app/。生成后的目录长这样目录/文件作用Views/Home/首页组件HomePage.html HomePage.phpViews/Common/通用组件如顶部菜单 MenuBarViews/Layouts/页面布局模板 Layoutroutes.php路由配置把 URL 指向组件类assets/样式文件内置 mui 移动端样式组件解剖一个 HTML 一个 PHP 是黄金搭档以脚手架自带的首页为例它由两个文件组成。界面文件stubs/new-app/NS/Views/Home/HomePage.htmlLayout title$title h1$title/h1 /Layout逻辑文件stubs/new-app/NS/Views/Home/HomePage.phpclass HomePage extends BaseComponent { public string $title Viewi - Reactive application for PHP; }规则非常简单同名文件成对出现HomePage.htmlHomePage.php框架自动配对PHP 类中的公共属性会直接暴露给模板$title就是这么被渲染出来的HTML 里的大写标签如Layout、MenuBar是组件引用可以直接嵌套复用布局中预留的slot/slot见 stubs/new-app/NS/Views/Layouts/Layout.html会被组件自身的内容填充。最后还差一步——在路由中挂上组件stubs/new-app/routes.php 中只需一行$router-get(/, HomePage::class);访问首页Viewi 就会把这对 HTML PHP 文件编译成完整的响应式页面。让界面动起来属性绑定与事件处理真正体现可交互的是模板的两种语法属性绑定和事件绑定。看一个官方博客示例来自 README.mddiv Thumbnail blog$blog / a href{$blog-url} h3{$blog-title}/h3 p{$blog-description}/p /a LikeButton liked{$blog-favorite} (click)like / /div对应的 PHP 类只有一个方法class Blog extends BaseComponent { public BlogModel $blog; public function like() { $this-blog-favorite !$this-blog-favorite; } }拆解一下发生了什么liked{$blog-favorite}把 PHP 属性值绑定到组件属性上数据变了界面自动更新(click)like监听点击事件点击后调用 PHP 里的like()方法like()修改数据后Viewi 的响应式机制会自动重新渲染依赖该数据的界面——你写的是 PHP运行在浏览器里的却是实时响应的 UI。上图正是这个示例的运行效果点赞按钮的状态由 PHP 数据驱动交互却发生在浏览器端毫无跳转。进阶方向生命周期、路由与工具函数掌握HTML PHP 双文件的基本功后可以沿以下路径继续深入生命周期钩子OnInit初始化、OnMounted挂载完成等位于 src/Viewi/Components/Lifecycle/适合在组件就绪时加载数据客户端路由ClientRoute.php 支持无刷新切换页面构建单页应用体验PHP 函数转译Viewi 内置了数百个常用 PHP 函数的浏览器端实现数组、字符串、日期、数学等位于 src/Viewi/PhpJsFunctions/意味着你的 PHP 代码可以直接跑在浏览器里构建与优化组件会被 Builder.php 打包分块配合 CssBundle.php 等资产组件自动合并、压缩 CSS。小结PHP 也能优雅地做前端回顾一下 Viewi 组件入门的完整链路一个HTML 模板描述界面支持属性绑定$xxx和事件绑定(click)一个PHP 类继承 BaseComponent存放数据与交互逻辑路由把 URL 指向组件类框架负责编译、响应式更新与资源打包。如果你的目标是只用 PHP 就构建可交互的 Web 界面Viewi 提供了一个几乎零切换成本的方案——界面思维还是 HTML逻辑语言还是 PHP交互能力却是现代前端级别的。【免费下载链接】viewiUnique and efficient front-end framework for PHP项目地址: https://gitcode.com/gh_mirrors/vi/viewi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考