Heim > Artikel > Web-Frontend > Tabellen-Paging-Komponente basierend auf Vue.js

Tabellen-Paging-Komponente basierend auf Vue.js

高洛峰Original: 2017-01-03 17:20:161518Durchsuche

1. Einführung in Vue.js
1. Die Hauptmerkmale von Vue: (1) Einfachheit (2) Leichtgewicht (3) Schnell (4) Datengesteuert (5) Modulfreundlich (6) Komponentisierung
(1) Einfachheit
Sehen wir uns einen Teil des Angular-Codes an, der die bidirektionale Bindung implementiert

// html
<body ng-app="myApp">
 <div ng-controller="myCtrl">
 <p>{{ note }}</p>
 <input type="text" ng-model="note">
 </div>
</body>
 
// js
var myModule = angular.module(&#39;myApp&#39;, []);
 
myModule.controller(&#39;myCtrl&#39;, [&#39;$scopp&#39;, function($scope) {
 $scope.note = &#39;&#39;;
]);

Dann schauen wir uns den Vue-Code an:

// html
<body>
 <div id="app">
 <p>{{ note }}</p>
 <input type="text" v-model="note">
 </div>
</body>
 
// js
var vm = new Vue({
 el: &#39;#app&#39;,
 data: {
 note: &#39;&#39;
 }
})

Im Vergleich Ich persönlich denke, dass der Codierungsstil von Vue prägnanter und leichter zu verstehen ist.

(2) Eleganz

Obwohl Vue ein relativ leichtes Framework ist, ist es einfach und leicht und sehr benutzerfreundlich, und die bereitgestellte API ist auch sehr leicht zu verstehen einige sehr praktische Anweisungen und Attribute.

Zum Beispiel:

1), Klickereignis binden

913ab33578b43051d8ce890f7743009b5db79b134e9f6b82c0b36e0489ee08ed
Ja Die Abkürzung lautet:

38093ba80be0a4113dd32240a24b45cb5db79b134e9f6b82c0b36e0489ee08ed

2), Bindung dynamischer Attribute

16e870cf50e90f7deae53a5851f2cc775db79b134e9f6b82c0b36e0489ee08ed
kann abgekürzt werden als:

ac5bf7cdada38e71acd4bc784b68c64f5db79b134e9f6b82c0b36e0489ee08ed

3), praktische Modifikatoren

<!-- 阻止单击事件冒泡 -->
<a @click.stop="doSomething"></a>
 
<!-- 只在按下回车键的时候触发事件 -->
<input @keyup.enter="submit">

4), wie wäre es mit praktischen Parameterfunktionen

<!-- debounce 设置一个最小的延时 -->
<input v-model="note" debounce="500">
 
<!-- 在 "change" 而不是 "input" 事件中更新数据 -->
<input v-model="msg" lazy>

, fühlt es sich nicht sehr elegant an?

(3) Kompakt

Apropos Kompaktheit: Sie sollten zunächst auf die Quellcodegröße von Vue achten. Der Quellcode der Produktionsversion von Vue (d. h. Min.-Version) beträgt nur 72,9 KB, und die offizielle Website nennt es gzip Nach der Komprimierung sind es nur 25,11 KB, was halb so groß ist wie die 144 KB von Angular.

Einer der Vorteile der Kompaktheit besteht darin, dass Benutzer die entsprechenden Lösungen freier auswählen können und Benutzern mehr Raum für die Koordination mit anderen Bibliotheken bietet.

Zum Beispiel enthält der Kern von Vue standardmäßig keine Routing- und Ajax-Funktionen. Wenn das Projekt jedoch Routing und AJAX benötigt, können Sie direkt die offizielle Bibliothek Vue-Router und die von Drittanbietern verwenden Von Vue bereitgestellte Plug-In-Vue-Ressourcen. Gleichzeitig können Sie auch andere Bibliotheken oder Plug-Ins verwenden, die Sie verwenden möchten, z. B. jQuery, AJAX usw.

Fühlt es sich nicht sehr flexibel an?

(4) Es gibt keinen Mangel an Meistern

Obwohl Vue klein ist, verfügt es über alle inneren Organe, obwohl es klein ist, und es ist auch praktisch beim Erstellen groß angelegter Anwendungen.

1) Modularisierung

In Kombination mit einigen Modulerstellungstools von Drittanbietern wie CommonJS, RequireJS oder SeaJs kann der Code einfach modularisiert werden.

Der Herausgeber empfiehlt hier jedoch nicht, die oben genannten Build-Tools zu verwenden. Die direkte Nutzung der modularen Funktion von ES6 und die Kombination mit Webpack für entsprechende Verpackungen ist derzeit die beliebteste Lösung.

Wenn Sie die Funktionen des ES6-Moduls nicht verstehen, lesen Sie bitte: http://es6.ruanyifeng.com/#docs/module
In zukünftigen Artikeln werde ich es auch vorstellen, einschließlich Webpack.-Konfiguration.

2), Komponentisierung

Vues Komponentisierungsfunktion kann als eines seiner Highlights bezeichnet werden, indem der HTML-, CSS- und JS-Code einer bestimmten Komponente auf der Seite in eine .vue-Datei eingefügt wird Die Verwaltung in Dateien kann die Wartbarkeit des Codes erheblich verbessern.

Zum Beispiel:

// App.vue
<template>
 <div class="box" v-text="note"></div>
