Vueの動的ページ付けを開発する.Nuxtのバージョンです.js

38117 ワード
vue nuxt テキストリンク
動的なページ付けを開発するには、Vueに関する基本的な知識を持つ必要があります.jsとnuxt.jsVueを持っている必要があります.JSまたはNuxt.あなたのコンピュータにインストールされたJS.それに加えて、HTML、CSS、およびルータのリンクに関する基本的な知識が必要です.私は、Vueをあなたに話さなければなりません.JSは最高のチュートリアルの一つです.
この記事では、W 3スクールのCSS教材を使用しました.Nuxtとアプリケーションを開発している場合.その後、Nuxtに次のコードを追加する必要があります.設定.jsファイル.
script: [
      { src: 'https://code.jquery.com/jquery-3.4.1.slim.min.js', integrity: 'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n', crossorigin: 'anonymous' },
      { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', integrity: 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo', crossorigin: 'anonymous' },
      { src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', integrity: 'sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6', crossorigin: 'anonymous' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald'},
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Open Sans'},
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'},
      { rel: 'stylesheet', href: 'https://www.w3schools.com/w3css/4/w3.css'},
      { rel: 'stylesheet', href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', integrity: 'sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh', crossorigin:'anonymous'},
      { rel: 'stylesheet', href: 'https://www.w3schools.com/lib/w3-theme-black.css'}
    ]
Vueを使用している場合.次に、インデックスを更新します.ルートに置かれたHTMLファイル.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
起動する前に、いくつかのVueがあります.あなたが覚えておく必要があるJSのプロパティ:
双方向データバインド
双方向データバインディングはV -モデルの助けを借りて行うことができます.Vモデルのディレクティブを使用してHTMLから値を格納することができます.また、任意のメソッドでその値を使用できます.すべてのV -モデル値はリアルタイムで変わります、サーバーはこれらの指令のために再ロードしません.
メソッド:
メソッドは、異なるオブジェクトで実行できるアクションです.ここで、このメソッドをボタンクリックイベントでsetPageに使用します.
コンピュータのプロパティ
このチュートリアルでは、計算されたプロパティを使用します.計算されたプロパティは、別の値に依存する値を記述するために使用されます.これは、VueのときにDOMを更新する知っている.たとえば、このダイナミックなページネーションでは、すべての値が前の値に依存します.現在のページの色は間接的に前のページと合計ページに依存します.
このチュートリアルでは、RAM、価格、ストレージ、オペレーティングシステム、およびラップトップサイズのような異なる仕様でラップトップのリストを作成しています.次のコードがNuxtの両方に関して同じであるならば.JSとVuejsつのVueファイルを使用して、動的ページ付けを作成するには、次のコードを使用できます.
コードに飛び込みましょう.
テンプレートタグには、ラップトップ、RAM、オペレーティングシステム、および価格に関するすべての基本的なHTMLが含まれています.
V - forディレクティブを使用して、配列に基づいて項目のリストをレンダリングできます.V - forディレクティブは「アイテムの項目」を必要とします、この場合、第1のV - forディレクティブは「totalpagesのPageNumber」です、そして、指令のためのもう一つのVは「Paginateの記事」です.“currentpage”が1の場合、動的ページ付けは最初のページから開始されます.ユーザーが別のページをクリックするとすぐに、「CurrentPage」はユーザーによってクリックされたページ番号に更新されます.
テンプレートHTML :
<template lang="html">
  <div class="w3-light-grey">
<div class="w3-content" style="max-width:1600px">
  <div class="w3-row w3-padding w3-border">
    <div class="w3-col l8 s12">
      <div class="w3-container w3-white w3-margin w3-padding-large">
        <div class="w3-justify">
          <h1>Laptops</h1><br><br>
          <div>
          <button v-for="pageNumber in totalPages" :key="pageNumber.id" class="w3-button" v-bind:key="pageNumber" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }} </button>
          </div>
      <div class="container w3-white w3-card" v-for="article in paginate" :key="article._id"><br>
  <div class="row">
    <div class="col-sm-4">
      <img src="~/assets/laptop.jpg" style="width:100px; height:100px">
    </div>
    <div class="col-sm-4">
      <h5><span class="w3-large w3-text-teal">{{ article.title }},</span></h5>
      <span>OS: {{article.os}}</span><br>
      <span>{{article.size}} Inches</span><br>
      <span>{{article.ram}} GB RAM</span><br>
      <span v-if="article.storage >= 1000">{{ article.storage/1000 }} TB Storage,</span>
      <span v-else>{{ article.storage }} GB Storage,</span><br>
    </div>
    <div class="col-sm-4">
      <h3>${{article.price}}</h3>
      <p><a href=""><button class="w3-button w3-block w3-teal">Buy Now</button></a></p>
    </div>
  </div><hr>
</div>
<div>
<button v-for="pageNumber in totalPages" :key="pageNumber.id" class="w3-button" v-bind:key="pageNumber" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }} </button>
</div>
          </div>
        </div>
    </div>
</div>
</div>
  </div>
</template>
次のコードを見てください.これは、双方向データバインドに使用される戻りオブジェクトを持つデータ関数です.このオブジェクトは、ラップトップオペレーティングシステム、価格、重量、サイズ、記憶装置およびラップトップRAMに関する全ての情報を有する記事配列を含む.任意の数に“iTemsperPage”を更新することができます.あなたが1ページにつき5つのアイテムを示したいならば、あなたはそれを5に更新することができます.
data() {
  return {
    articles: [{
      os: 'Windows',
      price: '500',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Chromeos',
      price: '400',
      weight: '7.0 Pounds',
      size: '11.1',
      storage: '256 GB',
      ram: '4',
      company: 'hp',
      title: 'HP Chromebook 14'
    },
    {
      os: 'Windows',
      price: '450',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '600',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '700',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '350',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '400',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    }],
 currentPage: 1,
  itemsPerPage: 3,
  resultCount: 0
  }
},
次のコードをメソッドの内部に追加します.現在のページを更新するには"setpage "関数が呼び出されます.
methods: {
setPage: function(pageNumber) {
    this.currentPage = pageNumber
  },
},
これが計算されたプロパティです.「TotalPage」は全ダイナミックページの論理です.例えば、itemsperpageが3で、記事配列の12の項目の合計があるなら、「totalpage」要素は4です.
computed: {
  /* eslint-disable */
      totalPages: function() {
        if (this.resultCount == 0){
          return 1
        }
        else {
        return Math.ceil(this.resultCount / this.itemsPerPage)
      }
      },
      /* eslint-disable */
      paginate: function() {
          if (!this.articles || this.articles.length != this.articles.length) {
              return
          }
          this.resultCount = this.articles.length
          if (this.currentPage >= this.totalPages) {
            this.currentPage = this.totalPages
          }
          var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
          return this.articles.slice(index, index + this.itemsPerPage)
      }
  },
}
現在のページの色を変更するスタイリングを追加します.
<style lang="css">
.current {
color: teal;
}
</style>
それで、それはラップです.このコードを実装した後、あなたが疑問を持っている場合は、以下のコメントをドロップして私たちに到達することを躊躇しないでください.
[伯俊]1208部分数列の和2
バンドルをRuby 2.3でインストールする方法