没错,标题就是蹭VUE框架的,VUE就是一坨,感觉不如我的框架JBinder
JBinder命名类似JQuery,JQuery所做的是dom查询再操作,而JBinder所做的是声明数据和事件的绑定关系,在数据变化后,自动的将数据变化维护到dom上
JBinder目前支持以下能力:
1、数据和事件绑定
<!-- 模板通过data-*声明绑定关系,当*为函数绑定相应事件,为非函数绑定相应属性-->
<div id="app">
<div
data-value="innerText">
</div>
<input
type="text"
data-value="value"
data-fn-set-value="input, change"/>
<button
data-fn-add-value="click">value + 1
</button>
</div>
const dom = document.getElementById('app')
const app = JBinder.new(
dom.innerHTML,
// 在此处声明模板中需要的数据
{
value: 0
,fnAddValue() {
this.value ++
}
,fnSetValue(dom, event) {
this.value = dom.value
}
}
)
.mountAtDom(dom)
.mount()
2、条件和列表渲染
<!-- 条件渲染语法 if标签 test属性编写条件表达式-->
<div id="app">
<div>a:<span data-a="innerText"></span></div>
<button data-a1="click">a = 1</button>
<button data-a0="click">a = 0</button>
<if test="getA() && b">
<div>a>0才会渲染</div>
</if>
</div>
// 代码部分
const app = JBinder.new(
document.getElementById('app').innerHTML,
{
a: 0
,b: 1
,getA() {return this.a}
,a1() {this.a = 1}
,a0() {this.a = 0}
}
)
.mountAtDom(document.getElementById('app'))
.mount()
<!-- 列表渲染语法 for标签 list指定遍历的对象数组key-->
// 模板
<div id="app">
<button data-alert-all="click">数组</button>
<button data-listadd="click">数组+1</button>
<button data-listdel="click">数组-1</button>
<for list="dataList">
<div>x:<span data-x="innerText"></span>y:<span data-y="innerText"></span><button data-xadd="click">x++</button></div>
</for>
</div>
// 代码
const app = JBinder.new(
document.getElementById('app').innerHTML,
{
dataList: [
{x:1, y:1},
{x:2, y:2},
{x:3, y:3},
]
,xadd() {
this.x ++
}
,alertAll() {
alert(JSON.stringify(this.dataList))
}
,listadd() {
this.dataList.push({x:0, y:0})
}
,listdel() {
this.dataList.pop()
}
}
)
.mountAtDom(document.getElementById('app'))
.mount()
还支持组件引用,自定义渲染逻辑,详情可查看:JBinder (gitee.io)