序文
私の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をもっとサポートすることを願っています。