VUE.JS 코드를 JSON 데이터로 활용하여 자세하게 공유하는 방법

본 글은 주로 JSON 데이터를 통해 VUE.JS 사용에 대한 자세한 설명을 소개하고 있으니 관심 있는 분들은 참고하시기 바랍니다

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

데이터베이스를 사용할 계획은 없지만 추가, 삭제, 확인, 수정 등의 일반적인 작업은 여전히 ​​필수입니다. 데이터베이스를 사용한다면 API를 만들어서 웹사이트, 앱 등을 이에 맞춰 운영할 수도 있을 것입니다. 이번 글에서는 간단히 인용만 하겠습니다.

먼저 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를 통해 렌더링하고 데이터를 내비게이션. 두 가지 방법이 있습니다. 프로젝트에 이미 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의 $.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 버전과 일치하지 않아 자주 오류가 발생했습니다. 주의하세요. 이것은 함정입니다. 다음 코드를 실행했는데 렌더링할 수 없다면 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을

다른 수정할 필요가 없습니다.

위 내용은 VUE.JS 코드를 JSON 데이터로 활용하여 자세하게 공유하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!