- 追加された行はこの色です。
- 削除された行はこの色です。
[[vue一覧]]
* 目次 [#e9b868b6]
#contents
* vue.jsとは [#s100c20d]
ざっくりいうと、JavaScript のデータと HTML の要素を紐付けて、
データが変われば勝手に表示に反映してくれます。
毎回データと表示を同期させる処理を自分で書かなくてもよくなり、
インタラクティブなページや状態管理が活躍するページを作りやすくなります。。。
というが、そうかな？
書き方に、OKパターン、NGパターンがあって、結構書き方が、決まっている印象がある。特に、コンポーネント間の通信が、書き方が、決まっている。
* vue-cli のインストール [#h2341bfd]
ちょっと前までは、
npm install -g vue-cli
だったが、
npm install -g @vue/cli
になったっぽい。
windwsで使うには、いろいろ注意点がある。
たぶん、いろいろな不具合（パスの問題とか）から察するに、Macユーザが開発しているのでは？
で、vue コマンドが、not found といわれたら、C:\Users\user\AppData\Roaming\npm にvue.cmd がインストールされているので、ここに、環境変数のPATHを通してあげよう
あと、たぶん、git for windowsのgit bashだと、インタラクティブな、コマンドがでてくると、対応できない。例えば、メニューがでてきて、選ぶとか、が、cmdで、vueコマンドを実行しないと反応しない。
部品が、作れる程度に、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
いくつか選択肢がでてくる
** VSCodeの設定 [#f8bd23e6]
vue cliで、ほいほいと、プロジェクトをつくっていくと、コードフォーマッターがはいるので、エディターで、保存時に、自動整形する設定が事実上、必要
http://ry-2718.hatenablog.com/entry/2018/10/17/194909
** vi のハイライト設定 [#g4615f3f]
https://github.com/posva/vim-vue
git clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vue
** 本家 [#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: 'おひるねする' },
]
}
});
注意点は、{{変数}}は、テキストにしか、使えない代入方法で、ほかに、属性、スタイル属性のやり方が、あるので、注意が必要。自分は、これで、スタイル属性を変更できると思って、２時間ぐらい、格闘してしまっていた。まずは、入門書をみたほうが、ちかみちかもしれない。
*** 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
*** CSSプロパティとinput: rangeを紐付ける知見 [#v5d78d63]
https://jsbin.com/navofelesa/edit?html,output
* レイアウト [#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で、ページを追加するサンプル [#h6395aa0]
https://qiita.com/567000/items/d6a7c694a370dc92e774
** 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 ベースのフレームワーク [#l2ccb457]
https://superdevresources.com/vuejs-mobile-frameworks/
*** Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ [#tc5fd89e]
https://techblog.kayac.com/2018/12/12/080000
** 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
* vue で SVG [#ye01dec5]
** グリグリ動くUIをVueとSVGでサクッと書く [#p12761bc]
http://hashrock.hatenablog.com/entry/2017/12/04/215559
*** hashrock/svg-sandbox.html [#i375099e]
https://gist.github.com/hashrock/6f082d09f8a9073dae1caa07dbd26b6f
* Meteor [#qbe7397f]
** MeteorはTwitter連携ログインを作るのがめちゃ楽 [#x5d00bf5]
https://qiita.com/hashrock/items/575e0be0a362e6c78dd1
** VIU [#h34fae92]
VIU = Meteor + vue マテリアルデザイン
https://github.com/DevsignStudio/viu
* jhipsterで、scaffold [#qb93fb84]
https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/
https://www.npmjs.com/package/generator-jhipster-vuejs
