# VRender.js **Repository Path**: xiaov666/vrender.js ## Basic Information - **Project Name**: VRender.js - **Description**: 一个超级轻量级的组件化前端开发框架。 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2024-03-17 - **Last Updated**: 2024-03-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # VRender.js #### 介绍 一个超级轻量级的组件化前端开发框架。 #### 软件架构 前端组件化开发架构，html代码片段+css+js都可在一个js内编写并被重复调用创建。 #### 使用说明 1. 在head标签内引入该js 2. 在body标签内引入你自己编写的组件js > index.html ``` Test ``` > /js/com/Test.js ``` class Test extends VRender{ constructor() { //构造函数这里提供html代码片段 super(`

title

hahah

`); } DEFCSS(){ // 这里是第一次创建组件时才会创建css .h2{padding:0px;} `; } CSS(){ // 这里是每次创建组件都会自动创建css return ` .h2_$randomId${margin:0px;} `; } JS(){ //如果想获得自身组件则需要使用：this.getDomThis(); alert("initJS",this.getDom("p_")); //或者 //alert("initJS",this.getDom("p")); } } //创建组件对象 var test = new Test(); //添加到body元素内，当然你也可以把这个代码写到别的地方。或者你也可以添加到别的组件元素里(但是注意需要使用getDomThis获得的对象才行)。 test.addTo(document.body); ``` #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request #### 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)