这个不需要npm搭建脚手架安装Vue,只需要简单引入Vue的cdn链接,即可实现,通过引入Axios进行渲染数据到html页面。
index.html
Vue axios 渲染数据
[v-cloak] {
display: none;
}
Vue Cdn Axios 渲染数据
{{ site.title }}
{{ site.url }}
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('./data.json')
.then(response => (this.info = response.data.list)) // 把结果集传到info这个数组
.catch(function (error) {
console.log(error);
});
}
})
data.json{
"list": [
{ "title":"百度一下,你就知道","url":"www.baidu.com"},
{ "title":"让天下没有难做的生意","url":"www.taobao.com"},
{ "title":"再小的个体,也是一个品牌","url":"www.weixin.com"}
]
}
demo
Author:TANKING
Web:http://www.likeyun.cn/
Date:2020-11-11
WeChat:face6009
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[Vue通过引入cdn方式请求接口,渲染数据,axios渲染数据]http://www.zyiz.net/tech/detail-148904.html
原文链接:https://blog.csdn.net/weixin_34366539/article/details/117863697?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816780357282901%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816780357282901&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-30-117863697-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn
原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/6059