|
|
步骤
1
:
Ajax
步骤
2
:
首先准备 json 数组
步骤
3
:
fetch.js 方式
步骤
4
:
axios.js 方式
Vue.js 并没有限制使用哪种方式进行 ajax 访问，所以可以使用如下方式
1. 原生 ajax
2. JQuery
3. vue-resource
4. fetch.js
5. axios.js
那么到底用哪种方式呢？
1. 原生一般不在项目中直接用
2. jquery 不如4，5方便
3. vue-resource 已经不再维护了，所以不推荐
4. fetch.js 是 vue.js 官方推荐
5. axios.js 是vue.js 官方推荐
[
{"name":"gareen","hp":"355"},
{"name":"teemo","hp":"287"},
{"name":"annie","hp":"420"}
]
[
{"name":"gareen","hp":"355"},
{"name":"teemo","hp":"287"},
{"name":"annie","hp":"420"}
]
fetch 的调用就是前面 fetch 教程里讲解的。 新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
");
window.frames["iframe_show7839"].document.write(decodeHtml($("textarea#stepcodeTextarea7839").val()));
window.frames["iframe_show7839"].document.close();
$(window.frames["iframe_show7839"]).load(function(){
$("#iframe_show7839").height($("#iframe_show7839").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7839").height($("#iframe_show7839").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<script src="http://127.0.0.1/study/fetch.min.js"></script>
<head>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
</head>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
el:'#div1',
data:{
heros:[]
},
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
self=this
fetch(url).then(function(response) {
response.json().then(function (jsonObject) {
self.heros = jsonObject
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<script src="http://127.0.0.1/study/fetch.min.js"></script>
<head>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
</head>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
el:'#div1',
data:{
heros:[]
},
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
self=this
fetch(url).then(function(response) {
response.json().then(function (jsonObject) {
self.heros = jsonObject
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
}
})
</script>
");
window.frames["iframe7839"].document.write(decodeHtml(code7839));
window.frames["iframe7839"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7839"]).load(function(){
$("#iframe7839").height($("#iframe7839").contents().find("body").height()+showittryitheight);
});
$("#iframe7839").height($("#iframe7839").contents().find("body").height()+showittryitheight);
alreadyWriteCode7839 = code7839;
$("#rendering7839").hide();
$("#rendered7839").show();
}
var tRereshRetry2DemoPanel7839 = setInterval(rereshRetry2DemoPanel7839,1000);
var binded7839 = false;
$("textarea#stepcodeTextarea7839").keyup(function(){
if(!binded7839){
$(window).bind('beforeunload',function(){
binded7839 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7839 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7839!=newCode){
// window.frames["iframe7839"].document.write("
");
// window.frames["iframe7839"].document.write(decodeHtml($("textarea#stepcodeTextarea7839").val()));
// window.frames["iframe7839"].document.close();
// $(window.frames["iframe7839"]).load(function(){
// $("#iframe7839").height($("#iframe7839").contents().find("body").height()+showittryitheight);
// });
// code7839 = newCode;
// }
});
$(".tryButton7839").click(function(){
$("#tryDiv7839").show();
$("#stepcodeTextarea7839").focus();
$("#stepcodeTextarea7839").height(200);
$("#iframe7839").height(0);
window.frames["iframe7839"].document.write("
");
window.frames["iframe7839"].document.write(decodeHtml($("textarea#stepcodeTextarea7839").val()));
window.frames["iframe7839"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7839"]).load(function(){
$("#iframe7839").height($("#iframe7839").contents().find("body").height()+showittryitheight);
});
$("#iframe7839").height($("#iframe7839").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7839.focus();
editor7839.setSize(null, "250");
$("#rendering7839").hide();
$("#rendered7839").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7839 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7839"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7839.on("change",function(doc){
if(!binded7839){
$(window).bind('beforeunload',function(){
binded7839 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7839 = newCode;
$("textarea#stepcodeTextarea7839").val(newCode);
if(alreadyWriteCode7839!=code7839){
lastModifedTime7839 = new Date().getTime();
$("#rendering7839").show();
$("#rendered7839").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7839 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7839.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7839").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
axios 的调用就是前面 axios 教程里讲解的。 新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
");
window.frames["iframe_show7840"].document.write(decodeHtml($("textarea#stepcodeTextarea7840").val()));
window.frames["iframe_show7840"].document.close();
$(window.frames["iframe_show7840"]).load(function(){
$("#iframe_show7840").height($("#iframe_show7840").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7840").height($("#iframe_show7840").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<script src="http://127.0.0.1/study/axios.min.js"></script>
<head>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
</head>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
el:'#div1',
data:{
heros:[]
},
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
var self = this
axios.get(url).then(function(response) {
self.heros= response.data; //此时还是字符串
self.heros = eval("("+self.heros+")"); //字符串转换为数组对象
})
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<script src="http://127.0.0.1/study/axios.min.js"></script>
<head>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
</head>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
el:'#div1',
data:{
heros:[]
},
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
var self = this
axios.get(url).then(function(response) {
self.heros= response.data; //此时还是字符串
self.heros = eval("("+self.heros+")"); //字符串转换为数组对象
})
}
})
</script>
");
window.frames["iframe7840"].document.write(decodeHtml(code7840));
window.frames["iframe7840"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7840"]).load(function(){
$("#iframe7840").height($("#iframe7840").contents().find("body").height()+showittryitheight);
});
$("#iframe7840").height($("#iframe7840").contents().find("body").height()+showittryitheight);
alreadyWriteCode7840 = code7840;
$("#rendering7840").hide();
$("#rendered7840").show();
}
var tRereshRetry2DemoPanel7840 = setInterval(rereshRetry2DemoPanel7840,1000);
var binded7840 = false;
$("textarea#stepcodeTextarea7840").keyup(function(){
if(!binded7840){
$(window).bind('beforeunload',function(){
binded7840 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7840 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7840!=newCode){
// window.frames["iframe7840"].document.write("
");
// window.frames["iframe7840"].document.write(decodeHtml($("textarea#stepcodeTextarea7840").val()));
// window.frames["iframe7840"].document.close();
// $(window.frames["iframe7840"]).load(function(){
// $("#iframe7840").height($("#iframe7840").contents().find("body").height()+showittryitheight);
// });
// code7840 = newCode;
// }
});
$(".tryButton7840").click(function(){
$("#tryDiv7840").show();
$("#stepcodeTextarea7840").focus();
$("#stepcodeTextarea7840").height(200);
$("#iframe7840").height(0);
window.frames["iframe7840"].document.write("
");
window.frames["iframe7840"].document.write(decodeHtml($("textarea#stepcodeTextarea7840").val()));
window.frames["iframe7840"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7840"]).load(function(){
$("#iframe7840").height($("#iframe7840").contents().find("body").height()+showittryitheight);
});
$("#iframe7840").height($("#iframe7840").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7840.focus();
editor7840.setSize(null, "250");
$("#rendering7840").hide();
$("#rendered7840").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7840 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7840"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7840.on("change",function(doc){
if(!binded7840){
$(window).bind('beforeunload',function(){
binded7840 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7840 = newCode;
$("textarea#stepcodeTextarea7840").val(newCode);
if(alreadyWriteCode7840!=code7840){
lastModifedTime7840 = new Date().getTime();
$("#rendering7840").show();
$("#rendered7840").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7840 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7840.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7840").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
