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

黄舟
풀어 주다: 2017-05-28 10:52:09
원래의
1750명이 탐색했습니다.

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!