ajax를 사용하여 vue.js에서 페이지를 렌더링하는 방법-JS 튜토리얼-php.cn

ajax를 사용하여 vue.js에서 페이지를 렌더링하는 방법

亚连

풀어 주다： 2018-06-06 11:17:14

원래의

2918명이 탐색했습니다.

아래에서는 vue.js 및 ajax 렌더링 페이지의 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

지난번에 언급한 vue.js, zepto, node.js, webpack 및 기타 기술을 사용한 CNode 재구성에 관해. 이것은 비교적 입문적인 프로젝트입니다. 일반적으로 Vue를 학습한 후 시작할 수 있습니다. CNode 웹사이트에는 공개 API가 있으므로 이 웹사이트의 모든 데이터 인터페이스를 얻은 다음 페이지에서 렌더링하고 CSS로 처리할 수 있습니다. 처음에는 항상 매우 어렵다, 매우 어렵다, 매우 어렵다고 느꼈습니다. 어디가 어려운지 알 수는 없지만 단지 매우 어렵다, 매우 어렵다, 매우 어렵다고 느꼈습니다. 좀 더 자세히 설명하자면, 그냥 ajax를 사용하여 데이터를 가져온 다음 렌더링을 위해 컴포넌트에 전달한 다음 이를 모방하고 스타일을 작성하는 것이 아닐까요? 어렵지 않은데 왜 자연스럽게 어렵게 느껴지는 걸까요?

CNode는 데이터 인터페이스를 제공하고 ajax에는 몇 가지 메서드만 있습니다. 나중에 곰곰이 생각해 보니 내 마음속 두려움의 자리는 아약스였다. 예, 당신은 나에게 데이터 인터페이스를 주셨고 나는 데이터를 얻을 수 있습니다. 그런데 당신은 나에게 무엇을 주셨나요? 사용하기 전에는 ajax로 얻은 데이터를 몰랐습니다. 사람들은 항상 자신이 모르는 것을 두려워합니다! 같은 반 친구들 말대로 예전에는 ajax가 어렵다고 생각했는데 나중에 사용해보니 괜찮더라고요. Ajax에 대한 대부분의 초보자의 혼란은 종종 자신이 얻는 데이터의 알려지지 않은 특성에 대한 두려움에 있다고 생각합니다.

알 수 없는 성격이 두렵기 때문에 이 "데이터"를 잘 살펴보는 것이 좋을 것 같아요! 여기서는 zepto의 Ajax 방법을 사용하고 있습니다(지금 배우고 사용하세요).

let data = { 
 page: 1, 
 limit: 20,//获取20个 
 tab: &#39;all&#39;, 
 mdrender: true 
}; 
let topics = []; 
$.get("https://cnodejs.org/api/v1/topics", data, function (res) { 
   if (res && res.data) { // 如果查到数据 
   topics = res.data; 
   } 
  })

로그인 후 복사

그런 다음 Console

ajax에 주제를 입력하고 Json 형식을 가져옵니다. 위 그림에 표시된 것처럼 20개의 Json 유형 "객체"를 얻은 것을 볼 수 있으며 각 객체에는 매우 많은 속성이 있습니다. 예를 들어, 첫 번째 객체의 제목을 얻고 싶습니다

이제 ajax로 얻은 데이터를 통해 보셨어야 했는데, 이 작은 조치를 취한 후에는 사람 전체가 편안함을 느끼는 것 같습니다.

다리미가 뜨거울 때 두드리고 vue를 사용하여 페이지를 렌더링하세요.

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://zeptojs.com/zepto.js"></script> 
 <script src="vue.js"></script> 
</head> 
<body> 
<p id="app"> 
 <ul> 
  <li v-for="(item,i) in items" :key="item.id">  
   <span class="index" :title="i + 1">{{(i + 1) > 9999 ? "..." : (i + 1)}}</span> 
   <span class="face"> 
     <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" width="80" height="80" /> 
   </span> 
   <span class="name" :title="item.title">{{item.title}}</span></li> 
 
 </ul> 
</p> 
<script src="Ajax-demo1.js"></script> 
</body> 
</html>

로그인 후 복사

JS:

new Vue({ 
 el: &#39;#app&#39;, 
 data:{ 
  items:[], 
  scroller:null, 
  tip:{ 
    page: 1, 
    limit: 20, 
    tab: &#39;all&#39;, 
    mdrender: true 
  } 
 }, 
 methods:{ 
  getData(){ 
   let self = this; 
   $.get("https://cnodejs.org/api/v1/topics", this.tip, function (res) { 
    if (res && res.data) { // 如果查到数据 
    self.items = res.data; 
   } 
  }) 
  } 
 }, 
 created:function() { 
  this.getData(); 
  console.log("success"); 
 }, 
 mounted:function() { 
 
 } 
})

로그인 후 복사

emmmmmm, 작은 질문이 있습니다. AJAX는 비동기 함수(비동기 정보에 대해서는 내 마지막 블로그를 참조하세요)이며 콜백입니다. 함수 실행 환경은 전역 범위이므로 getData의 AJAX에서는 window를 가리킵니다. 여기에는 두 가지 해결책이 있습니다. 하나는 나처럼 self를 사용하여 이것을 저장하는 것이고, 다른 하나는 화살표 기능을 사용하여 이것을 바인딩하는 것입니다.

우리는 종종 미지의 것을 두려워하며, 이 두려움은 종종 미지의 것을 물리치기 위한 발걸음을 가로막습니다. 이때, 이를 악물고 한 발짝 앞으로 나아가면 어려움은 항상 마음 속에만 있을 것입니다. .

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.