grootjs 简明教程

grootJs简明教程

mvvm框架也是解决的一类问题,在某些时候会提高生产效率;

    经过接近一个月的努力,grootJs测试版终于发布了   

    grootJs是一个mvvm的框架,名字取 grass 和root 两个单词的组合,既“草根”之意。在创作的中,本着尽量简单实用的原则构思完成的

grootJs不同于其他mvvm的三大亮点:

1.model模型自动回收。在框架中加入了垃圾回收机制,程序员不回再为了因不断创建大量modle不能回收,或不便于回收造成内存占用太高而烦恼

2.全新的变量值变化监模型,改善其他mvvm框架对一些动态数组中得变量变化不便于监控的问题

3.全新的ui控件开发接口,是控件的值和页面页面模型的值实现同步,操作开发的控件时 就像操作html内置控件一样

还有更多的新的东西等待你的发觉....

项目地址 https://github.com/time-go/grootJs

Grootjs官网(最新文档在官网更新)

官网:http://time-go.github.io/grootJs

作者联系方式:qq289880020,官方技术支持QQ群330603020 如有bug 疑问 或问题 请联系作者:-)

Hello word(index1.html)

博客园上的教程不再更新

<html>
<head>
<title>hello word</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="groot.js"></script>
</head>
<body>
<div gt-view="myview">
<div gt-object="data">
<input type="text" gt-value-change="say">+<input type="text" gt-value-change="say2"><span
gt-text="{say}+{say2}"></span>
</div>
<input type="button" value="点击" gt-click="fuzhi">
</div>
</body>
</html>
<script>
groot.view("myview", function (vm, ve) {
vm.data = {
say: 1,
say2: 2
}
/*vm.say = 1;
vm.say2 = 20;*/
ve.fuzhi = function () {
vm.data = {say: 10, say2: 50}
vm.dataRender();
}
})
</script>

说明:程序中首先引jquery,框架的docment操作都是基于jquery的。

gt-view="myview" 是定义一个作用于为myview的范围,对应的在js里也有一个 groot.view("myview"...,这个两个是相对应得;

vm是数据模型,它有个属性为say,gt-value-change=“say”为绑定这个say属性 change 表示 输入框的值变化 vm中say的值就变化;

相应 change该为blur,就  是 输入框失去焦点的时候 vm.say得值变化;gt-text="say"得意义找个标签的内容绑定vm.say的值;

大家可以看到随着输入框的值变化,右边标签的值也在变化

目录

绑定事件

绑定对象

绑定数组

$self $index $first $last parent() outerParent()

grootJs的属性绑定指令

变量监控 指令 gt-wach

内置模块加载器(commonjs规范)的使用

grootJs 属性过滤器

checkbox radio select绑定

groot 引入外部模板

grootJs属性扩展 groot.bindExtend

grootJS ui控件定义

grootJs 系统常用API介绍

posted @   吹鱼算法  阅读(1317)  评论(1编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示