一、引入vue.min.js 注意在jquery的后面引入
二、创建vue对象
<script type="text/javascript">
var vm;
$(function(){
vm = new Vue({
el:"#vm{$con}",
data:{
post:{
SECURITY_SOFTWARE_ORGCODE:'0',
area_code:'0',
service_status:'0',
Heartbeat_status:'0',
online:'3',
searchText:'',
pageNumber:1,
pageSize:10,
sortName:'COLLECTION_EQUIPMENTID',
sortOrder:'desc',
totalPage:1,
total:1,
},
rows:{},
},
watch:{
'post.pageNumber':function(){
$.ui.pager({
vm:vm,
el:'.baian-pager',
})
},
'post.totalPage':function(){
$.ui.pager({
vm:vm,
el:'.baian-pager',
})
},
},
methods:{
prev:function(){
var totalPage = parseInt(vm.post.totalPage);
var pageNumber = parseInt(vm.post.pageNumber);
if (pageNumber > 1){
vm.post.pageNumber = pageNumber-1;
vm.search();
}
},
next:function(){
var totalPage = parseInt(vm.post.totalPage);
var pageNumber = parseInt(vm.post.pageNumber);
if (pageNumber < totalPage) {
vm.post.pageNumber = pageNumber+1;
vm.search();
}
},
}
})
vm.search();
</script>
三、确定作用范围
讲vm对象放到哪个块元素或者说div里,它就对哪个div生效 语法:id="vm对象" 如下图
四、编写逻辑代码