vue.jsとは のバックアップ(No.6)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- vue.jsとは へ行く。
- 1 (2019-06-19 (水) 13:39:35)
- 2 (2019-06-19 (水) 13:43:46)
- 3 (2019-06-20 (木) 16:56:30)
- 4 (2019-06-21 (金) 11:54:40)
- 5 (2019-06-21 (金) 15:57:17)
- 6 (2019-06-21 (金) 17:58:48)
- 7 (2019-06-21 (金) 22:44:10)
- 8 (2019-06-22 (土) 11:36:31)
- 9 (2019-06-22 (土) 19:42:07)
- 10 (2019-06-24 (月) 17:24:38)
- 11 (2019-06-25 (火) 12:56:15)
- 12 (2019-06-26 (水) 16:13:02)
- 13 (2019-06-27 (木) 16:42:27)
- 14 (2019-06-27 (木) 17:42:16)
- 15 (2019-06-28 (金) 10:38:04)
目次 †
vue.jsとは †
ざっくりいうと、JavaScript? のデータと HTML の要素を紐付けて、
データが変われば勝手に表示に反映してくれます。
毎回データと表示を同期させる処理を自分で書かなくてもよくなり、
インタラクティブなページや状態管理が活躍するページを作りやすくなります。
本家 †
https://jp.vuejs.org/index.html
日本語の情報が豊富、Vueの日本語サイトでは、
ていねいに、まとめられている感じる。書籍よりも、親切なぐらい、ていねいだ。
スタイルガイド †
https://jp.vuejs.org/v2/style-guide/index.html
優先度 A,Bあたりは、必読
簡単なサンプル †
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: 'おひるねする' },
]
}
});
もうちょい頑張って、初歩的サンプルまとめてみた †
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>
<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>
<script src="index.js"></script>
</body>
</html>
index.js †
// -----------------------------------
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' });
/*
スニペット
// ●●用のデータを設定
var divId_setting = new Vue({
el: '#divId',
data: {
key: 'value!'
}
});
*/
typescriptを使うリンク集 †
Vue.js+TypeScript?で開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7
デバッグツール †
ブラウザ拡張がある
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
いくつか選択肢がでてくる
テンプレート †
https://sounansa.net/archives/2360
template構文 †
https://jp.vuejs.org/v2/guide/syntax.html
template書き方 †
https://qiita.com/seya/items/93a0055c8fdab62d584f
Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる †
https://qiita.com/shinobu_shiva/items/31aec81a52475483791b
レイアウト †
Vueの機能は使わず、基本的にCSSのみで解決することをまずかんがえましょう。 最初からVueのUIライブラリやCSSフレームワークのgridモジュールを探しに行かないほうが良いです。
Vueの機能を使わずに、レイアウト †
画面を分割する †
CSS grid layoutを使う
いくつかの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 †
見やすく分類されてる
awesome †
https://github.com/vuejs/awesome-vue
vue.jsのサンプル †
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
モーダル †
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
A Standard Library for APIs †
https://docs.stdlib.com/#/introduction
vueのクックブック †
