ホームページ > 記事 > ウェブフロントエンド > ajax を使用して vue.js でページをレンダリングする方法

ajax を使用して vue.js でページをレンダリングする方法

亚连オリジナル: 2018-06-06 11:17:142860ブラウズ

以下に vue.js と ajax レンダリングページの例を紹介します。これは参考になるものであり、皆さんのお役に立てれば幸いです。

前回述べたvue.js、zepto、node.js、webpackなどの技術を使ったCNodeの再構築について。これは比較的初心者レベルのプロジェクトであり、CNode Web サイトにはパブリック API があるため、この Web サイトのすべてのデータインターフェイスを取得して、ページ上にレンダリングして 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; 
   } 
  })

次に、コンソール

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() { 
 
 } 
})

えっと、ちょっと質問があります。AJAX は非同期関数 (非同期情報については、私の前回のブログを参照してください) とそのコールバックです。関数の実行環境はグローバルスコープなので、AJAXのgetDataのthisはwindowを指します。これには 2 つの解決策があります。1 つは私のように self を使用してこれを保存すること、もう 1 つはアロー関数を使用してこれをバインドすることです。

多くの場合、私たちは未知のものを恐れますが、その恐れが未知のものを克服するための一歩を踏み出すのを妨げることがよくあります。そのときは、歯を食いしばって一歩を踏み出してください。困難は常にあなたの心の中にのみ存在します。。

上記は私があなたのためにまとめたものです。

vuejsによるデータドリブンビュー原則の実装方法

Vueで親コンポーネントを使用して子コンポーネントイベントを呼び出す方法

パスワードの表示・非表示切り替え機能の実装方法Vueで

以上がajax を使用して vue.js でページをレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue.js で .native 修飾子を使用する方法次の記事：Vue.js で .native 修飾子を使用する方法

続きを見る