</template>
 
<script>
export default {
 data () {
 return {
 note: &#39;这是一个组件的html模板！&#39;
 }
 }
}
</script>
 
<style scoped>
.box {
 color: #000;
}
</style>

Wir können auch eine Vorverarbeitungssprache in die Komponente schreiben:

// App.vue
<template>
 div(class="box" v-text="text")
</template>
 
<script>
export default {
 data () {
 return {
 note: &#39;这是一个组件的html模板！&#39;
 }
 }
}
</script>
 
<style>
.box 
 color: #000
</style>

Natürlich müssen wir es über Webpack verpacken Es wird empfohlen, Webpack + Vue-Loader zu verwenden. Für die Konvertierung muss die ES6-Syntax installiert werden. Da es sich bei dem Artikel um eine kurze Diskussion von Vue.js handelt, werde ich hier keine ausführliche Einführung geben.

3), Routing

Wie Angular verfügt auch Vue über eine Routing-Funktion. Durch die Routing-Funktion können wir jede Komponente nach Bedarf laden und problemlos eine einseitige Anwendung erstellen. Das Folgende ist eine einfache Routing-Konfigurationsdatei:

// router.js
 
&#39;use strict&#39;
 
export default function(router) {
 router.map({
 &#39;/&#39;: {
 component: function (resolve) {
 require([&#39;./components/Foo.vue&#39;], resolve)
 }
 },
 &#39;/foo&#39;: {
 component: function (resolve) {
 require([&#39;./components/Foo.vue&#39;], resolve)
 }
 },
 &#39;/bar&#39;: {
 component: function (resolve) {
 require([&#39;./components/Bar.vue&#39;], resolve)
 }
 }
 })
}

(1) Verwendung von

In der .vue-Komponentendatei schreiben wir die Vorlage wie folgt, also den HTML-Code:

<table class="table table-hover table-bordered">
 <thead>
 <tr>
 <th width="10%">id</th>
 <th width="30%">name</th>
 <th width="40%">content</th>
 <th width="20%">remark</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="data in tableList">
 <td v-text="data.num"></td>
 <td v-text="data.author"></td>
 <td v-text="data.contents"></td>
 <td v-text="data.remark"></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="4">
  <div class="col-sm-12 pull-right">
  <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page>
  </div>
 </td>
 </tr>
 </tfoot>
 </table>

79c8058d7ca51037cffc56aab1987043Die Angabe „async“ im Tag bezieht sich darauf, ob Daten von der Serverseite abgerufen werden sollen. „False“ bedeutet, dass es sich bei „Nein“ um ein statisches Array aus ausgelagerten Tabellendaten handelt die Anzahl der Zeilen pro Seite; page-len ist die Anzahl der Seiten, die angezeigt werden können;

Der JavaScript-Code, der statische Daten verwendet, ist wie folgt:

<script>
 import bootPage from &#39;./components/BootPage.vue&#39;
 
 export default {
 data () {
 return {
  lenArr: [10, 50, 100], // 每页显示长度设置
  pageLen: 5, // 可显示的分页数
  lists: [
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;}
  ], // 表格原始数据，使用服务器数据时无需使用
  tableList: [] // 分页组件传回的分页后数据
 }
 },
 components: {
 bootPage
 },
 events: {
 
 // 分页组件传回的表格数据
 &#39;data&#39; (data) {
  this.tableList = data
 }
 }
 }
 </script>

Im Allgemeinen verwenden wir selten statische Tabellendaten, die meisten Anwendungsdaten werden alle vom Server abgerufen. Hier ist also eine Methode zum Abrufen von Server-Paging-Daten:

Die HTML-Komponente, die vom Server verwendet wird Die Daten lauten wie folgt:

8df561538fba9f62631b6907f6b62183 c14dafede575dc3552d7bf41fdda4a57
Wobei url die Anforderungsadresse des Servers ist; param ist die Anforderungsadresse, an die das Parameterobjekt vom Server gesendet wird

Der Code für die Verwendung von Serverdaten-Javascript lautet wie folgt :

<script>
 import bootPage from &#39;./components/BootPage.vue&#39;
 
 export default {
 data () {
 return {
  lenArr: [10, 50, 100], // 每页显示长度设置
  pageLen: 5, // 可显示的分页数
  url: &#39;/bootpage/&#39;, // 请求路径
  param: {}, // 向服务器传递参数
  tableList: [] // 分页组件传回的分页后数据
 }
 },
 methods: {
 refresh () {
  this.$broadcast(&#39;refresh&#39;) // 这里提供了一个表格刷新功能
 }
 },
 components: {
 bootPage
 },
 events: {
 
 // 分页组件传回的表格数据（这里即为服务器传回的数据）
 &#39;data&#39; (data) {
  this.tableList = data
 }
 }
 }
</script>

Hinweis: Zusätzlich zum an die Komponententabelle übergebenen Array-Inhalt benötigt der Server auch einen Schlüsselnamen für die Gesamtzahl der Seiten mit dem Namen page_num

Für weitere Informationen Artikel zu Tabellen-Paging-Komponenten basierend auf Vue.js, beachten Sie bitte die chinesische PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementieren Sie die SPA-Anwendung mit node+vue.jsNächster Artikel：Implementieren Sie die SPA-Anwendung mit node+vue.js

In Verbindung stehende Artikel

Mehr sehen