vue.jsとはのバックアップ(No.4)

<html>
    <head>
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="index01">
            ユーザ名 : {{ name }}
            <p>TODO</p>
            <li 
                v-for="item in items"
                :key="item.id"
            >
                {{ item.id + ":" + item.name }}
            </li>
        </div>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app = new Vue({
    el: '#index01',
    data: {
        name: 'ぷーさん',
        items: [
            { id:1, name: 'はちみつなめる' },
            { id:2, name: 'さんぽする' },
            { id:3, name: 'おひるねする' },
        ]
    }
});

↑

デバッグツール †

ブラウザ拡張がある

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

↑

vue-cli のインスト npm install -g vue-cliール †

nodeのインストールが済んでいることを確認

$ node -v
v10.16.0

次のコマンドでインストール

npm install -g vue-cli

確認

$ vue --version
2.9.6

プロジェクトの作成

vue init <template> <project-name>

よくサンプルで、出てくるのは、以下の通り、

vue init webpack vue-template

いくつか選択肢がでてくる

↑

レイアウト †

Vueの機能は使わず、基本的にCSSのみで解決することをまずかんがえましょう。最初からVueのUIライブラリやCSSフレームワークのgridモジュールを探しに行かないほうが良いです。

↑

Vueの機能を使わずに、レイアウト †

↑

画面を分割する †

CSS grid layoutを使う

https://ics.media/entry/15649

↑

いくつかのDIVを等幅で並べる †

flexboxを使う

https://qiita.com/takanorip/items/a51989312160530d89a1

↑

ボタン等をボックスの右端とかに固定する †

閉じるボタンとか

position: absoluteを使う

https://saruwakakun.com/html-css/basic/relative-absolute-fixed

↑

中央寄せする †

https://yoshiko-pg.github.io/slides/20151215-scripty/

↑

Vueの機能をつかってレイアウト †

nuxt.jsのlayoutsを使うのが、効率がよいらしい。

https://ja.nuxtjs.org/api/pages-layout/

↑

Vue CLIで作成したプロジェクトのレイアウトを変更 †

https://qiita.com/whoshino/items/22426bd18b5ac7e192b0

↑

UI †

↑

UIの実装例をたくさん載せてるサイト †

↑

onsen †

https://ja.onsen.io/v2/api/vue/v-ons-splitter.html

↑

vueitfy †

https://vuetifyjs.com/ja/components/expansion-panels

↑

vue material †

https://vuematerial.io/components/menu/

↑

vue toolbox †

見やすく分類されてる

https://www.vuetoolbox.com/

↑

awesome †

https://github.com/vuejs/awesome-vue

↑

vue.jsのサンプル †

https://vuejsexamples.com/

↑

CMSの例 †

https://vuejsexamples.com/a-vue-js-2-0-content-management-system/

↑

ダイアグラムコンポーネント †

https://vuejsexamples.com/diagram-component-for-vue-js/

↑

D&Dコンポーネント †

Vue.Draggable

https://github.com/SortableJS/Vue.Draggable

↑

モーダル †

https://helloworld-blog.tech/javascript/vue-js%e3%81%a7%e3%83%89%e3%83%a9%e3%83%83%e3%82%b0%e3%82%a2%e3%83%b3%e3%83%89%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%81%a7%e7%a7%bb%e5%8b%95%e5%8f%af%e8%83%bd%e3%81%aa%e3%83%a2%e3%83%bc%e3%83%80

↑

vue-cli (vuex) で PlantUML エディターを作ってみた †

https://qiita.com/kkeisuke/items/45f4725d41dd789061a2

↑

vue で　CMS †

https://jp.vuejs.org/v2/cookbook/serverless-blog.html

使ってみた感想が書いてあるサイト

https://qiita.com/tiwu_official/items/8ab7bb47eba265db198d

↑

個別にコンポーネントを調べるには †

google とかで、vue splitterとかで、検索すると、まとまってるサイトを

いくつか見つけることができる

↑

vue-splitter †

https://github.com/rmp135/vue-splitter

↑

UI部品化には、Elementをつかうのでインストール †

npm install element-ui -S

↑

アプリケーションでの利用 †

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, { locale })

↑

データドリブンについての考察 †

https://rangle.io/blog/how-to-create-data-driven-user-interfaces-in-vue/

↑

使用するvueの機能 †

https://vuejs.org/v2/guide/components.html#Dynamic-Components

vue.jsとは のバックアップ(No.4)

目次 †

vue.jsとは †

本家 †

スタイルガイド †

簡単なサンプル †