Composant de pagination de table basé sur Vue.js-js tutoriel-php.cn

1. Introduction à Vue.js
1. Les principales fonctionnalités de Vue : (1) Simplicité (2) Léger (3) Rapide (4) Piloté par les données (5) Adapté aux modules (6) Componentisation
(1) Simplicité
Regardons un morceau de code Angular qui implémente la liaison bidirectionnelle

// 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;;
]);

Copier après la connexion

Regardons ensuite le code Vue :

// 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;
 }
})

Copier après la connexion

En comparaison , personnellement, je pense que le style de codage de Vue est plus concis et facile à comprendre.

(2) Élégance

Bien que Vue soit un framework relativement léger, il est simple et léger et très convivial, et l'API qu'il fournit est également très facile à comprendre. des instructions et des attributs très pratiques.

Par exemple :

1), lier un événement de clic

Oui L'abréviation est :

2), liaison des attributs dynamiques

peut être abrégé comme :

3), modificateurs pratiques

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

Copier après la connexion

4), que diriez-vous des fonctionnalités de paramètres pratiques

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

Copier après la connexion

, n'est-ce pas très élégant ?

(3) Compact

En parlant de compacité, vous devez d'abord faire attention à la taille du code source de Vue Le code source de la version de production de Vue (c'est-à-dire la version min) n'est que de 72,9. Ko, et le site officiel l'appelle gzip. Après compression, il ne fait que 25,11 Ko, soit la moitié de la taille des 144 Ko d'Angular.

L'un des avantages d'être compact est qu'il permet aux utilisateurs de choisir les solutions correspondantes plus librement et qu'il donne aux utilisateurs plus d'espace pour se coordonner avec d'autres bibliothèques.

Par exemple, le noyau de Vue n'inclut pas les fonctions de routage et Ajax par défaut. Cependant, si le routage et AJAX sont nécessaires dans le projet, vous pouvez directement utiliser la bibliothèque officielle Vue-router et le tiers. plug-in vue-resource fourni par Vue En même temps, vous pouvez également utiliser d'autres bibliothèques ou plug-ins que vous souhaitez utiliser, tels que jQuery, AJAX, etc.

N'est-ce pas très flexible ?

(4) Les maîtres ne manquent pas

Bien que Vue soit petite, elle possède tous les organes internes même si elle est petite, et elle est également pratique lors de la création d'applications à grande échelle.

1) Modularisation

Combiné avec certains outils de création de modules tiers, tels que CommonJS, RequireJS ou SeaJs, le code peut être facilement modularisé.

Cependant, l'éditeur ici ne recommande pas d'utiliser les outils de construction ci-dessus. Utiliser directement la fonction modulaire d'ES6 et la combiner avec Webpack pour l'empaquetage correspondant est actuellement la solution la plus populaire.

Si vous ne comprenez pas les fonctions du module ES6, veuillez consulter : http://es6.ruanyifeng.com/#docs/module
Dans les prochains articles, je le présenterai également, notamment Configuration du pack Web.

2), composantisation

La fonction de composantisation de Vue peut être considérée comme l'un de ses points forts en mettant le code html, CSS et js d'un certain composant de la page dans un .vue. La gestion dans les fichiers peut grandement améliorer la maintenabilité du code.

Par exemple :

// 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>

Copier après la connexion

Nous pouvons également écrire un langage de prétraitement dans le composant :

// 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>

Copier après la connexion

Bien sûr, nous devons le packager via webpack lors de l'écriture de ceci De cette manière, il est recommandé d'utiliser Webpack vue-loader et d'utiliser la syntaxe ES6 qui doit être installée pour la conversion. Étant donné que l'article est une brève discussion de Vue.js, je ne donnerai pas ici une introduction approfondie.

3), Routage

Comme Angular, Vue a aussi sa fonction de routage. Grâce à la fonction de routage, nous pouvons charger divers composants à la demande et créer facilement des applications d'une seule page. Ce qui suit est un simple fichier de configuration de routage :

// 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)
 }
 }
 })
}

Copier après la connexion

(1) Comment utiliser

Dans le fichier de composant .vue, nous écrivons le modèle comme ceci, c'est-à-dire le code html :

<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>

Copier après la connexion

L'async dans la balise indique s'il faut obtenir des données du serveur, false signifie que non ; les données sont un tableau statique de données de table paginées ; nombre de lignes par page ; page-len est le nombre de pages pouvant être affichées

Le code JavaScript qui utilise des données statiques, c'est-à-dire le contenu de la balise de script, est le suivant :

<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>

Copier après la connexion

Généralement, nous utilisons rarement des données de table statiques, la plupart des données d'application. Elles sont toutes obtenues côté serveur, voici donc une méthode pour obtenir les données de pagination du serveur :

Le composant HTML qui utilise les données du serveur est la suivante :

< ;/boot-page>
où url est l'adresse de requête du serveur ; param est la requête à l'objet Parameter envoyée par le serveur ;

Le code pour utiliser le javascript des données du serveur est le suivant :

<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>

Copier après la connexion

Remarque : en plus du contenu du tableau transmis à la table des composants, le serveur a également besoin d'un nom de clé pour le nombre total de pages, nommé page_num

Pour plus d'articles connexes sur la table. Composants de pagination basés sur Vue.js, veuillez faire attention au site Web PHP chinois !