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介绍

转载于:https://www.cnblogs.com/blowfish/p/3778539.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

流程控制介绍,顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制 流程控制&#xff1a;指代码的执行顺序&#xff0c;有三种方式&#xff1a;顺序结构、分支结构、循环结构 顺序结构&#xff1a; 代码从上到下&#xff0c;从左到右的执行顺序。 分支语句&#xff1a; if语句、if-else语句、if-else if-else语句、switch-case语…

javascript中数组、冒泡排序、函数及函数实参形参、arguments伪数组、异步函数等介绍

数组&#xff1a; 指一组有顺序的数据&#xff0c;其作用就是用来一次性存储多个数据。&#xff08;数组元素&#xff1a;数组中的每一个数据&#xff1b;数组长度&#xff1a;数据中元素的个数&#xff1b;数组索引&#xff1a;用来存储或访问数组中的数据&#xff0c;也叫下…

中文字串截取无乱码的问题

UTF-8中文截取函数在PHP中&#xff0c;substr()函数截取带有中文字符串的话&#xff0c;可能会出现乱码&#xff0c;这是因为中西文一个字节所占有的字节数不一样&#xff0c;而substr的长度参数是按照字节去算的&#xff0c;在GB2312编码时&#xff0c;一个中文占2个字节&…

javascript中作用域、全局作用域、局部作用域、隐式全局变量、块级作用域、作用域链、预解析

作用域 作用域指的是代码的作用范围&#xff0c;按照作用域划分变量可分为全局变量和局部变量&#xff1b;作用域可分为&#xff1a; 全局作用域&#xff1a; 指全局变量作用的范围&#xff1b;全局变量指的是通过var在函数外面声明的变量&#xff0c;在js中任何位置都可以使…

楼宇对讲门铃的芯片选型分析

目前很多的高层住宅都使用了对讲门铃了&#xff0c;在频繁使用中&#xff0c;门铃会出现的越来越多种类&#xff0c;下面我就简单的介绍会有用到的几款芯片. 语音通话芯片&#xff1a;D34018,D34118,D5020,D31101; D34018 单片电话机通话电路&#xff0c;合并了必 需的放大器…

easyui 布局自适应

最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。想了好多办法都有局限。最后想到会不会是布局&#xff08;easyui-layout&#xff09;的问题&#xff0c;经过实验&#xff0c;最后问题解。 1&#xff1a;比如在项目中…

javascript中对象、JSON格式数据、创建对象的方式、数据类型分类及特点

对象 对象指&#xff1a;具体的一个实物&#xff0c;javascript中对象是指一组没有顺序的属性和方法的集合&#xff0c;所有的事物都是对象&#xff0c;例如&#xff1a;函数&#xff0c;数组&#xff0c;字符串等。属性指事物的特征&#xff0c;一般为名词表示&#xff1b;方…

在存储过程中编写正确的事务处理代码

在 SQL Server 中数据库事务处理是个重要的概念&#xff0c;也稍微有些不容易理解&#xff0c;很多 SQL 初学者编写的事务处理代码存往往存在漏洞&#xff0c; 本文介绍了三种不同的方法&#xff0c;举例说明了如何在存储过程事务处理中编写正确的代码。 在编写 SQL Server 事务…

javascript中内置对象简介、Array

内置对象&#xff1a; javascript的三种对象&#xff1a;1.内置对象—JavaScript自带的对象&#xff1b;2.自定义对象—自己定义构造函数创建对象&#xff1b;3.浏览器对象— BOM时候介绍&#xff0c;几个常用内置对象&#xff1a;Math Date String Array Object Array对象&a…

javascript中Date对象及方法

Date对象&#xff1a; 该对象呈现时间中的某个时刻。其本质是自1970年1月1日&#xff08;UTC&#xff09;起经过的毫秒数&#xff0c;相关属性的方法如下&#xff1a;&#xff08;如果Date对象中传入指定的时间&#xff0c;则以传入的指定时间返回相关数据&#xff0c;就不会以…

如何调优JVM

