Vue是一套构建用户界面的渐进式框架。
它实现了数据双向的绑定。利用这个特性,可以比较容易将模板与数据分离。在应对不同的不同的打印需求时,我们只需要提供足够丰富的数据,不同模板按照需求获取相应的字段即可。
创建容器
打印之前,需要把页面呈现在页面上。所以先创建一个隐藏的DOM节点,作为打印内容的容器。
获取模板
根据需求选择对应的模板,向服务端发送ajax请求,获取空模板。 获取到空模版之后,利用Vue双向绑定的特性,向模板填充数据。然后将填充好的模板,填充上边创建的容器中。
$.getJSON(‘ins_common.do?action=get_print_template’, {mbdm: ‘0003’}, function (res) {
if (res.code === 'T') {
var $print = $('#id_print');
$print.html(res.message);
//创建Vue对象与打印容器绑定
new Vue({
el: '#id_print',
data: {
LRXM:'李四',
CH:'12'
}
});
} else {
wnform.toast(res.message);
}
})
模板是静态的html