LoginSignup
0
0

More than 3 years have passed since last update.

@dai_designing(Daisuke Mori)

[Re:ゼロから始めるVue生活]メモ

Last updated at Posted at 2019-12-17

Vueで個人的に使えそうなものをメモとしてピックアップしていきます。
この記事の内容は全てではないので、1から学習したい方は公式ドキュメントを参照してください。

VueをCDNで使う雛形

VueをCDNで使う雛形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<title>Vue App</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                title: '',
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

リストレンダリング（画像表示あり）

リストレンダリング（画像表示あり）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <!-- 配列なし -->
        <img :src="imageSrc">
        0: 配列なし
        <!-- 配列あり -->
        <div v-for="(item, index) in items" v-bind:key="item.id">
            <img v-if="item.imageSrc" :src="item.imageSrc" :style="item.imageStyle">
            {{ item.id }}: {{ item.title }}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                // 配列なし
                imageSrc: './img/ph1.jpg',
                // 配列
                items: [
                  {
                    id: 1,
                    title: '配列から表示',
                    imageSrc: './img/ph1.jpg',
                    imageStyle: 'width:30%;height:30%;object-fit:cover;',
                  },
                  {
                    id: 2,
                    title: '配列から表示',
                    imageSrc: './img/ph2.jpg',
                    imageStyle: 'width:10%;height:10%;object-fit:cover;',
                  },
                ],
            }
        });
    </script>
</body>
</html>

検索＆ソート

検索＆ソート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <input v-model.number="budget">円以下
        <p>{{ matched.length }}件表示中</p>
        <button v-on:click="order=!order">価格 ▼</button>
        <div v-for="item in limited" v-bind:key="item.id">
            {{ item.name }}: {{ item.price }}円
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                // 検索初期値
                budget: '',
                // 検索数
                limit: 10000000000000,
                // 検索リスト
                list: [
                    { id: 1, name: 'A商品', price: '500' },
                    { id: 2, name: 'B商品', price: '300' },
                    { id: 3, name: 'C商品', price: '200' },
                    { id: 4, name: 'D商品', price: '700' },
                    { id: 5, name: 'E商品', price: '100' },
                    { id: 6, name: 'F商品', price: '900' },
                ],
                // ソート初期値
                order: false,
            },
            computed: {
                matched: function() {
                    return this.list.filter(function(el) {
                        return el.price <= this.budget
                    }, this)
                },
                sorted: function() {
                    return _.orderBy(this.matched, 'price', this.order ? 'desc' : 'asc')
                },
                limited: function() {
                    return this.sorted.slice(0, this.limit)
                }
            }
        });
    </script>
</body>
</html>

ゲッター・セッター

ゲッター・セッター
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vue App</title>
</head>
<body>
    <div id="app">
        {{ fullName }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'default',
                familyName: 'default',
            },
            computed: {
                fullName: {
                    get: function() {
                        // 最終的にこの部分が算出されて描画される
                        return this.firstName + ' - ' + this.familyName
                    },
                    set: function(newValue) {
                        let names = newValue.split(',')
                        // split関数 = 指定した記号で文字列を分割する
                        // ここではnewValue「hoge,fuga」を「,」で分割して「hoge」（names[0]）「fuga」（names[1]）に分かれる
                        this.firstName = names[0]
                        this.familyName = names[1]
                    }
                },
            }
        });
        // ここで書き換えるとset関数の処理がされ、get関数でreturnされる
        app.fullName = 'hoge,fuga'
    </script>
</body>
</html>

トランジション雛形

トランジション雛形
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <p><button @click="show=!show">切替</button></p>
        <transition>
            <div v-show="show">
                トランジション
            </div>
        </transition>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                show: true
            },
        })
    </script>
    <style>
        .v-enter-active,
        .v-leave-active {
            transition: opacity 1s;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }
    </style>
</body>
</html>

リストトランジション

リストトランジション
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <p><button @click="order=!order">切替</button></p>
        <transition-group class="list">
            <div v-for="item in sortedList" :key="item.id">
                {{ item.name }}: {{ item.price }}円
            </div>
        </transition-group>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                order: false,
                list: [
                    { id: 1, name: '商品A', price: '100' },
                    { id: 2, name: '商品B', price: '500' },
                    { id: 3, name: '商品C', price: '2500' },
                    { id: 4, name: '商品D', price: '5200' },
                    { id: 5, name: '商品E', price: '100' },
                    { id: 6, name: '商品F', price: '11500' },
                ]
            },
            computed: {
                sortedList: function() {
                    return _.orderBy(this.list, 'price', this.order ? 'desc' : 'asc')
                }
            }
        });
    </script>
    <style>
        .v-move {
            transition: transform 1s;
        }
    </style>
</body>
</html>

キーワード検索

