楽をしてWEBページを作ろう STEP2 `WALK` (Vue Pug Sass TS Buefy)

前記事

前記事

WALK

Sample.vueを開こう

${project_dir}/components/sample/sample.vue

• <template lang='pug'>
  • HTMLに相当
  • pug記法
    • インデントでタグのネストを表現
  • Vue
    • @click でクリックイベントを指定
  • Buefy
    • .columns と .column により横並びを表現
    • b-**** タグ (b-input等)

.vue-sample
    .vue-functions
        h3 Vue 機能
        .chapter
            h4 画像の読み込み
            .has-text-centered
                img.vue-logo(v-bind:src='imgs["vue-logo"]')

        .chapter
            h4 データバインド
            .indent
                b-field(label='INPUT')
                    b-input(v-model='text')
                b-field(label='OUTPUT')
                    b-input(v-model='text' readonly)

        .chapter
            h4 算術プロパティ
            .indent
                .columns
                    .column.is-3: span 算術プロパティ:
                    .column: span {{ calcProperty }}

                .columns
                    .column.is-3: span メソッド:
                    .column: span {{ method() }}

    .buefy-components
        h3 Buefy コンポーネント
        .chapter
            h4 dialog / modal / toast / snackbar
            .columns.is-multiline
                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showAlert') Show alert
                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showModal') Show Modal

                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showToast') Show toast
                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showSnackbar') Show snackbar

• <script lang='ts'>
  • JavaScriptに相当
  • TypeScript
    • 型のあるJavaScript
  • vue-class-component
  • vue-property-decorator
  • ES6 class
    • Javaのようなクラス

import { Vue, Component } from 'vue-property-decorator';
import VueUtil from '@/scripts/util/VueUtil';
import SampleModal from '@/components/sample/SampleModal.vue';

/**
 * Vue Component
 */
@Component
export default class Sample extends Vue {
    /**
     * 画像読み込み
     */
    protected imgs = {
        'vue-logo': require('@/resources/img/vue-logo.png')
    } as Imgs;

    protected text = 'Hello Vue.';

    protected beforeCreate(): void {
        VueUtil.registerComponents([SampleModal]);
    }

    /**
     * 算術プロパティ例
     */
    protected get calcProperty(): string {
        return `${this.text} And hi there!`;
    }

    /**
     * メソッド例
     */
    protected method(): string {
        return `${this.text} And hi there!`;
    }

    /**
     * アラート
     */
    protected showAlert(): void {
        this.$dialog.alert('Show alert !!');
    }

    /**
     * モーダル
     */
    protected showModal(): void {
        this.$modal.open({component: SampleModal});
    }

    /**
     * トースト
     */
    protected showToast(): void {
        this.$toast.open('Show toast !!');
    }

    /**
     * スナックバー
     */
    protected showSnackbar(): void {
        this.$snackbar.open('Show snackbar !!');
    }
}

• <style lang='sass' scoped>
  • CSSに相当
  • scoped css
    • このVueにだけスタイルを反映する
  • SASS記法 (not SCSS)
    • インデントでネストを表現

@import 'variable'

.vue-sample
    background-color: $white

    h3
        font-size: 1.5em
        margin-bottom: 0.75rem

    h4
        font-size: 1.2em
        margin-bottom: 0.75rem

    .chapter
        position: relative
        margin-bottom: 2rem

    .vue-logo
        width: 80px
        height: auto

次記事

まだ