Vueテンプレート構文を使用してフォトギャラリーを構築する
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
次のようになります。
<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
. 必要な画像を使用してください。
<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
.
このコードを更新して、写真をクリックすると拡大されるようにします。
<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の反応性システム、データプロパティ、およびテンプレート構文を巧みに使用しています。 🧪