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	如果没有绑定值,链接的默认数据设置一个元素.

转载于:https://www.cnblogs.com/blogs2014/p/5488938.html

way.js - 轻量级、持久化的双向绑定JS库相关推荐

vue.js 入门案例，双向绑定实现任务清单
vue.js 开发环境安装成功. http://localhost:8080/ 使用vue.js双向绑定实现类似这样一个任务清单页面. 下面是我的学习笔记. //app.vue页面 <templ ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...
原生js实现数据双向绑定
双向绑定使用原生js实现数据的双向绑定. 关于vue的双向数据绑定,其核心是 Object.defineProperty()方法 Object.defineProperty()的作用就是直接在一个对 ...
【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js中的v-model指令（双向绑定）
Vue.js中v-model的作用 v-model的作用和使用场景 1.v-model的作用--双向绑定 2.v-model双向绑定的使用场景--表单 3.总结 v-model的作用和使用场景你好! ...

way.js - 轻量级、持久化的双向绑定JS库

way.js - 轻量级、持久化的双向绑定JS库相关推荐

最新文章

热门文章