キーワード検索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="keyword">
        <ul>
            <li v-for="user in filteredUsers" :key="user.id">
                {{ user.name }}: {{ user.email }}
            </li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                keyword: '',
                users: [
                    { id: 1, name: '太郎', email: 'taro@example.com' },
                    { id: 2, name: '花子', email: 'hanako@example.jp' },
                    { id: 3, name: '鈴木', email: 'suzuki@example.com' },
                    { id: 4, name: '佐藤', email: 'sato@example.ne.jp' },
                ]
            },
            computed: {
                filteredUsers: function() {
                    let users = [];
                    for(let i in this.users) {
                        let user = this.users[i];
                        // indexOfは値が見つからなければ-1を返す
                        if(user.name.indexOf(this.keyword) !== -1 ||
                            user.email.indexOf(this.keyword) !== -1) {
                            // -1ではない要素（値が見つかった要素）を配列に追加（push）する
                            users.push(user);
                        }
                    }
                    return users;
                }
            }
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            color: #696969;
            background: #eee;
        }
        .contents {
            margin: 50px;
        }
    </style>
</body>
</html>

スタッガリングリストトランジションを利用したキーワード検索

ふわっとした表示のUIになる
※tableだと「transition-group」はエラーで使えません。

スタッガリングリストトランジションを利用した検索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><!-- 追加 -->
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <div class="contents">
            <input type="text" v-model="query">
            <transition-group
                class="list-item"
                name="staggered-fade"
                tag="table"
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:leave="leave"
            >
                <div
                    class="user"
                    v-for="(item, index) in computedList"
                    v-bind:key="item.id"
                    v-bind:data-index="index"
                >
                    {{ item.userName }}
                    {{ item.email }}
                </div>
            </transition-group>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                query: '',
                list: [
                    { id: '1', userName: '太郎', email: 'taro@example.com' },
                    { id: '2', userName: '花子', email: 'hanako@sample.com' },
                    { id: '3', userName: 'John', email: 'john@example.ne.jp' },
                    { id: '4', userName: 'Mike', email: 'mike@example.jp' },
                ]
            },
            computed: {
                computedList: function() {
                    let vm = this
                    return this.list.filter(function(item){
                        return item.userName.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 || 
                               item.email.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
                    })
                }
            },
            methods: {
                beforeEnter: function(el) {
                    el.style.opacity = 0
                    el.style.height = 0
                },
                enter: function(el, done) {
                    let delay = el.dataset.index * 150
                    setTimeout(function() {
                        Velocity(
                            el,
                            { opacity: 1, height: '1.6em' },
                            { complete: done }
                        )
                    }, delay)
                },
                leave: function(el, done) {
                    let delay = el.dataset.index * 150
                    setTimeout(function() {
                        Velocity(
                            el,
                            { opacity: 0, height: 0 },
                            { complete: done }
                        )
                    }, delay)
                }
            }
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            color: #696969;
            background: #eee;
        }
        .contents {
            margin: 50px;
        }
    </style>
</body>
</html>

phpの多重連想配列からVueへの受け渡し

phpの多重連想配列からVueへの受け渡し
<?php
    $data = array(
        array(
            'Shop' => array( 'id' => '1', 'name' => 'A' ),
        ),
        array(
            'Shop' => array( 'id' => '2', 'name' => 'B' ),
        ),
    );
    $list_json = json_encode($data, JSON_UNESCAPED_UNICODE);
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <div v-for='items in list'>
            {{ items.Shop.id }}: {{ items.Shop.name }}
        </div>
    </div>
    <script>
        let list = JSON.parse('<?php echo $list_json; ?>');
        console.log(list);
        const app = new Vue({
            el: '#app',
            data: {
            list: list
          }
        });
    </script>
</body>
</html>

Vue CLI × Firebase フォーム送信

<!-- components/Form.vue -->
<!-- ①router/index.js => ルーティング設定　② $ npm install bootstrap-vue  ③main.js => Bootstrapをインポート -->
<!--
④Firebase上で設定　「request.auth != null」 => 認証あり　「request.auth == null」 => 認証なし
    service cloud.firestore {
        match /databases/{database}/documents {
            match /{document=**} {
                allow read, write: if request.auth != null || request.auth == null;
            }
        }
    }
-->

<!-- 参考サイト 住んでるシェアハウスの掲示板をVue.jsとFirebaseで作ってみた
https://qiita.com/jiroshin/items/e6e3c06a3e41515114ee
※必要部分のみ抜粋 -->

