私はしばらくVue.jsを学び、それを使用して2つのウィジェットを作成して練習しました。
私はそれをパッケージ化するためにWebpackを使用しているので、その使用に精通しています。
ソースコードは、記事の最後にGitHubアドレスに配置されます。
最初はindex.htmlです
<！doctype html> <html> <head> <title>ページ</title> <style type = "text/css"> * {margin：0;パディング：0; Font-Family：「Open Sans」、Arial、Sans-Serif; } .contianer {width：50％;高さ：自動;マージン：20px Auto; } article {margin-bottom：50px; } </style> </head> <body> <div class = 'contianer'> <portis>記事コンテンツ... </article> <div id = 'main'> <app> </app> </div> </div> <script type = "text/javascript" src = 'bundle.js'> </scrip> </body> </html> </html> </bodyアプリコンポーネントを<div id = 'main'> </div>に配置します
webpackをパッケージ化した後、エントリJSファイルはentry.jsであり、app.vueコンポーネントを導入するために使用されます
entry.js
let vue = require（ 'vue'）; Import app from './components/app'; let app_vue = new vue（{el：' #main '、components：{app：app}}）;次に、このアプリコンポーネントを見てみましょう
<style type = "text/css" scoped> </style> <template> <コメント：cur-page-index = "curpageindex"：culpage-size = "comment-url =" comenturl "：comment-params =" commentparams "：comment-is-sync =" commentisysync " ：各ページ-size = "hilepageize"：page-url = "pageurl"：page-params = "pageparams"：page-is-sync = "pageisync"> </page> </template> <script = "text/javascript">コメント './comment'; './page'からページをインポートします。 export default {data（）{return {curpageIndex：1、hirdPagesize：7、}}、コンポーネント：{コメント：コメント、ページ：ページ}、} </script>2つの子コンポーネント、つまりcomment.vueとpage.vueがあります。データを動的に結合することにより、親子コンポーネント通信を実行します。現在、どのページのページをapp.vueに渡す必要があるかについては、ここでは双方向のバインディングを使用します。これは、パラメーション、URL、Issyncなどの残り、つまり背景からデータを要求するもの、同期または非同期で動作するかどうかを使用します。
次に、comment.vueコメントコンポーネントをご覧ください
<style type = "text/css" scoped> .comt-mask {opacity：0.5; } .comt-title {} .comt-line {width：100％;高さ：2px;バックグラウンドカラー：#ccc;マージン：10px 0; } .comt-wrap {} .comt-user {float：left; } .comt-img {width：34px;高さ：34px;ボーダーラジウス：17px; } .comt-context {マージン：0 0 0 60px; } .comt-name {color：＃2b879e;マージンボトム：10px;フォントサイズ：18px; } </style> <template> <div v-if = "hascomment"：class = "{'comt-mask'：loading}"> <h3 class = 'comt-title'> {{totalcommentcount}}コメント</h3> <div> </div> <div v-for = "コメントのコメント}} '/> </div> <div> <p> {{comment.name}} </p> <p> {{comment.context}} </p> </div> <div> </div> </div> </template> <スクリプトタイプ " './GetData'; Export {props：{curpageIndex：{type：number、default：1、}、exlpagesize：{type：number、default：7、}、compenturl：{type：string、default： ''、}、commentparams：{type：object、default：null、}、commentisync：{type：boolean、true、 TotalCommentCount：0、hascomment：false、loading：true、}}、culted：{commentarr（）{this.loading = true; res = getCommentData（this.commenturl、this.commentParams、this.commentisync、this.curpageindex、this.eachpagesize）; this.loading = false; RESを返します。 }、}、created（）{let cnt = getTotalCommentCount（this.commenturl、this.commentParams）; this.totalcommentcount = cnt; this.hascomment = cnt> 0; }} </script>ここのgetData.jsは以下に説明します。ここでデータが入手できます。
読み込み：元の意味は、ページ番号がロードされたときに現在のコメントに0.5の透明性マスクをロードすることです。その後、Ajaxはコールバック関数を介してマスクをキャンセルします。これで実装できないので、強制的に書き留めることができますが、役に立たないです。
hascomment：コメントコンポーネントが初めてロードされたとき、総データ長を取得することをリクエストします。データがない場合、コメントコンポーネントレイアウトコンテンツは表示されません。
curpageindex・：小道具を使用して、親コンポーネントアプリを通過しました
これらのデータのデフォルト値とタイプを設定します。
page.vue
<style type = "text/css" scoped> .page {text-align：center;マージン：30px; } .page-btn {color：gray;背景色：白。国境：白;幅：30px;高さ：30px;マージン：5px;フォントサイズ：18px;アウトライン：なし; } .page-btn-link {cursor：crosshair; } .page-btn-active {border：1px solid grey;ボーダーラジウス：15px; } </style> <template> <div> <button v-for = "pageindex of pagearr" track-by = '$ index'：class = "{'page-btn'：true、 'page-btn-active'：this.curpageindex === pageindex、 'page-btn-link'：pageindex）" = "=" = "=" pagedex） PageIndex}} </button> </div> </template> <script type = "text/javascript"> import {getTotalPageCount} from './getData'; Export {props：{totalpagecount：{ytyp：number、default：0、}、curpageIndex：{type：number、default：1、}、edivepagesize：{type：number、default：7、}、pageajcn：{type：number：default：4、}、pageurl：{type：deferen： '' ting： null、}、pageIssync：{type：boolean、default：true、}}、data（）{return {}}、culted：{pagearr（）{let st = 1、end = this.totalpagecount、cur = this.curpageindex、ajcn = this.pageajcn、arr = flo（ = ajcn-左; if（end == 0 || cur == 0）{return arr; } else {console.log（st、end、cur、左、右）; arr.push（st）; console.log（st+1、cur-left）; if（st + 1 <cur-左）{arr.push（ '...'）; } for（let i = math.max（cur-左、st +1）; i <= cur -1; ++ i）{arr.push（i）; } if（cur！= st）{arr.push（cur）; } for（i = cur + 1; i <= cur + right && i <= end -1; ++ i）{arr.push（i）; } if（cur + right <end -1）{arr.push（ '...'）; } if（end！= cur）{arr.push（end）; } return arr; }}}、methods：{clickpage（curindex）{if（number.isinteger（curindex））{this.curpageindex = curindex; }}、checknum（curindex）{return number.isinteger（curindex）; }}、created（）{this.totalpagecount = gettotalpagecount（this.pageurl、this.pageparams、this.pageissync、this.eachpagesiz）; }} </script>これは主にコンポーネントイベントの使用です。=最も一般的なクリックイベント、およびクラスとスタイルのバインディングです。 CurpageIndexとthis.pageIndexに従ってそれを比較して、このクラスを持っているかどうかを判断してください。計算された属性を計算して、現在のページに従って変更され、作成時に合計ページ番号を計算するため、ページ番号アレイを取得します。
最後のものは、静的データを取得する現在生成されているJSファイルです。
// let data = {// avatar： ''、avatar // name： ''、username // context： ''、comment content //} let dataarr = []; function randomstr（len）{return math.random（）。 = "./Resources/" + i％7 + ".jpg"; _name = randomstr（20）; _context = randomstr（2）; dataarr.push（{avatar：_avator、name：_name、context：_context}）; }} if（！dataarr.length）{initdata（）;} export function getCommentData（url = ''、params = null、issync = true、curpageIndex = 1、各ページ= 7）{ / * ajax * / let st =（curpageindex -1） * end = st + exhadepagesizeとします。 return dataarr.slice（st、end）;} export function gettotalcommentcount（url = ''、params = null、yssync = true）{ / * ajax * / return dataarr.length;} export function gettotalpagecount（url = '' '、params = null、runter = 7） math.floor（（dataarr.length + exlpagesize -1） / hirdpagesize）;}それでおしまい。
githubアドレス