Я некоторое время выучил vue.js и использовал его, чтобы сделать 2 виджета и практиковать его.
Я использую WebPack для его упаковки, поэтому я знаком с его использованием.
Исходный код размещается по адресу GitHub в конце статьи.
Сначала это index.html
<! Doctype html> <html> <head> <Title> Page </title> <style type = "text/css"> * {margin: 0; Заполнение: 0; семья с шрифтом: «Open Sans», Arial, Sans-Serif; } .contianer {ширина: 50%; Высота: Авто; Маржа: 20px Auto; } article {margin-bothom: 50px; } </style> </head> <body> <div class = 'contianer'> <статья> Содержание статьи ... </article> <div id = 'main'> <pplice> </app> </div> </div> <script type = "text/javascript" src = 'bundle.js'> </script> </body> </html>Я помещаю компонент приложения в <div id = 'main'> </div>
После упаковки через WebPack файл intry JS IS entry.js, который используется для представления компонента app.vue
inpit.js
let vue = require ('vue'); приложение импорта из './components/app'; let app_vue = new vue ({el:' #main ', components: {app: app}});Далее, давайте посмотрим на этот компонент приложения
<Style Type = "Text/CSS" Scoped> </style> <template> <Комментарий: curpage-index = "curpageindex": щиточка-size = "inary pageize": comment-url = "Комментарий": comment-params = "complyparams": comment-is-sync = "commentisnc"> </commerparams = curyparams ". : uard-page-size = "incypageize": page-url = "pageurl": page-params = "pageparams": page-sync = "pageisync"> </page> </template> <script type = "text/javascript"> импортный комментарий от './comment'; страница импорта из './page'; Экспорт по умолчанию {data () {return {curpageIndex: 1, wanlypagesize: 7,}}, компоненты: {Комментарий: Комментарий, страница: Page},} </script>У него есть 2 детских компонента, а именно Comment.vue и Page.vue. Благодаря динамически привязывающим данным, он проводит компонент родительского ребенка. Я думаю, что для страниц, на которой в настоящее время должна быть передана страница в App.vue, поэтому здесь мы используем двустороннее привязку, остальные, такие как Params, URL, Issync, то есть вещи, которые запрашивают данные из фонового фона и работают ли в настоящее время синхронно или асинхронно <, конечно, я не проверял фоновые данные и в настоящее время генерировать статические данные непосредственно по JS>.
Далее, посмотрите на компонент комментариев Comment.Vue
<style type = "text/css" scoped> .comt-mask {непрозрачность: 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 {margin: 0 0 0 60px; } .comt-name {color: #2b879e; маржинальный бат: 10px; размер шрифта: 18px; } </style> <template> <div v-if = "hascomment": class = "{'comt-mask': загрузка}"> <h3 class = 'comt-title'> {{totalCommentCount}} Комментарии </h3> <div> </div> <div v-for = "commentar }} '/> </div> <div> <p> {{comment.name}} </p> <p> {{comment.context}} </p> </div> <div> </div> </div> </div> </template> <script = "text/javascript"> imort './getData'; Экспорт по умолчанию {opps: {curpageIndex: {type: number, default: 1,}, wann -pagesize: {type: number, default: 7,}, Commenturl: {type: string, default: '',}, CommentParams: {type: Object, default: null,},}, eflean, eface: eFault:} (}, eFault:} (}, eFast: return {totalCommentCount: 0, hascomment: false, загрузка: true,}}, вычисляется: {commentArr () {this.loading = true; let res = getCommentData (this.commenturl, this.commentParams, this.commentisync, this.curpageindex, this.eachpagesize); this.Loading = false; вернуть Res; },}, censue () {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: grey; фоновый цвет: белый; граница: белый; Ширина: 30px; Высота: 30px; Маржа: 5px; размер шрифта: 18px; Схема: нет; } .page-btn-link {cursor: crosshair; } .page-btn-active {border: 1px solid grey; граница-радий: 15px; } </style> <template> <div> <кнопка v-for = "pageindex of pagearr" track-by = '$ index': class = "{'page-btn': true, 'page-btn-active': this.curpageindex === pageindex, 'page-btn-link': checknum (pageindex)}" @ @ @ @ @at " pageIndex}} </button> </div> </template> <script type = "text/javascript"> import {getTotalPageCount} от './getData'; Экспорт по умолчанию {opps: {totalPageCount: {type: number, default: 0,}, curpageIndex: {type: номер, по умолчанию: 1,}, wanl -pagesize: {type: number, default: 7,}, pageajcn: {type: number, affect: 4,}, PageUrl: {type: string, strault: Тип: объект, по умолчанию: null,}, pageissync: {type: boolean, default: true,}}, data () {return {}}, Computed: {pagearr () {let st = 1, end = this.totalpagecount, cur = this.curpageindex, ajcn = this.pageajcn Math.floor (ajcn / 2), right = ajcn - слева; if (end == 0 || cur == 0) {return arr; } else {console.log (st, end, cur, слева, справа); arr.push (ST); console.log (st+1, cury-left); if (st + 1 <cur - left) {arr.push ('...'); } for (let i = math.max (cur - left, st +1); i <= cur - 1; ++ i) {arr.push (i); } if (cur! = st) {arr.push (cur); } for (let 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; }}}, методы: {clickpage (curindex) {if (number.isinteger (curindex)) {this.curpageindex = curindex; }}, checknum (curindex) {return number.isinteger (curindex); }}, conation () {this.totalPageCount = getTotalPageCount (this.pageurl, this.pageParams, this.pageisync, this.eachpagesiz); }} </script>В основном это использование событий компонентов, = самое распространенное событие клика и привязка между классом и стилем. Сравните его в соответствии с CurpageIndex и This.PageIndex, чтобы определить, есть ли у вас этот класс. Используйте вычисленные для расчета атрибутов для получения массива номеров страницы, поскольку он будет изменен в соответствии с текущей страницей, и вычислите общий номер страницы при создании.
Последний - это в настоящее время сгенерированный файл JS, который получает статические данные.
// Пусть data = {// avatar: '', avatar // имя: '', username // context: '', comment content //} let dataarr = []; function randomstr (len) {return math.random (). tostring (36) .substr (len);} function initData () {for (var i = 0; "./resources/" + i%7 + ".jpg"; let _name = randomstr (20); let _context = randomstr (2); dataarr.push ({avatar: _avator, имя: _name, контекст: _context}); }} if (! dataArr.length) {initData ();} функция экспорта getCommentData (url = '', params = null, issync = true, curpageindex = 1, wypensize = 7) { / * ajax * / let st = (curpageindex - 1) * wanly -pageize; Пусть END = ST + CANIT -PAGESIZE; return DataArr.Slice (st, end);} функция экспорта getTotalCommentCount (url = '', params = null, issync = true) { / * ajax * / return dataarr.length;} функция экспорта getTotalPageCount (url = '', params = null, issync = true, wylyPageize = 7) Math.floor ((dataarr.length + wanl -pagesize -1) / wanlypagesize);}Вот и все.
GitHub Адрес