まいGalleryサイト

Main Contents

Photographers in flickr

flickrという写真投稿サイトで「いいね」をくれた写真家の方々をご紹介いたします。
すごくクォリティーの高い写真を撮られてるので、私も参考にさせてもらってます。

To be worried about最近の気になること

vue.js 最近Vue.jsというフレームワークがいいという評判をネットで目にします。
はたして-jQueryの代わりになるのだろうか-という課題でサイトに導入してみることにしてみました。
実際組んでみて、スライドなどの動きのあるものは、慣れの問題もあると思いますがjQueryの方が使い勝手が良かったです。けれど条件によるセレクタや要素の付替書出しなどはVueの方が設定しやすい。

シングルページ向きのツールですが書き方がわかってくると、jQueryよりもわかりやすいかもです。
インクルードファイルを作らなくてもnavなどを共通パーツにできたり、コンポーネントの概念等、新しい使い方を未知数に秘めた期待大のJavascriptフレームワークです。

Code vew

Code databook

Vue.jsを初めてwebサイトに取り入れてみました。デベロッパーツールではマスタッシュやv-属性がhtmlに変換されてしまうのでここで書き留めておこうと思います。

グローバルナビゲーションをコンポーネント化、外部ファイルとして読み込めばページ共通パーツになります。

  <!-- html -->
  <ul class="clearfix">
      <!-- vueコンポーネント化-->
      <nav-comp></nav-comp>
  </ul>

//js外部ファイル
const NavComp = {
    //for文で要素を簡略化
    template: '<li v-for="item in navLi"><a v-bind:href="item.pageLink"> { { item.pageTitle } } </a></li>',
    data: function(){
        return {
           //pageLinkはURL、pageTitleはリンクテキスト
            navLi: [
                { pageLink: 'dummy.html', pageTitle: 'HOME' },
                { pageLink: 'dummy.html', pageTitle: 'Illust' },
                { pageLink: 'dummy.html', pageTitle: 'Photo' },
                { pageLink: 'dummy.html', pageTitle: 'JavaScript' }
            ]
        }
    }
}

new Vue({
    el: '#topNav',
    components: {
        'nav-comp': NavComp
    }
})

メインコンテンツをfor文で書出し。

<!-- html -->
<section v-for="items in menuBox" class="pageBox">
    <a v-bind:href="items.pageUrl"><img v-bind:src="items.menuimg" v-bind:alt="items.menuTitle"></a>
    <h3>{ { items.menuTitle } } </h3>
    <p> { { items.menuComent } } </p>
    <a v-bind:href="items.pageUrl" class="toArrow"><i class="fas fa-angle-right"></i></a>
</section>

//js外部ファイル
new Vue({
    el: '#main',
    data: {
        menuBox: [
            //TOPページメニューコンテンツ
            {menuimg: 'image/mainbox1.jpg',
             menuTitle: 'Illustration',
             menuComent: '仕事の合間に書き溜めてきたイラストです',
             pageUrl: 'dummy.html'},
            {menuimg: 'image/mainbox2.jpg',
             menuTitle: 'Photos',
             menuComent: '主に身の回りの生き物や風景を撮っています',
             pageUrl: 'dummy.html'},
            {menuimg: 'image/mainbox3.jpg',
             menuTitle: 'JavaScript development',
             menuComent: '自作で開発したJavaScriptで、jQueryを基盤にしています',
             pageUrl: 'dummy.html'}
        ]
    }
})

デバイス切替を作ってみました。

<!-- html -->
<div v-bind:id="kesaran" v-html="pasaran"></div>

//jsファイル
new Vue({
    el: '#app',
    data: {
        kesaran: '#pc',
        pasaran: ''//初期値を置いておく        
    },//createdでイベントを登録
    created: function(){
        window.addEventListener('load',this.pc);
        window.addEventListener('resize',this.pc);
    },
    methods: {
        pc: function(){
            if(window.innerWidth > 678){
                //this必要、場合によって$event
                //値に改行入れるとエラーになる
                this.kesaran = '#pc';
                this.pasaran = '<p>PCタイトル</p>';
            } else {
                this.kesaran = '#sp';
                this.pasaran = '<p>スマホタイトル</p>';
            }       
        }
    }
})

MY PORTFOLIOGALLERYWORKS SITE

Greeting

Main Contents

{{items.menuTitle}}

Photographers in flickr

{{items.menberName}}

To be worried about最近の気になること