vue.jsとはのバックアップ差分(No.3)

追加された行はこの色です。
削除された行はこの色です。
* 目次 [#e9b868b6]
#contents

* vue.jsとは [#s100c20d]
ざっくりいうと、JavaScript のデータと HTML の要素を紐付けて、

データが変われば勝手に表示に反映してくれます。

毎回データと表示を同期させる処理を自分で書かなくてもよくなり、

インタラクティブなページや状態管理が活躍するページを作りやすくなります。


** 本家 [#m61e4cb8]
https://jp.vuejs.org/index.html

日本語の情報が豊富
*** スタイルガイド [#h535dfce]
https://jp.vuejs.org/v2/style-guide/index.html

優先度 A,Bあたりは、必読


** 簡単なサンプル [#cc8e072d]

index.html


 <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: 'おひるねする' },
         ]
     }
 });

* vue-cli のインスト npm install -g vue-cliール [#h2341bfd]

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

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

** テンプレート [#kdfd68b6]
https://sounansa.net/archives/2360

*** template構文 [#p96465c1]
https://jp.vuejs.org/v2/guide/syntax.html

*** template書き方 [#ubaec75e]

https://qiita.com/seya/items/93a0055c8fdab62d584f

* レイアウト [#rf2af3d9]

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

**Vueの機能を使わずに、レイアウト [#nea46f82]
*** 画面を分割する [#cd141dce]

CSS grid layoutを使う

https://ics.media/entry/15649

*** いくつかのDIVを等幅で並べる [#hfc0fda0]
flexboxを使う

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

*** ボタン等をボックスの右端とかに固定する [#wd6f27c6]

閉じるボタンとか

position: absoluteを使う

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

*** 中央寄せする [#m5dbb6f6]

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

** Vueの機能をつかってレイアウト [#h502c1a4]
nuxt.jsのlayoutsを使うのが、効率がよいらしい。

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

** Vue CLIで作成したプロジェクトのレイアウトを変更 [#z442a2de]
https://qiita.com/whoshino/items/22426bd18b5ac7e192b0


* UI [#m1341cc4]
** UIの実装例をたくさん載せてるサイト [#pef00cbb]

** onsen [#t3661891]

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


** vueitfy [#z22e7a6a]
https://vuetifyjs.com/ja/components/expansion-panels

** vue material [#zb6eb71a]
https://vuematerial.io/components/menu/

** 個別にコンポーネントを調べるには [#qac5d587]

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

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

*** vue-splitter [#l963ae9c]
https://github.com/rmp135/vue-splitter


* UI部品化には、Elementをつかうのでインストール [#h3f93c9e]
 npm install element-ui -S


** アプリケーションでの利用 [#g319a48b]
 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 })
vue.jsとは のバックアップ差分(No.3)

vue.jsとはのバックアップ差分(No.3)
