JSON 데이터를 통한 VUE.JS 사용에 대한 자세한 설명

이 글은 주로 JSON 데이터를 통해 VUE.JS 사용에 대한 자세한 설명을 소개합니다. 관심 있는 친구들이 참고하면 됩니다.

최근에 비교적 간단한 프로젝트를 받았는데 사용할 계획은 없습니다. 데이터베이스, JSON 데이터를 사용할 계획입니다. 데이터 렌더링을 위해 현재 인기 있는 VUE.JS와 결합되었습니다.

데이터베이스를 사용할 계획이 없더라도 추가, 삭제, 확인, 수정 등의 일반적인 작업은 여전히 ​​필수입니다. 데이터베이스를 사용한다면 API를 만들 수도 있고, 그러면 웹사이트, 앱 등이 이에 따라 작동할 수 있습니다. 이번 글에서는 간단히 cite만 다루겠습니다.

먼저 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"}
]
}

다음으로 Javascript를 통해 렌더링하고 데이터를 Navigation으로 렌더링합니다. 두 가지 방법이 있습니다. 프로젝트에 이미 JQuery가 포함된 경우 다음 코드를 참조할 수 있습니다.

$(function(){ 
    $.ajax({ 
     type:'get', 
     url:'Category.json', 
     success: 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로 이동하여 데이터를 렌더링합니다.

<p id="app" class="inner">
  <ul v-for = "pep in peps ">
    <li><a href="{{pep.Url}}" rel="external nofollow" > {{pep.name}}</a></li>
  </ul>
 </p>

위 코드는 JQuery의 $를 가져옵니다. 프로젝트에서 JQuery를 사용하지 않는 경우 vue-resource.js를 사용해야 합니다.

HTML에 소개된 내용:

<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>

vue-resource.js를 처음 사용할 때 vue.js 버전과 일치하지 않아 오류가 자주 발생했습니다. 이것은 함정입니다. 다음 코드를 실행했는데 렌더링할 수 없다면 99%의 경우 이 함정에 직면하게 됩니다.

<script>
  var app = new Vue({
el: &#39;#app&#39;,
data: {
  peps: &#39;&#39;  
},
mounted: function() {
  this.getJsonInfo()
},
methods: {
  getJsonInfo: function() {
    this.$http.get(&#39;Category.json&#39;).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을 다른 수정할 필요가 없습니다.

위 내용은 JSON 데이터를 통한 VUE.JS 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!