序文
私のJavaScriptレベルは平均です。まあ、それはかなり平均的です。したがって、最新のフロントエンドフレームワークテクノロジーにとっては本当に困難ですが、現実には私がそれに直面しています。したがって、学習は唯一の方法です。
nフロントエンドフレームを垂直に比較し、最終的にVueを選択しました。なぜ?理由は次のとおりです。
1.角度は未知であり、1.Xには学習曲線が高く、放棄されたように見えますが、2はまだ正式に発売されていません。
2。反応は非常に強力ですが、接触はありません。
3。Vueは簡単であり、始めることとは、私の思考とレベルにより適しています。
4. Vueには中国の文書があり、私はより快適に見えます。
私はVueを学ぶことにしたので、学ぶための最良の方法は練習することです。 cnodejs.orgフォーラムにはパブリックAPIがあることを誤って見ましたが、これはとても便利です。そこで、このパブリックAPIを使用してデモを作成することにしました。
インターフェイスの紹介
これは、cnodejs.orgによって公開されているインターフェイスです。もちろん、フロントエンドに使用するだけではありません。さまざまなプログラムで使用できます。インターフェイスアドレスはhttp://cnodejs.org/apiです。このページを通じて、関連するコンテンツを詳細に紹介します。
それらが提供するインターフェイスは完全です。つまり、これらのインターフェイスを通じてそれらのようなフォーラムを作成できます。
プロジェクト計画
1. cnodejsのリストコンテンツを読み取ることができるリストページを作成します。
2。詳細ページを作成し、リストページのリンクをクリックして、[詳細]ページを入力します。
3. SSIテクノロジーを使用して、HTMLコードの再利用を実現します。 SSI+SHTMLを検索して、関連するコンテンツについて学びます。
4. CSSコードは、SASSを使用して事前補償されます。
ファイルディレクトリ
├├-index.shtmlレンダリングリストページ
├content.shtmlレンダリング詳細ページ
inc-断片化されたファイル
│├。bar.htmlサイドバーコード
CODEのcode -footer.htmlコードの著作権部分
htmlヘッドエリアがJSおよびその他のコードを呼び出します
│└│。HEADER.htmlページヘッダーロゴとナビゲーションコード
Ress Resourceファイル
├イメージ
├js
Common私のコードディレクトリをcommonします
public Public execution JS
huets.Method.jsカスタムメソッドJS
│├。JQUERYJQUERYソースコードディレクトリ
pluginsその他のプラグインディレクトリをプルギン
pagingページングプラグイン
vue vue vueソースコードディレクトリ
└st。スタイル
Style.scss SASSソースファイル
Compiled CSSファイルをstyle.css
├base
└ssss
ソースファイルhttps://github.com/fengcms/vue-cnodejsorgtestをダウンロードしてください
コードの書き込みを開始します
まず、上記のファイルディレクトリ設計に従って、ファイルの書き込みを開始します。 Resはリソースディレクトリです。あなたはそれを見て、それが何であるかを知ることができます。
実際、重要なポイントはindex.shtmlとcontent.shtmlファイルです。
ホームページリストHTMLファイルを準備します
<!doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <title> title> </title> <link rel = "styleSheet" res/style/style.css fungleo </a> </h1> <nav> <ul> <li>ナビゲーションリスト</li> </ul> </nav> </nav> </header> <section> <ul> <li> <i> <i> <i> <img src = "#avatar url"> <span> span> username </span> </i>タイトル</a> </li> </ul> <div> </div> </section> <assair> <h3>このページの手順</h3> ... </assed> </section> copyrightステートメント</footer> <div> div> </body> </html>
上記のように、それは私が最初に書いた静的ページです。私のCSSと組み合わせて、効果は以下の図に示されています。
Githubから完全なコードを取得してください
Vue&JQueryなどのJSファイルを紹介します
<Script src = "res/js/jquery/jquery-2.2.3.min.js"> </script> <script src = "res/js/vue/vue.min.js"> </script> <Src = "res/js/common/common.js"> </scrip>
インターフェイスからデータを取得します
まず第一に、何があっても、それを続ける前にインターフェイスからデータを取得する必要があります。 jQueryを使用して、Ajaxメソッドを使用してデータを引き継ぎます。
次のコード:
$(function(){$ .ajax({type: 'get'、url: "http://cnodejs.org/api/v1/topics"、datacype: 'json'、cuscess:function(data){if(data.success){console.log(data)} els {alert(json.stringify(data(data(data)); function(data){alert(json.stringify(data));});})コードは上記の通りです。ブラウザコンソールを見てみましょう。スクリーンショットは次のとおりです。
上の図に示すように、データを正常に取得しました。
データを分析します
上記の図に示すように、データには次のコンテンツが含まれています
1。著者
1。著者のアバターURL
2。著者のユーザー名
2。著者ID
3。コンテンツを投稿します
4。リリース時間
5。それは本質ですか
6。投稿ID
7。最後の返信時間
8。返信数
9.アトリショナルタグ
10。投稿タイトル
11。それを上回るかどうか
12。統計を参照します
データインターフェイスは上記のとおりです。もちろん、あなたがフル機能フォーラムである場合、これらのデータは有用です。私のプロジェクトでは、それらの多くは使用されていません。私が必要なものを見てみましょう。
<li> <i> <img src = "#avatar url"> <span> username </span> </i> <time> 5日前に投稿</time> <a href = "content.html?link id">投稿者</a> </li>
上記のコードに示されているように、ループする必要があるものには
1。著者のアバターURL
2。著者のユーザー名
3。リリース時間
4。投稿ID
5。投稿タイトル
問題ありません。必要なすべてのコンテンツとインターフェイスが利用可能です。
ajaxコードをカプセル化します
Ajaxコードは長くはありませんが、私はまだ不快に感じます。したがって、次のコードを使用してカプセル化します
// ajax get jsonメソッド関数getjson(url、func){$ .ajax({atpe: 'get'、url:url、datatype: 'json'、success:function(data){if(data.success){func(data);} els {alert( "interface called");}、call:}、called "); alert(json.stringify(data));}上記のように、必要に応じて、GetJson(URL、FUNC)関数のみを使用する必要があります。
参照カプセル化コード
$(function(){var url = "http://cnodejs.org/api/v1/topics"; getjson(url、function(data){console.log(data);});});このように変更した後、必要なデータを印刷できるかどうか見てみましょう。下の図に示すように:
問題なく、データを取得しました。コールバック関数をカプセル化し、次のコードに変更しています
$(function(){var url = "http://cnodejs.org/api/v1/topics"; getjson(url、pushdom);}); function push(data){console.log(data);}わかりました、エラーがない場合、インターフェイスデータを間違いなく印刷できます。この操作の後、私たちのコードは非常に簡潔になり、読みやすさが大幅に向上します。次に行う必要があるのは、プッシュドム(データ)関数でそれを行うことです。
VUEレンダリングコード
まず、VUEメソッドを使用して、ページに挿入するデータを記述する必要があります。
HTMLコードパーツ
<li v-for = "info in data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <time> {{info.create_at}}} {infot.ht.ht. }} "> {{info.title}} </a> </li> 1Vueの知識ポイント
ループデータhttp://vuejs.org.cn/api/#v-for
JSコードパーツ
function pushdom(data){var vm = new vue({el: '.list'、data:data});}効果を見てみましょう:
わかりました、とても興奮しています。わずか数行のコードで、VUEでリストを正常にレンダリングしました。
まとめ
1.AJAXは、データを取得するための鍵です
2. Vueコンテンツを少し理解したら、開始できます。
3.プロジェクトを構築する場合、コードとファイルは明確で明確でなければなりません。
付録
VUE公式ウェブサイト
cnodejs APIの詳細
この一連のチュートリアルのソースコードをダウンロードします
VUEJS実践的なチュートリアルの第1章、基本の構築とリストのレンダリング
VUEJS実践チュートリアル第2章、エラーを修正し、時間を美しくする
VUEJS実践チュートリアル第3章、レイアウトプラグインを使用してページネーションを実現
この記事はもともとFungleoによって書かれました
最初のリリースアドレス:http://blog.csdn.net/fungleo/article/details/51649074
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。