ホームページ > 記事 > ウェブフロントエンド > Vue.js に基づくテーブルページングコンポーネント

Vue.js に基づくテーブルページングコンポーネント

高洛峰オリジナル: 2017-01-03 17:20:161518ブラウズ

1. Vue.js の概要
1. Vue の主な特徴: (1) シンプル (2) 軽量 (3) 高速 (4) データ駆動型 (5) モジュール化されやすい (6) コンポーネント化
(1) シンプル
以下は、双方向バインディングを実装する Angular のコードの一部を見てください

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

次に、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;
 }
})

それに比べて、Vue のコーディングスタイルはより簡潔で理解しやすいと個人的に思います。

(2) 優雅さ

Vue は比較的軽量なフレームワークですが、シンプルで軽量で非常に使いやすく、また、非常に便利なディレクティブやプロパティも提供しています。。

例:

1)、バインドクリックイベント

913ab33578b43051d8ce890f7743009b5db79b134e9f6b82c0b36e0489ee08ed
は次のように省略できます:

d0e70d66c1dcfd4b402c9dec35a754db5db79b134e9f6b82c0b36e0489ee08ed

3)、便利な修飾子

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

4)、そして実用的なパラメーター機能

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

、とてもエレガントな気がしませんか?

(3) コンパクト

コンパクトさについて言えば、まず Vue のソースコードのサイズに注意する必要があります。Vue の製品バージョン (つまり最小バージョン) のソースコードはわずか 72.9kb であると公式 Web サイトに記載されています。 gzip 圧縮後のサイズはわずか 25.11kb ですが、Angular の 144kb と比較すると半分に減ります。

コンパクトであることの利点の 1 つは、ユーザーが対応するソリューションをより自由に選択できるようになり、他のライブラリと連携する際により多くのスペースが得られることです。

たとえば、Vue のコアにはデフォルトではルーティングと Ajax 機能が含まれていません。ただし、プロジェクトでルーティングと AJAX が必要な場合は、公式ライブラリ Vue-router とサードパーティのプラグイン vue を直接使用できます。 -Vue が提供するリソース同時に、jQuery、AJAX など、使用したい他のライブラリやプラグインも使用できます。

とても柔軟だと思いませんか?

(4) 優秀な職人には事欠きません

Vueは小さいながらも全ての内臓が揃っており、大規模なアプリケーションを構築する際にも便利です。

1) モジュール化

CommonJS、RequireJS、SeaJs などのサードパーティのモジュール構築ツールと組み合わせることで、コードを簡単にモジュール化できます。

ただし、ここのエディターは上記のビルドツールの使用を推奨していません。ES6 のモジュラー機能を直接使用し、それを Webpack と組み合わせて対応するパッケージ化を行うのが現在最も一般的なソリューションです。

ES6モジュールの機能が分からない方は、http://es6.ruanyifeng.com/#docs/moduleをご覧ください

今後の記事では、Webpackの設定も含めて紹介していきます。

2) コンポーネント化

Vue の目玉の一つとも言えるコンポーネント化機能は、ページ上の特定のコンポーネントの html、CSS、js コードを .vue ファイルに入れて管理することで、コードを大幅にカスタマイズすることができます。メンテナンス性が向上しました。

例:

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

コンポーネントに前処理言語を記述することもできます:

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

もちろん、Webpack + vue-loader を使用し、ES6 構文を使用することをお勧めします。同時に、変換のために Babel をインストールする必要があります。この記事は Vue.js について簡単に説明したものであるため、ここでは詳細な紹介は行いません。

3)、ルーティング

Angular と同様に、Vue にもルーティング機能があります。ルーティング機能を使用すると、各コンポーネントをオンデマンドでロードし、単一ページのアプリケーションを簡単に構築できます。以下は簡単なルーティング設定ファイルです:

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

の使い方 .vueのコンポーネントファイルに、次のようなテンプレート、つまり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>

18745e754996c235f93078c0e1ab2eaf ここで、url はサーバーのリクエストアドレスです。param はサーバーに送信する必要があるパラメーターオブジェクトです。サーバーデータの JavaScript は次のとおりです:

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

注: コンポーネントテーブルに渡される配列コンテンツに加えて、サーバーには合計ページも必要です。番号のキー名は page_num と呼ばれます

テーブルページングコンポーネントに関するその他の関連記事はこちらVue.js をベースにした PHP 中国語 Web サイトにご注意ください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Node+vue.jsを使用してSPAアプリケーションを実装する次の記事：Node+vue.jsを使用してSPAアプリケーションを実装する

続きを見る

Vue.js に基づくテーブル ページング コンポーネント

関連記事

Vue.js に基づくテーブルページングコンポーネント