プリローダー

MY PORTFORIO

Personal performance & oneselfMORNING GLOW

PRODUCE WEB SITE

制作させていただいた中の一部で公開されているサイトをご紹介いたします。

基本的にデザイン、コーディング、サーバUP設定の作業を全て一人で作業をしております。プラグインは極力使わずjavascriptやWordpressのテンプレートタグはオリジナルで組んでますが、jQueryやBootstrapなどのフレームワークは利用させてもらってます。
jQueryはコードが簡潔になりますし、Bootstrapは必要なセレクターだけ読み込んでカスタマイズしています。

{{items.num}}{{items.title}}

サイトへ

{{items.num}}{{items.title}}

業種
{{items.type}}
仕様
Comment
 

COLUMN

こちらのWEBサイト一覧はvue.jsを適用しました。
レイアウトのベースとなるブロックを一つ作り、HTMLの中にVueコードを組み込んで自動で繰り返し処理をしています。
配列から要素が取り出されているので、インデックスの数だけ書き出されます。

通常のHTMLだとブロックを必要な数まで繰り返すのでHTMLが長くなってしまいます。
配列でまとめると、とても簡潔になりました。
ただ、Vueコードの中にjQueryを仕込むと挙動が思うようにいかなくなってしまいました。
おそらくどこかで干渉してしまったかもしれません。

Vue.jsは使い始めたばかりなので、これから使い続けて色々試してみたいと思っています。

コード表示arrow_downward

HTML

<div class="webBox" v-for="items in website" v-bind:id="items.idname">
     <h3 class="sqTitle sp"><span> { { items.num } } </span> { { items.title } } </h3>
     <figure>
         <a v-bind:href="items.link"><img class="notePc" v-bind:src="items.img" v-bind:alt="items.title">
         <img class="toSite" v-bind:src="items.arrow" alt="サイトへ"></a>
     </figure>
     <article>
         <h3 class="sqTitle pc"><span> { { items.num } } </span> { { items.title } } </h3>
         <dl>
             <dt>業種</dt>
             <dd> { { items.type } } </dd>
             <dt>仕様</dt>
             <dd v-html="items.pattern"></dd>
             <dt>Comment</dt>
             <dd v-html="items.comment"></dd>
         </dl>
     </article>         
</div>

script

new Vue ({
    el: '#main',
    data: {
        website: [
            {
             link : '#',
             img : imgPass+'image',
             idname : 'web00',
             arrow : imgPass+'image',
             num : '1',
             title : 'タイトル',
             type : 'text',
             pattern : 'text',
             comment : 'text'
             }//ここまで一つの配列
            ]
        }
    });

TOPへ