vue和axios結合的例子。

axios從數據庫內獲取數據，填充給vue內的data上。然後，data的數據就可以綁定到html上。

html代碼

 <div id="app">
                <ul>
				    <li v-for="overview in overviews">{{overview.MeterNo}}</li>
					<li v-for="item in items">{{item.MeterNo}}</li>
				</ul>
 </div>

JavaScript代碼

      var app = new Vue({
	       el:'#app',
		   data () {
					 return {
					   overviews:[],
					   items:[
								{MeterNo: "50005445",  Longitude: "110.457323"},
								{MeterNo: "50005445",Longitude: "110.457323"}
							 ]
					 }
				},
			methods:{
			         getData () {
					              var self = this;
					              axios.post('cMs.php').then(function (response) {
												 self.overviews=response.data;
											})
											.catch(function (error) {
												console.log(error);
											  }); 
					 }
			},
			mounted () {this.getData();}
	  })  

自己犯的錯誤。

1、定義mouted在methods前。

2、this是在當前function內有效，所以，嵌套function後，嵌套function下的this是當前function內的this指向，父function的this要想引用，要用另外的變量存儲。