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

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

たとえば、ディレクティブは、v-プレフィックスが付いたタグ属性を参照します。

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

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

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

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

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

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

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

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

<a v-on:[event]="myFunction"></a>は、イベント変数が"hover"または"click"、あるいはv-onで使用されるその他の属性であることを意味します。

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

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

したがって、動的属性を持つimgタグは、<img :[classOrId]="value" @click="display">である可能性があります。ここで、displayは関数、valueは文字列変数、 [X136X ]も文字列変数です。

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

アプリのセットアップ

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は、物事をシンプルに保ちながら、空想を深めようとしているところです。 🌈

ギャラリーの構築

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

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>

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

"gallery"のdisplay: flexと、<li>タグのv-forに注意してください。 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>

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

クリックした画像の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の反応性システム、データプロパティ、およびテンプレート構文を巧みに使用しています。 🧪