Vueテンプレート構文を使用してフォトギャラリーを構築する

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

Vue は、テンプレート機能を使用する場合に最適です。派手なユーザーインターフェイスを構築することは非常に直感的になります。

たとえば、そのディレクティブを取り上げます。これは、タグ属性を参照します。 v- プレフィックス。

あなたは変数を持つことができます url アンカータグがそのとして使用するVueインスタンスで href. これは次のようになります。

<a v-bind:href="url"></a>

たくさん使っている他のディレクティブで試してみましょう。

<a v-on:click="myFunction"></a>

これが、リンクをクリックしたときにコンポーネントの関数の1つを呼び出す方法です。

動的引数は、ディレクティブを新しいレベルに引き上げます。次のことを考慮してください。

<a v-bind:[attributeName]="url">...</a>

attributeName それ自体が次のようなJavaScript式です url、その周りの角かっこのためにそのように解釈されます。

<a v-on:[event]="myFunction"></a> イベント変数が "hover" また "click" またはで使用されるその他の属性 v-on.

もう1つ見てみましょう。

ディレクティブ v-on と v-bind 非常に一般的であるため、Vueでそれらを作成するためのショートカットがあります。 : と @.

だから、 img 動的属性を持つタグは <img :[classOrId]="value" @click="display"> どこ display 関数です、 value 文字列変数であり、 classOrId 文字列変数でもあります。

それを拡張するために、この新しい手の込んだテンプレート構文のいくつかを使用してフォトギャラリーを作成します。準備をしなさい！

アプリのセットアップ

Vue CLIをまだインストールしていない場合は、npmとYarnのどちらを使用するかによって、ターミナルで次のコマンドのいずれかを実行することから始めます。

$ npm install -g @vue/cli

また

$ yarn global add @vue/cli

これで、を実行できるようになります vue コマンドラインからのコマンド。 alligator-zestというVueアプリを作成しましょう

$ vue create alligator-zest
$ cd alligator-zest
$ npm run build
$ npm run serve

次に、変更します HelloWorld.vue することが PhotoGallery.vue. App.vue 次のようになります。

App.vue

<template>
  <div id="app">
    <PhotoGallery/>
  </div>
</template>

<script>
import PhotoGallery from './components/PhotoGallery.vue'

export default {
  name: 'App',
  components: {
    PhotoGallery
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

PhotoGallery.vue 物事をシンプルに保ちながら、私たちが空想を得ようとしているところです。 🌈

ギャラリーの構築

に5つの写真ファイルがあると仮定しましょう assets/photos 名前の付いたフォルダ 1.jpeg 終えた 5.jpeg. 必要な画像を使用してください。

PhotoGallery.vue

<template>
  <div>
    <ul class="gallery">
      <li v-for="n in 5" :key="n">
        <img
          :src="require('@/assets/photos/' + n + '.jpeg')"
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PhotoGallery'
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.gallery {
  display: flex;
  justify-content: space-around;
}
img {
  width: 20%;
}
</style>

The @ シンボルは、を指すWebpackエイリアスです。 src フォルダ。

に注意してください display: flex の上 "gallery" だけでなく、 v-for の中に <li> 鬼ごっこ。あなたはあなたのブラウザでアプリを見ることができるはずです localhost:8080.

このコードを更新して、写真をクリックすると拡大されるようにします。

PhotoGallery.vue

<template>
  <div>
    <ul class="gallery">
      <li v-for="n in 5" :key="n">
        <img
             @click="highlight"
          :src="require('@/assets/photos/beijing/' + n + '.jpeg')"
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PhotoGallery'
},
methods: {
  highlight() {
    event.target.id = "theater";
    let eventIterator = event.target.parentNode;
    while (eventIterator.previousElementSibling != null) {
      eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";
      eventIterator = eventIterator.previousElementSibling;
    }
    eventIterator = event.target.parentNode;
    while (eventIterator.nextElementSibling != null) {
      eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";
      eventIterator = eventIterator.nextElementSibling;
    }
  }
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.gallery {
  display: flex;
  justify-content: space-around;
}
img {
  width: 20%;
}
#theater {
  width: 40%;
}
</style>

追加しました v-on:click を引き立たせる各画像に highlight() 方法。この方法では、クリックされた画像が大きくなり、他の画像はサムネイルサイズになります。

クリックした画像のIDを幅の広い「劇場」に設定します。次に、親ノードの兄弟ノードをイメージから取得し、liにv-forを含めます。これらすべてのliタグに入り、それぞれのimgタグのIDをnull文字列に設定して、常に1つのimgだけが「シアター」IDを持つようにします。

これはかっこいいですが、それでもWebで見られるものではありません。拡大した画像を、たとえば5つのサムネイルの下に大きな表示にする方法を教えてください。最終的には、選択した画像が真下の実際の劇場サイズに拡大されたサムネイルのロールになります。いいですね。

以下を追加します。

<div id="frame">
  <img
    :src="this.theatrical"
  >
</div>

data() {
  return {
    theatrical: ""
  }
},
methods: {
  highlight() {
    event.target.id = "theater";
    this.theatrical = event.target.src;

そして最後に、CSSに以下を追加します。

#frame img {
  width: 80%;
}

ブラウザでチェックしてください！

大きなフレームは、クリックしてからクリックした写真で埋め尽くされています src クリックすると属性が設定されます。これで、写真のギャラリービューが表示されます。

すべて、Vueの反応性システム、データプロパティ、およびテンプレート構文を巧みに使用しています。 🧪

getdocs

13036