나는 잠시 동안 vue.js를 배웠고 2 개의 위젯을 만들고 연습하는 데 사용했습니다.
웹 팩을 사용하여 패키지를 사용하므로 사용에 익숙합니다.
소스 코드는 기사 끝에서 Github 주소에 배치됩니다.
먼저 index.html입니다
<! doctype html> <html> <head> <title> page </title> <style type = "text/css"> * {마진 : 0; 패딩 : 0; Font-Family : 'Open Sans', Arial, Sans-Serif; } .Contianer {너비 : 50%; 높이 : 자동; 마진 : 20px 자동; } 기사 {마진-바닥 : 50px; } </style> </head> <body> <div class = 'Contianer'> article> 기사 내용 ... </article> <div id = 'main'> <app> </app> </div> </div> <script type = "text/javaScript"src = 'bundle.js'> </body> </html>앱 구성 요소를 <div id = 'main'> </div>에 넣었습니다
WebPack을 통해 포장 한 후 Entry JS 파일은 Entry.js이며 앱을 소개하는 데 사용됩니다. vue 구성 요소
Entry.js
vue = require ( 'vue');
다음 으로이 앱 구성 요소를 살펴 보겠습니다
<스타일 유형 = "text/css"scoped> </style> <emplate> <comment : cur-page-index = "curpageIndex": "earlypage-size ="earlypagesize ": comment-url ="commentUrl ": comment-params ="commentparams ": comment-is-sync ="commentissync "> : 각각의 page-size = "eargypagesize": page-url = "pageurl": page-params = "pageparams": page-is-sync = "pageissync"> </page> </템플릿> <script type = "text/javaScript"> 가져 오기 주석 './comment'; './page'에서 페이지 가져 오기; 기본값 {data () {return {curpageIndex : 1, earypagesize : 7,}}, 구성 요소 : {댓글 : 댓글, 페이지 : page},} </script>두 개의 아동 구성 요소, 즉 Comment.Vue 및 Page.Vue가 있습니다. 데이터를 동적으로 바인딩함으로써 부모-자식 구성 요소 커뮤니케이션을 수행합니다. 나는 현재 어떤 페이지에있는 페이지에 대해 app.vue로 전달되어야한다고 생각합니다. 여기서 우리는 여기서는 두 방향 바인딩을 사용합니다. 우리는 두 방향 바인딩을 사용합니다. Params, URL, Issync 등의 나머지는 배경에서 데이터를 요청하는 것과 동기 또는 비동기 적으로 작동할지 여부를 여기에서 배경 데이터를 테스트하지 않았으며 현재 JS가 정적 데이터를 직접 테스트하지 않았습니다.
다음으로 주석을 살펴보십시오. vue 댓글 구성 요소
<스타일 유형 = "text/css"scoped> .comt-mask {불투명 : 0.5; } .comt-title {} .comt-line {너비 : 100%; 높이 : 2px; 배경색 : #CCC; 여백 : 10px 0; } .comt-wrap {} .comt-user {float : 왼쪽; } .comt-img {너비 : 34px; 높이 : 34px; Border-Radius : 17px; } .comt-context {마진 : 0 0 60px; } .comt-name {색상 : #2b879e; 마진 바닥 : 10px; 글꼴 크기 : 18px; . } '/> </div> <div> <p> {{comment.name}} </p> <p> {{comment.context}} </p> </div> </div> </div> </div> </템플릿> <script type = "text/javascript"> gettotalcommentdata, gettotalcommoncount} './getData'; 내보내기 기본값 {propss : {curpageIndex : {type : number, default : 1,}, everypagesize : {type : 숫자, 기본값 : 7,}, commentUrl : {type : string, default : '',}, commentparams : {type : object, default : null,}, commentisSync : {type : bolean : leafault : refault : refault : refault. return {TotalCommentCount : 0, Hascomment : False, Loading : True,}}, 계산 : {cammber () {this.loading = true; ret = getCommentData (this.commenturl, this.commentparams, this.commentissync, this.curpageIndex, this.eachpagesize); this.loading = false; 리턴 레스; },}, create () {let cnt = getTotalCommentCount (this.commenturl, this.commentparams); this.totalCommentCount = cnt; this.hascomment = cnt> 0; }} </script>여기에 getData.js는 아래에 언급되어 있으며 데이터를 얻는 곳입니다.
로드 : 원래 의미는 페이지 번호가로드 될 때 현재 주석에 대해 0.5 투명도 마스크를로드 한 다음 AJAX는 콜백 기능을 통해 마스크를 취소하는 것입니다. 이제 이것은 구현할 수 없으므로 강제로만 적을 수는 있지만 쓸모가 없습니다.
Hascomment : 주석 구성 요소가 처음로로드되면 총 데이터 길이를 얻습니다. 데이터가 없으면 주석 구성 요소 레이아웃 콘텐츠가 표시되지 않습니다.
curpageIndex ・ : 소품을 사용하여 상위 구성 요소 앱을 통과했습니다
이 데이터의 기본값과 유형을 설정합니다.
page.vue
<스타일 유형 = "text/css"scoped> .page {text-align : center; 마진 : 30px; } .page-btn {색상 : 회색; 배경색 : 흰색; 국경 : 흰색; 너비 : 30px; 높이 : 30px; 여백 : 5px; 글꼴 크기 : 18px; 개요 : 없음; } .page-btn-link {cursor : crosshair; } .page-btn-active {테두리 : 1px Solid Grey; Border-Radius : 15px; } </style> <emplate> <div> <버튼 V-for = "pageInex of pagearr"track-by = '$ index': class = "{ 'page-btn': true, 'page-btn-active': this.curpageIndex === pageIndex, 'page-btn-link': 'pageindex (pageindex)}" @click = "pageindex (pageindex)" @ }}} </button> </div> </template> <script type = "text/javaScript"> import {getTotalPageCount} from './getData'; 내보내기 기본값 {propss : {TotalPageCount : {tote : 숫자 : 숫자, 기본값 : 0,}, curpageIndex : {type : number, default : 1,}, eboutpagesize : {type : number, default : 7,}, pageajcn : {type : number, default : 4,}, pageurl : {default,} 객체, 기본값 : null,}, pageync : {type : boolean, default : true,}}, data () {return {}}, computed : {pagearr () {let st = 1, end = this.totalPageCount, cur = this.curpageEndex, ajcn = hath =, hath =, hath =, hathecn. / 2), 오른쪽 = 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 -left) {arr.push ( '...'); } for (i = math.max (cur -left, 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 + 오른쪽 <끝 -1) {arr.push ( '...'); } if (end! = cur) {arr.push (end); } rack arr; }}}, 메소드 : {clickPage (curIndex) {if (number.isinteger (curindex)) {this.curpageIndex = curIndex; }}, checknum (curindex) {return number.isinteger (curindex); }}, create () {this.totalPageCount = getTotalPageCount (this.pageUrl, this.pageparams, this.pageisSync, this.CHECPAGESIZ); }} </script>주로 구성 요소 이벤트를 사용하는 것입니다. = 가장 일반적인 클릭 이벤트 및 클래스와 스타일 사이의 바인딩입니다. CurpageIndex와 this.pageindex에 따라 비교 하여이 클래스가 있는지 여부를 결정하십시오. 컴퓨팅을 사용하여 속성을 계산하여 현재 페이지에 따라 변경되기 때문에 페이지 번호 배열을 얻고 생성 될 때 총 페이지 번호를 계산하십시오.
마지막은 정적 데이터를 가져 오는 현재 생성 된 JS 파일입니다.
// data = {// avatar : '', avatar // name : ', username // context :', comment content //} dataarr = []; function RandomStrs (len) {return math.random (). toString (36) .substr (len);} function initdata () {for (var i = 0; + +i) {) "./resources/" + i%7 + ".jpg"; _name = randomstr (20)를하자; _context = randomstr (2); dataarr.push ({avatar : _avator, name : _name, context : _context}); }} if (! dataarr.length) {initdata ();} 내보내기 getCommentData (url = '', params = null, issync = true, curpageIndex = 1, earlypagesize = 7) { / * ajax * / let st = (curpageIndex -1) * earlypagesize; end = st + everypagesize; return dataarr.slice (st, end);} 내보내기 함수 getTotalCommentCount (url = '', params = null, issync = true) { / * ajax * / return dataarr.length;} 내보내기 함수 getTotalPageCount (url = ', params = null, issianc = true, 각 페이지 규칙 = 7) { / * ajax * / reto Math.floor ((dataarr.length + earlypagesize -1) / earlypagesize);}그게 다야.
github 주소