1.学习vue1.0 难免不了模拟本地请求json
1.1先引一个json 文件到自己的项目目录下
1.因为是vue1.0我这里用了最原始的原生js ajax的方法去请求json 这里特别要注意的是this 指向问题 在进入方法的时候就要把this赋值给$this 然后再把获取到的数据赋值给我们定义的变量 渲染到页面上
==正确js==
created:function(){
var $this=this
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','../assets/vue.json','true'); //请求本地json 用get 方式请求 true 异步 false 同步
xmlHttp.send()
xmlHttp.onreadystatechange = function(data){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ // 0.未初始化 1.启动 2.发送 3.接受 4.完成
var obj=eval('('+data.currentTarget.response+')')
Vue.nextTick(()=>{
$this.jsonArr=obj.result;
})
}
}
},
==html==
<div id="app">
<ul>
<li v-for='(item, index) in jsonArr' :key="index">
<span>{{ item.productId}}</span> - <span>{{ item.productName }}</span>- <span>{{ item.prodcutPrice }}</span>
</li>
</ul>
</div>
==所有代码==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>helloworld</title>
<script type="text/javascript" src='../assets/js/vue.js'></script>
</head>
<body>
<h1>helloworld 实例</h1>
<hr>
<div id="app">
<ul>
<li v-for='(item, index) in jsonArr' :key="index">
<span>{{ item.productId}}</span> - <span>{{ item.productName }}</span>- <span>{{ item.prodcutPrice }}</span>
</li>
</ul>
<hr>
<p>{{ count }}</p>
<p><button @click='add'>add</button></p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1,
jsonArr:[]
},
methods:{
add:function(){
this.count++
}
},
created:function(){
var $this=this
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','../assets/vue.json','true'); //请求本地json 用get 方式请求 true 异步 false 同步
xmlHttp.send()
xmlHttp.onreadystatechange = function(data){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ // 0.未初始化 1.启动 2.发送 3.接受 4.完成
var obj=eval('('+data.currentTarget.response+')')
Vue.nextTick(()=>{
$this.jsonArr=obj.result;
})
}
}
},
})
</script>
</body>
</html>