序文
前の章では、基本構造を通じてリストページを正常にレンダリングしました。ただし、多くの問題があります。この章では、これらの問題を解決します。
V-Bindを使用してデータをバインドします。
前の章では、ページをレンダリングしました。ただし、コンソールが開かれた場合、エラーが見つかります。下の図に示すように：
これは、ページが入ったとき、HTMLコードが最初に実行され、現時点ではVUEが機能し始めていないためです。私たちのコードは次のとおりです。
<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>上記のように、ページがsrc = "{{info.author.avatar_url}}を解析する場合、もちろん、この画像パスは見つかりません。したがって、エラーが自然に発生します。したがって、このコードを処理する必要があります。に変更します
<img v-bind：src = "info.author.avatar_url" v-bind：alt = "info.author.loginname">
OK、ページを更新しましょう、今回はエラーがありません。
Vueの知識ポイント
V-Bind Binding属性http://vuejs.org.cn/api/#v-bind
補充：
実際、ページを開くと、これらの{{...}}の内容が瞬時に表示されます。これはエラーを報告するものではありませんが、それでも小さなユーザーエクスペリエンスに影響します。この時点で、V-textを使用してこれらのコンテンツを出力できます。上記のように、コードを次のように変更します。
<li v-for = "info in data"> <i> <img v-bind：src = "info.author.avatar_url" v-bind：alt = "info.author.loginname"> <span v-text = "info.author.loginname"> </span </i> href = "content.html？{{info.id}}" v-text = "info.title"> </a> </li>これにコードを変更すると、すべての問題が解決されます。
Vueの知識ポイント
v-text出力テキストhttp://vuejs.org.cn/api/#v-text
時間を美しくします
インターフェイスから取得する時間形式は、この2016-06-12T06：17：35.453Zのようなものです。明らかに、これは私たちが望む効果ではありません。私たちが望む効果は、2時間前に公開されたようにこのようでなければなりません。それをする方法は？
原始文字列を与えるために使用される関数が必要です。その後、必要な文字列を返します。
この機能の原則は私たちの焦点ではありません。ここでは説明しません。コードを次のように見ています。
function goodtime（str）{var now = new date（）、gettime（）、oldtime = new date（str）.gettime（）、uldime、result = ''、minute = 1000 * 60、hour = minute * 60、day * 24、day * 15、月=日 * 30、年=月 * 12、 _day =差/日、_hour =差/時間、_min =差/分; if（_year> = 1）{result = "init" + ~~（_year） + "year aigh"} else if（_month> = 1）{result = "init" + ~~（_ month） + "month"} "in in" + ~~（_day） + "day ago"} else if（_hour> = 1）{result = "in" + ~~（_hour） + "hour ago ago"} else if（_min> = 1）{result = "sost in" + ~~（_min） + "mination ago ago" return result;}コードには、他の人のコードから借用の一部があります。
わかりました、今、私たちはGoodtime（STR）メソッド関数を使用して、インターフェイスによって指定された時間形式を変更したいものに変更できます。問題は、この機能をどのように使用できるかということです。
愚かな方法、元のデータを直接変更します
まず、Ajaxを介してデータを取得し、レンダリングのためにデータをVUEに引き渡します。次に、中央で操作を実行し、すべてのデータを処理し、処理されたデータをレンダリングのためにVUEに引き渡すことができます。この問題は解決できます。
それをするだけで、コードを見てみましょう：
関数pushdom（data）{//最初のトラバーサルとデータのすべての時間を（var i = 0; i <data.data.length; i ++）{data.data [i] .create_at = goodtime（data.data [i] .create_at）; }; // var vm = new vue（{el： '.list'、data：data}）;};}をレンダリングするためにVueに任せてください。OK、上記の処理を通して、最終ページの効果を見てみましょう。次のように：
成功。
VUEカスタムフィルターメソッド
私たちは上記で成功しましたが、Vueの直前にforループを作成することは本当にエレガントではありません。さらに、私たちはvueを学びたいと思っています、これが唯一の学ぶ方法はどこですか...
さて、Vueのカスタムフィルター関数を使用して処理しましょう。
公式チュートリアル、カスタムフィルターhttp://vuejs.org.cn/guide/custom-filter.html
function pushdom（data）{// vueカスタムフィルターを使用してインターフェイスで渡された時間を彫刻しますvue.filter（ 'time'、function（value）{return goodtime（value）;}）var vm = new vue（{el： '.list'、data}）;}}また、次のようにHTMLパーツを変更する必要があります。
<time v-text = "info.create_at | time"> </time>
OK、実装効果はまったく同じです。しかし、コードははるかにエレガントに見えます。重要なのは、このプロセスで、カスタムフィルターの使用を学び、習得したことです。実際、多くの場合、インターフェイスによって私たちに与えられたデータは、多くの場合、ページ上で直接レンダリングするのに適していないため、この機能は非常に重要であり、非常に一般的に使用されています。
まとめ
1.Vバインドバインディング要素属性メソッド
2.Vテキスト出力テキストメソッド
3。VUEカスタムフィルターの使用
付録
VUE公式ウェブサイト
cnodejs APIの詳細
この一連のチュートリアルのソースコードをダウンロードします
VUEJS実践的なチュートリアルの第1章、基本の構築とリストのレンダリング
VUEJS実践チュートリアル第2章、エラーを修正し、時間を美しくする
VUEJS実践チュートリアル第3章、レイアウトプラグインを使用してページネーションを実現
この記事はもともとFungleoによって書かれました
最初のリリースアドレス：http：//blog.csdn.net/fungleo/article/details/51649074
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。