码迷,mamicode.com
首页 > 移动开发 > 详细

vue框架——组件与axios通信

时间:2020-06-03 09:13:22      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:net   参数   pre   ddr   bin   子函数   app   框架   null   

使用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通信

标签:net   参数   pre   ddr   bin   子函数   app   框架   null   

原文地址:https://www.cnblogs.com/chll/p/13034884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!