<template>
  <div class="container">

    <transition name="post-alert">
      <b-alert v-show="post_message" variant="success" show>内容が投稿されました</b-alert>
    </transition>
    <transition name="post-validataion">
      <b-alert v-show="post_validation" variant="danger" show>内容を入力して下さい</b-alert>
    </transition>

    <b-card-text>
        <div id="spinner" v-show="spinner">
            <b-spinner variant="success" label="Spinning"></b-spinner>
        </div>
        <b-form>
            <div v-show="card_form_cont">
                <b-form-input v-model="form_data.name" placeholder="name" required></b-form-input>
                <b-form-select v-model="form_data.cont_type" :options="cont_types" required></b-form-select>
                <b-form-textarea v-model="form_data.cont" placeholder="content" required></b-form-textarea>
            </div>
            <b-button @click="submit_form" variant="outline-success">お問い合わせ</b-button>
        </b-form>
    </b-card-text>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  data() {
    return {
        form_data: {
            name: '',
            cont_type: 'example-1',
            cont: '',
        },
        cont_types: [
            { text: 'example-1', value: 'example-1' },
            { text: 'example-2', value: 'example-2' },
            { text: 'example-3', value: 'example-3' }
        ],
        id_last: '0',
        post_message: false,
        post_validation: false,
        spinner: false,
        card_form_cont: true,
    }
  },
  created: function() {
      firebase.firestore().collection('posts_table').get().then(function(querySnapshot) {
          querySnapshot.forEach(function(doc){
              if(Number(doc.data().id) > Number(this.id_last)) {
                  this.id_last = doc.data().id
              }
          }.bind(this))
      }.bind(this))
  },
  methods: {
    submit_form: function() {
        if (this.form_data.name == '' || this.form_data.cont == '') {
            this.post_validation = true
            setTimeout(function(){
                this.post_validation = false
            }.bind(this), 3000)
            return
        }

        this.id_last = String(Number(this.id_last) + 1)

        firebase.firestore().collection('posts_table').add({
            id: this.id_last,
            name: this.form_data.name.trim(),
            cont_type: this.form_data.cont_type.trim(),
            cont: this.form_data.cont.trim()
        })

        this.form_data.name = ''
        this.form_data.cont_type = 'example-1'
        this.form_data.cont = ''

        this.card_form_cont = false
        this.spinner = true
        setTimeout(function(){ this.card_form_cont = true }.bind(this), 700)
        setTimeout(function(){ this.spinner = false }.bind(this), 700)

        this.post_message = true
        setTimeout(function(){ this.post_message = false }.bind(this), 2000)
    }
  }
}
</script>

<style scoped>
    .post-alert-enter-active, .post-alert-leave-active {
        transition: opacity 2s, transform 1.5s;
    }
    .post-alert-enter {
        opacity: 0;
        transform: translateY(-50px);
    }
    .post-alert-leave-to {
        opacity: 0;
        transform: translateY(200px);
    }
    .post-validataion-enter-active, .post-validataion-leave-active {
        transition: opacity 1s, transform 1s;
    }
    .post-validataion-enter, .post-validataion-leave-to {
        opacity: 0;
        transform: translateY(-50px);
    }
</style>

Vue CLI × Firebase DB描画

※Vue CLI × Firebase フォーム送信の続き

<!-- components/Post.vue -->
<!-- router/index.js => ルーティング設定　-->

<!-- 参考サイト 住んでるシェアハウスの掲示板をVue.jsとFirebaseで作ってみた
https://qiita.com/jiroshin/items/e6e3c06a3e41515114ee
※必要部分のみ抜粋 -->

<template>
  <div class="container">
    <b-button @click="button_all" variant="outline-primary">全て</b-button>
    <b-button @click="button_example1" variant="outline-primary">example-1</b-button>
    <b-button @click="button_example2" variant="outline-primary">example-2</b-button>
    <b-button @click="button_example3" variant="outline-primary">example-3</b-button>

    <transition-group name="transition">
        <div v-for="post in posts" :key="post.id">
            <div v-if='post.cont_type=="example-1"' v-show="show_example1">
                {{ post.id }} - {{ post.name }}: {{ post.cont }} - {{ post.cont_type }}
            </div>
            <div v-if='post.cont_type=="example-2"' v-show="show_example2">
                {{ post.id }} - {{ post.name }}: {{ post.cont }} - {{ post.cont_type }}
            </div>
            <div v-if='post.cont_type=="example-3"' v-show="show_example3">
                {{ post.id }} - {{ post.name }}: {{ post.cont }} - {{ post.cont_type }}
            </div>
        </div>
    </transition-group>

  </div>
</template>
<script>
import firebase from 'firebase'

export default {
    data() {
        return {
            posts: [],
            show_example1: true,
            show_example2: true,
            show_example3: true,
        }
    },
    created: function() {
        firebase.firestore().collection('posts_table').where('id','>=','1')
        .onSnapshot(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                let id_ary = new Array()
                this.posts.forEach(function(post) {
                    id_ary.push(post.id)
                })
                if(id_ary.indexOf(doc.data().id) == -1) {
                    this.posts.push(doc.data())
                }
            }.bind(this))
        }.bind(this))
    },
    methods: {
        button_all: function() {
            this.show_example1 = true
            this.show_example2 = true
            this.show_example3 = true
        },
        button_example1: function() {
            this.show_example1 = true
            this.show_example2 = false
            this.show_example3 = false
        },
        button_example2: function() {
            this.show_example1 = false
            this.show_example2 = true
            this.show_example3 = false
        },
        button_example3: function() {
            this.show_example1 = false
            this.show_example2 = false
            this.show_example3 = true
        }
    }
}
</script>

<style scoped>
    .transition-enter-active, .transition-leave-active {
        transition: opacity 1s, transform 1s;
    }
    .transition-enter {
        opacity: 0;
        transform: translateX(-100px);
    }
    .transition-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
</style>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0