vue框架——组件与axios通信
Posted chll
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue框架——组件与axios通信相关的知识，希望对你有一定的参考价值。
使用Vue.component()创建vue组件
<div id="app">
<test v-for="item in items" v-bind:chl="item"></test>//使用v-bind绑定vue.component中的props否则定义组件无法获取到这个循环值
<!--<li v-for="item in items">{{item}}</li>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component("test", {
props:[‘chl‘],
template:‘<li>{{chl}}</li>‘
});
var vm = new Vue({
el:"#app",
data:{
items:["java","C","linux"]
}
});
</script>
axios异步通信：用在浏览器与nodejs之间的异步框架，主要作用是实现ajax
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id = "app" v-clock>
{{info.name}}
{{info.url}}
{{info.address.street}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>//引入axios
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data(){
return{
//请求返回的参数必须与json字符串一样
info:{
name:null,
address:{
street:null
}
}
}
},
mounted(){//钩子函数，不需要用户触发会自己执行
axios.get(‘../data.json‘).then(response=>
(console.log(this.info = response.data)));//将返回的结果赋值给info
}
});
</script>
以上是关于vue框架——组件与axios通信的主要内容，如果未能解决你的问题，请参考以下文章
Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
前端Vue框架 04 路由：逻辑跳转路由传参 项目组件的数据局部化处理data(){ return{} } 组件的声明周期 组件间通信 各种第三方插件(vuex,axios,ele(
VueVue入门--双向绑定，Vue的组件，Axios异步通信，计算属性，插值，自定义事件