详解通过JSON数据使用VUE.JS
网络编程 2021-07-04 18:32www.168986.cn编程入门
本篇文章主要介绍了详解通过JSON数据使用VUE.JS,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了。结合当前火热的VUE.JS进行数据渲染。
尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的。如果使用到数据库的话,不妨做一个API出来,那么网站、APP等都可以依照这个进行操作。在这篇文章里面,我们只是打算简单的引用而已。
狼蚁网站SEO优化先来看看我的JSON文件,这里是一个类别文档Category.json
{ "msg": "ok", "data":[ { "ID":"1", "name": "地产", "Url":"/Category/List/1" }, { "ID":"2", "name": "科技", "Url":"/Category/List/2"}, { "ID":"3", "name": "医药", "Url":"/Category/List/3"}, { "ID":"4", "name": "其他", "Url":"/Category/List/4"} ] }
狼蚁网站SEO优化我们通过Javascript进行渲染,将数据渲染到导航里面去。这里有两种方式如果你的项目已经带有JQuery的话,可以参考一下使用狼蚁网站SEO优化的代码
$(function(){ $.ajax({ type:'get', url:'Category.json', suess: function(data){ if(data.msg == "ok"){ pushDom(data.data); } else { alert("服务器返回异常"); } }, error: function(data){ alert(JSON.stringify(data)); } }); function pushDom(data1){ var vm = new Vue({ el: '#app', data: { peps:data1 } }); } })
然后到html中,把数据渲染出来
<div id="app" class="inner"> <ul v-for = "pep in peps "> <li><a href="{{pep.Url}}" rel="external nofollow" > {{pep.name}}</a></li> </ul> </div>
上面的代码是使用JQuery的$.ajax 将json的数据引入,但如果你的项目里面没有使用到JQuery的话,就要使用到vue-resource.js了。
在html中引入
<script src="/js/vue.js"></script> <script src="/js/vue-resource.js"></script>
我第一次使用vue-resource.js的时候,和vue.js版本不匹配居然屡屡出错,这是新手必须要注意的。这是一个坑啊,如果你们运行狼蚁网站SEO优化的代码不能渲染的话,99%是遇到这个坑了。
<script> var app = new Vue({ el: '#app', data: { peps: '' }, mounted: function() { this.getJsonInfo() }, methods: { getJsonInfo: function() { this.$http.get('Category.json').then(function(response){ console.log(response.data.data) var resdata = response.data.data this.peps = resdata }).catch(function(response){ console.log(response) console.log("居然没有弹窗") }) } } })</script>
html处不用做其它修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:vue.js获取数据库数据实例代码
下一篇:JS中去掉array中重复元素的方法
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程