Ajax 技术
axios:
称为：axios（ajax input output system）
使用步骤: 要使用一个单独的js文件,注意导入顺序
Ajax
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue 的 axios 技术 </title>
<!-- 全称是：局部刷新，异步访问 -->
<!-- 同步：保证数据的安全，牺牲了效率（排队） -->
<!-- 异步：效率高，牺牲安全（不排队） -->
<!-- 特点：高效，局部刷新，异步访问 -->
<!-- 使用方法 -->
<!-- 1.导入axios.min.js文件+使用正确语法发起一个Ajax请求 -->
<!-- 语法：
axios.get(url,params).then(abc=>{alert(abc);})
//其中：参数
-->
<script src="vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="show()">发起Ajax请求</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
show:function(){
axios.get('http://www/baidu.com').then(result=>{console.log(100);})
}
}
})
</script>
</body>
</html>
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue 的ajax</title>
<!-- 导入文件 -->
<script src="vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
<button v-on:click="show()">点我，点我获取数据</button>
{{name}},欢迎您回来~
您今年{{age}}岁了~
<ol>
<li v-for="o in hobby">{{o}}</li>
</ol>
</div>
<!-- 3.发起Ajax请求 -->
<script>
new Vue({
el:"#app",
data(){
return{
name:' ',
age:0,
hobby:' '
}
},
methods:{
show(){
//发起ajax请求访问1.json文件
axios.get('1.json').then(
//res保存了返回的数据，其中包含了很多的属性
res =>{
console.log(res);
//其中真正的数据，是存在了data属性中
console.log(res.data);
//想获取name属性的值
this.name = res.data.name;
this.age = res.data.age;
this.hobby = res.data.hobby;
console.log(res.data.name);
console.log(res.data.age);
console.log(res.data.hobby);
}
)
}
}
})
</script>
</body>
</html>
7325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
