layui bind数据绑定插件使用方法
文档完善中: https://www.yuque.com/docs/share/c54a7f10-b054-4b94-abaa-afe0553d4f70?# 《binder》
一、介绍
binder.js是在简单了解了vue框架之后书写的一个layui的模块。目的是在不影响layui使用的前提下，可以使用响应式数据和模板解析。
这个可不是那种厉害的框架，如果不好使说明不支持。
1.引入binder.js
建议通过layui的方式进行引用binder.js以及一系列的js文件都建议用layui的方式引用。由于没有修改layui的内容，这个模块需要自定义路由。
layui.extend({
binder:"../src/lay/modules/binder",
}).use(['binder'],function(){
// your code
});
这个js里面用到了jQuery和Lodash，所以除了引用layui之外还要引入这两个js库。
2.声明式渲染
简单的实现了html模板解析。
<div id = "app">
创建第一个应用：{{message}}
</div>
<!-- 引入jQuery Lodash Layui -->
<script>
;"use strict";
layui.extend({
binder:"../src/lay/modules/binder",
}).use(['binder'],function(){
var app = new layui.binder({
el: "#app",
data: {
message: "My binder!"
},
});
});
</script>
通过上面的方式就创建了一个应用，这种语法和Es6的模板字符串是非常相似的。但是内部做了大量的事件绑定，所以这个数据是响应式的。这个验证方式可以通过在控制台修改message的值，html页面上的内容也会随之发生改变。
// 上面第一个应用已经用app变量接收
app.$data.message = newValue;
除了文本模板，还支持属性绑定。现在只支持简写形式 :attribute。(就是在属性名前面紧挨一个冒号)
声明为: :attribute=value 模板解析之后变为 attribute=newValue
class属性做了特殊处理 :class 的值最后可以和 class的值进行合并。
<div id = "app">
<span :title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<!-- 引入jQuery Lodash Layui -->
<script>
;"use strict";
layui.extend({
binder:"../src/lay/modules/v3/binder",
}).use(['binder'],function(){
var app = new layui.binder({
el: "#app",
data: {
message: "页面加载于 " + new Date().toLocaleString()
},
});
});
</script>
3.条件与循环
可以使用v-if的指令来切换这个html元素的显示与不显示。
<div id = "app">
<p>稍等，还有内容被隐藏了</p>
<p v-if="seen">现在你看到我了</p>
</div>
<!-- 引入jQuery Lodash Layui -->
<script>
;"use strict";
layui.extend({
binder:"../src/lay/modules/v3/binder",
}).use(['binder'],function(){
var app = new layui.binder({
el: "#app",
data: {
seen: false
},
});
setTimeout(()=>app.seen = true, 3000);
});
</script>
可以使用v-each指令实现循环渲染的效果
<div id = "app">
<div class="layui-form layui-form-pane" >
<div class="layui-form-item" >
<div class="layui-inline">
<label class="layui-form-label">binder指令:</label>
<div class="layui-input-inline" v-each="layui.source" mark="arr" style="width: 200px;">
<input type="checkbox" name="module" lay-filter="module" :value="{{arr.id}}" :title="{{arr.name}}" />
</div>
</div>
</div>
</div>
</div>
<!-- 引入jQuery Lodash Layui -->
<script>
;"use strict";
layui.extend({
binder:"../src/lay/modules/v3/binder",
}).use(['form','binder'],function(){
var app = new layui.binder({
el: "#app",
data: {
layui: {
source: [{
id: 1,
name: "vform",
},{
id: 2,
name: "vtable",
}]
}
},
mounted(){
layui.form.render();
}
});
});
</script>
4.处理用户输入
可以使用 @后面加事件名为dom绑定事件。
<div id = "app">
<p> 当前的index指针的值为: {{ index }}</p>
<button @click="update">使用method声明方法</button>
<button @click="index++">直接书写函数逻辑</button>
</div>
<!-- 引入jQuery Lodash Layui -->
<script>
;"use strict";
layui.extend({
binder:"../src/lay/modules/v3/binder",
}).use(['binder'],function(){
var app = new layui.binder({
el: "#app",
data: {
index: 1
},
methods: {
update(){
this.index++;
}
},
});
});
</script>
可以使用v-model指令实现与表单元素的双向绑定。
这里的v-form指令其实是将它下面的所有表单元素添加上一个v-model指令。
<div id = "app">
<div class="layui-elem-quote">使用form指令绑定</div>
<div class = "layui-form-pane" v-form = "form">
<input type = "text" class = "layui-input" name = "remark" />
</div>
<div> 表单当前的值为:{{form.remark}}</div>
<br/>
<div class = "layui-form-pane" >使用model指令绑定</div>
<input type = "text" class = "layui-input" v-model = "form.remark" />
</div>
<!-- 引入jQuery Lodash Layui -->
<script>
;"use strict";
layui.extend({
binder:"../src/lay/modules/v3/binder",
vform:"../src/lay/modules/v3/vform",
}).use(['binder','vform '],function(){
var app = new layui.binder({
el: "#app",
data: {
form: {
remark: "",
}
},
});
});
</script>
5.组件化应用构建
这里也可以创建组件。组件其实也是binder的一个实例。
创建组件 --> 注册组件 --> 使用组件
可以使用提供的extend方法创建一个组件，带有name属性就会自动的注册到公共组件中。
使用component方法注册一个组件。
- 组件配置项不能包含el属性。
- 组件配置项必须包含template属性，template下面只能直接接一个子节点。
- 组件data配置项必须写成function的形式，接收一个参数。
- 组件data如果必须传入一个参数，请声明成dataSource配置项，它会在初始化的时候作为参数自动传入。
- components如果是不需要特殊处理使用key - value的形式声明，value既可以是Component实例也可以是它的配置项。如果需要特殊处理，value写成数组的形式，第一项是组件信息，第二项是传入的参数。
-
<div id="app"> <MyForm></MyForm> <MyForm></MyForm> <MyForm></MyForm> </div> <!-- 引入jQuery Lodash Layui --> <script> ;"use strict"; layui.extend({ binder:"../src/lay/modules/v3/binder", vform:"../src/lay/modules/v3/vform", }).use(['binder','vform '],function(){ var index = 0; var app = new layui.binder({ el: "#app", data: {}, components: { myform: { data: function(){ return { page: { id: ++ index }, form: { remark: "" } } }, template: ` <div> <div class="layui-elem-quote">这是创建的第{{page.id}}个表单</div> <div class="layui-form-pane" :lay-filter = "my-{{page.id}}-form" v-form="form"> <input type="text" class="layui-input" name="remark" /> </div> <div> 表单当前的值为:{{form.remark}}</div> </div> `, } } }); }); </script>