堆设置 -Xmx3550m&#xff1a;设置JVM最大堆内存 为3550M。-Xms3550m&#xff1a;设置JVM初始堆内存 为3550M。此值可以设置与-Xmx相同&#xff0c;以避免每次垃圾回收完成后JVM重新分配内存。-Xss128k&#xff1a;设置每个线程的栈 大小。JDK5.0以后每个线程栈大小为1M&#x…

javascript中encodeURL对象、Boolean对象、Function对象、globalThis对象、Infinity对象、isFinite对象、isNaN对象、JSON对象

encodeURI()对象&#xff1a; 用于对特殊字符进行编码&#xff0c;decodeURI()对象&#xff1a;将特殊字符进行解码&#xff0c;常用于URL地址编码中 <script>var url https://mozilla.org/?xшеллыvar urlEncode encodeURI(url);console.log(urlEncode); //http…

JAVA Web学习篇--Servlet

Servlet由来 做过BS项目的人都知道&#xff0c;浏览器可以依据HTML静态标记语言来显示各式各样的网页。可是假设我们须要在网页上完毕一些业务逻辑&#xff1a;比方登陆验证。或者说网页显示的内容在server的数据库中。假设是这样&#xff0c;除了负责显示的HTML标记之外&#…

javascript中Math对象及方法

Math对象&#xff1a; 其所有属性与方法都是静态的&#xff0c;其相关属性和方法如下&#xff1a; 继&#xff1a; 继&#xff1a; 提示&#xff1a;本文图片等素材来源于网络&#xff0c;若有侵权&#xff0c;请发邮件至邮箱&#xff1a;810665436qq.com联系笔者 删除。 笔者…

Linux crontab 命令格式与具体样例

基本格式 : *  *  *  *  *  command 分 时 日 月 周 命令 第1列表示分钟1&#xff5e;59 每分钟用*或者 */1表示 第2列表示小时1&#xff5e;23&#xff08;0表示0点&#xff09; 第3列表示日期1&#xff5e;31 第4列表示月份1&#xff5e;12 第5列标识号星期0…

javascript中NaN属性、null对象、Number对象、Object对象

NaN属性&#xff1a; 表示不是一个数字&#xff0c;是全局对象的属性&#xff0c;其初始值为NaN <script>console.log(NaN NaN); //false</script>null对象&#xff1a; 特指对象的值未设置 <script>console.log(null undefined); //trueconsole.log(nul…

网站建设的基本流程及服务端开发简介

服务端开发&#xff1a; 前面部分都是在介绍前端开发&#xff0c;接下来将介绍后端开发&#xff0c;这里采用php介绍&#xff0c;在本篇应当掌握编程能力&#xff0c;编程思想&#xff0c;解决问题的思路&#xff0c;熟悉网页开发&#xff0c;网站开发&#xff0c;应用开发的基…

Apache安装、配置、卸载

下载安装配置Apache&#xff1a; 1.将Apache官方下载地址&#xff1a;https://www.apachelounge.com/download/&#xff0c;复制到浏览器打开&#xff0c;选择系统支持的版本下载&#xff0c;如&#xff1a; 2.将下载好的压缩包剪贴到C盘根目录&#xff08;这里为了方便&…

企业级应用架构(一) 三层架构之解耦

前言 前段时间朋友拿了个网站给我&#xff0c;让我帮忙添加几个小功能&#xff0c;我爽快的答应了,但是当我打开源码&#xff0c;我瞬间就奔溃了&#xff0c;整个项目连最基本的三层框架也没有搭建&#xff0c;仅仅是封装了一个sqlhelp作为数据库的操作接口&#xff0c;项目中的…

Web结构组件

一、Web结构组件 &#xff11;、代理 位于客户端和服务器之间的HTTP实体&#xff0c;接收客户端的所有HTTP请求&#xff0c;并将这些请求转发给HTTP服务器。 &#xff12;、缓存 HTTP的仓库&#xff0c;使常用的页面的副本可以保存在离客户端更近地方 &#xff13;、网关 连接其…