vue.js使用流程

一、引入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对象" 如下图

四、编写逻辑代码

猜你喜欢