* 目次 [#e9b868b6] #contents * vue.jsとは [#s100c20d] ざっくりいうと、JavaScript のデータと HTML の要素を紐付けて、 データが変われば勝手に表示に反映してくれます。 毎回データと表示を同期させる処理を自分で書かなくてもよくなり、 インタラクティブなページや状態管理が活躍するページを作りやすくなります。。。 というが、そうかな? 書き方に、OKパターン、NGパターンがあって、結構書き方が、決まっている印象がある。特に、コンポーネント間の通信が、書き方が、決まっている。 * vue-cli のインスト npm install -g vue-cliール [#h2341bfd] 部品が、作れる程度に、vueを勉強してから、cliを使いましょう。そうしないと、わけわかんなくなっちゃうよ。 nodeのインストールが済んでいることを確認 $ node -v v10.16.0 windows の場合、アップデートは、公式のインストーラを再度実行すると、安全にやってくれるそうです。 https://nodejs.org/ja/download/ 次のコマンドでインストール npm install -g vue-cli 確認 $ vue --version 2.9.6 プロジェクトの作成 vue init <template> <project-name> よくサンプルで、出てくるのは、以下の通り、 vue init webpack vue-template いくつか選択肢がでてくる ** 本家 [#m61e4cb8] https://jp.vuejs.org/index.html 日本語の情報が豊富、Vueの日本語サイトでは、 ていねいに、まとめられている感じる。書籍よりも、親切なぐらい、ていねいだ。 *** スタイルガイド [#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: 'おひるねする' }, ] } }); 注意点は、{{変数}}は、テキストにしか、使えない代入方法で、ほかに、属性、スタイル属性のやり方が、あるので、注意が必要。自分は、これで、スタイル属性を変更できると思って、2時間ぐらい、格闘してしまっていた。まずは、入門書をみたほうが、ちかみちかもしれない。 *** Vue オプションのスケルトン [#v2d570a4] new Vue の内容は、オプションと呼称するそうです。 で、よく見るサンプルには、全部のってないから、メモしてみる var app = new Vue({ el: '#app', // <---- mountする要素 data: { message: 'Vue.js' // <--- データ }, computed: { // <--- functionで定義する系のデータ hoge_function: function() { return xxx; } }, methods: { // <--- 自前の何らかの処理 myMethod: function(){ } }, // ライフサイクル フック シリーズ beforeCreate: function() { // <---- インスタンス作成 リアクティブ初期化前 }, created: function() { // <---- インスタンス作成 リアクティブ初期化後 }, beforeMount: function() { // <---- インスタンスがマウントされる前 }, mounted: function() { // <---- インスタンスがマウントされた後 }, beforeUpdate: function() { // <---- データが変更され、DOMに適用される前 }, updated: function() { // <---- データが変更され、DOMに適用された後 }, beforeDestoroy: function { // <---- Vueインスタンスが破棄される前 }, destroyed: function { // <---- Vueインスタンスが破棄された後 }, errorCaptured: function { //任意の子孫のコンポーネントから、エラーが、補足されたとき } } ** もうちょい頑張って、初歩的サンプルまとめてみた [#ic263af2] *** index.html [#lae801f1] <html> <head> <link rel="stylesheet" href="css/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <H3>01:HelloWorld</H3> <div id="div01"> {{ message }} </div> <H3> くり返しの例 </H3> <div id="div02"> ユーザ名 : {{ name }} <ol> <li v-for="item in items" :key="item.id" > {{ item.id + ":" + item.name }} </li> </ol> </div> <H3> ボタンの例 </H3> <div id="div03"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <H3> 入力ボックスを使ったv-model双方向バインディングの例 </H3> <div id="div04"> <p>{{ message }}</p> <input v-model="message"/> </div> <H3> コンポーネントの例01 </H3> <div id="div05"> <ol> <component-01 v-for="item in items" v-bind:value01="item" v-bind:key="item.id" ></component-01> </ol> </div> <H3> コンポーネントの例 02 </H3> <div id="div06"> <button-counter></button-counter> </div> <H3> コンポーネント間の通信、親から子へ(props) </H3> <div id="div07"> <a07-component/> </div> <H3> 子から親へ($emitとカスタムイベント)</H3> <div id="div08"> <a08-component/> </div> <script src="index.js"></script> </body> </html> *** index.js [#oe3191b8] // ----------------------------------- var mock_list = { name: 'ぷーさん', items: [ { id:1, name: 'はちみつなめる' }, { id:2, name: 'さんぽする' }, { id:3, name: 'おひるねする' }, ] }; // ----------------------------------- var div01_setting = new Vue({ el: '#div01', data: { message: 'Hello World! : ' + new Date().toLocaleString() } }); // ----------------------------------- var div02_setting = new Vue({ el: '#div02', data: mock_list }); // ----------------------------------- var div03_setting = new Vue({ el: '#div03', data: { message: 'ABC' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }); // ----------------------------------- var div04_setting = new Vue({ el: '#div04', data: { message: 'Hello Vue! div04' } }); // ----------------------------------- Vue.component('component-01', { props: ['value01'], template: '<li>{{ value01.name }}</li>' }); var div05_setting = new Vue({ el: '#div05', data: mock_list }); // ----------------------------------- // button-counter と呼ばれる新しいコンポーネントを定義します Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">クリック回数 {{ count }} 回目.</button>' }); new Vue({ el: '#div06' }); // ----------------------------------- // コンポーネント間の通信、親から子へ(props) //Bコンポーネント let b07Component = { template: '<div>Bコンポーネント{{myMessage}}</div>', props: ['myMessage'] }; //Aコンポーネント let a07Component = { template: '<b07-component v-bind:my-message="message"/>', components: { 'b07-component': b07Component }, data: function () { return { message: 'こんにちわ' } } }; var div07_setting = new Vue({ el: '#div07', components: { 'a07-component': a07Component } }); //子から親へ($emitとカスタムイベント) //Bコンポーネント let b08Component = { //クリックするとbMethodが実行されカスタムイベントb-eventが発火する template: ` <div> <input type="text" v-model ="textData"/> <button @click="bMethod">親へ送る</button> </div>`, data: function () { return { textData: 'こんにちわ' } }, methods: { bMethod: function () { // this.$emit('b-event');//カスタムイベントの発火 this.$emit('b-event', { message: this.textData });//カスタムイベントの発火 } } } //Aコンポーネント let a08Component = { //カスタムイベントであるb-eventが発火されると、それをキャッチしてaMethodが実行される template: '<b08-component @b-event="aMethod"/>', components: { 'b08-component': b08Component }, methods: { aMethod: function (payload) { alert(payload.message); } } }; /* スニペット // ●●用のデータを設定 var divId_setting = new Vue({ el: '#divId', data: { key: 'value!' } }); */ * typescriptを使うリンク集 [#v41470ef] Vue.js+TypeScriptで開発するときの参考記事まとめ https://qiita.com/kai_kou/items/19b494a41023d84bacc7 * デバッグツール [#h1064aff] ブラウザ拡張がある https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd ** テンプレート [#kdfd68b6] https://sounansa.net/archives/2360 *** template構文 [#p96465c1] https://jp.vuejs.org/v2/guide/syntax.html *** template書き方 [#ubaec75e] https://qiita.com/seya/items/93a0055c8fdab62d584f *** Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる [#idb74afb] https://qiita.com/shinobu_shiva/items/31aec81a52475483791b * レイアウト [#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/ ** vue toolbox [#ad7803e2] 見やすく分類されてる https://www.vuetoolbox.com/ ** awesome [#ga021dc7] https://github.com/vuejs/awesome-vue ** Vue Curated [#na9835f2] https://curated.vuejs.org/ ** vue.jsのサンプル [#off54180] https://vuejsexamples.com/ *** CMSの例 [#ved68c79] https://vuejsexamples.com/a-vue-js-2-0-content-management-system/ *** ダイアグラムコンポーネント [#w39a4d47] https://vuejsexamples.com/diagram-component-for-vue-js/ ** D&Dコンポーネント [#p6a38080] Vue.Draggable https://github.com/SortableJS/Vue.Draggable ** モーダル [#b36438a0] 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 エディターを作ってみた [#h674e883] https://qiita.com/kkeisuke/items/45f4725d41dd789061a2 ** vue で CMS [#y8b8110f] https://jp.vuejs.org/v2/cookbook/serverless-blog.html 使ってみた感想が書いてあるサイト https://qiita.com/tiwu_official/items/8ab7bb47eba265db198d ** 個別にコンポーネントを調べるには [#qac5d587] google とかで、vue splitterとかで、検索すると、まとまってるサイトを いくつか見つけることができる *** vue-splitter [#l963ae9c] https://github.com/rmp135/vue-splitter * UI部品化には、Elementをつかうのでインストール [#h3f93c9e] npm install element-ui -S ** Element公式サイト [#af08d21d] http://element.eleme.io/ ** アプリケーションでの利用 [#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 }) ** データドリブンについての考察 [#gc39d75a] https://rangle.io/blog/how-to-create-data-driven-user-interfaces-in-vue/ *** 使用するvueの機能 [#x1703989] https://vuejs.org/v2/guide/components.html#Dynamic-Components *** A Standard Library for APIs [#k08d7b94] https://docs.stdlib.com/#/introduction *** vueのクックブック [#o84c6f4b] https://jp.vuejs.org/v2/cookbook/index.html