way.js - 轻量级、持久化的双向绑定JS库
AngularJS的双向绑定一直为人称道,但使用AngularJS需要对页面组件化,学习成本还是很高的。
本文源自 https://github.com/gwendall/way.js 边学边译。
使用:引用一个js文件即可。
<script src="way.min.js"></script>
way.js. 官方JS脚本 点击下载
开始:
声明一个HTML元素和一些标记
<form way-data="myFormData" way-persistent="true">
<input type="text" name="name">
<input type="text" name="age">
<input type="text" name="gender">
</form> Name: <span way-data="myFormData.name"></span>
现在每一个变化将存储内存。绑定跨度的html将被改变。和绑定数据将持续,这意味着你的HTML会填充你的页面重新加载数据。
文档:
名称 | 类型 | 默认值 | 描述 |
data | string | null | 允许定义点分离路径数据将存储的地方。可以包括数组。当表单上使用时,一个json变量包括所有的输入了一个[名字]属性将被创建并存储在指定的存储。通过“__all__”路径访问所有的way.js的数据。 |
default | strign | null | 如果没有绑定值,链接的默认数据设置一个元素. |
way.js - 轻量级、持久化的双向绑定JS库的更多相关文章
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- js实现数据视图双向绑定原理
这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...
- Vue.js学习 Item4 -- 数据双向绑定
Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- 前端MVVM框架avalon揭秘 - 双向绑定原理
avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
随机推荐
- 递推 hdu 2048
t 关于错排 共n个数 第n个 和一个交换 其他n-2错排 (n-1)*z[n-2]; n-1个错排 第n个和n-1个交换 (n-1)*z[n-1]; 求和 然后概率的话要除n! 一个一个除 ...
- COGS396. [网络流24题]魔术球问题(简化版
问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为 1,2,3,4......的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2个相邻球的编号之和为完全平 ...
- Linux系统概述
1.Linux是一套免费使用 和自 由传播的类Unix操作系统. 这个系统是由世界各地的成千上万的程序员 设计和实现的.其目 的是建立不受任何商品化软件的版权制约的. 全世界都能自 由使用的Unix兼 ...
- Windows10环境配置nat123端口映射访问mysql
背景:因工作需要,在宽带路由器内部设置一个台式机(可上网),配置成数据库服务器.分散各处的多台外网机可以通过jdbc连接该数据库服务器进行开发.要进行端口映射. 环境: 宽带通 Windows10企业 ...
- Acer-宏碁电脑BOIS
进入电脑BOIS界面; 1.开机(一闪而过)注意第一屏左下角,会有进入BIOS按键提示. 2.如一开机没有进入BIOS的键值提示,取而代之的是品牌机的Logo,可参阅以下列表:不是品牌机可参阅主板设置 ...
- Linux lsof命令 以及 恢复删除的文件
1.简介 lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传 ...
- C# 异步
private void GetHttpResponse() { var client = new Microsoft.HBase.Client.HBaseClient(new ClusterCred ...
- PHP的ob_start()函数用法
经典参考片段: <?php ob_start(); echo '123'; echo '456'; echo '789'; $content = ob_get_contents(); ob_en ...
- 《征服 C 指针》笔记6:练习——挑战那些复杂的声明
应该是小试牛刀的时候了. 在 ANSI C 的标准库中,有一个 atexit()函数.如果使用这个函数,当程序正常结束的时候,可以回调一个指定的函数. atexit()的原型定义如下: int ate ...
- 关于vue指令(directive)
1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){ //定义指令 }); 另外一种是局部注册: n ...