私はしばらく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アドレス