ざっくりいうと、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: 'おひるねする' }, ] } });
Vue.js+TypeScript?で開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7
ブラウザ拡張がある
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
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
https://jp.vuejs.org/v2/guide/syntax.html
https://qiita.com/seya/items/93a0055c8fdab62d584f
Vueの機能は使わず、基本的にCSSのみで解決することをまずかんがえましょう。 最初からVueのUIライブラリやCSSフレームワークのgridモジュールを探しに行かないほうが良いです。
CSS grid layoutを使う
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/
nuxt.jsのlayoutsを使うのが、効率がよいらしい。
https://ja.nuxtjs.org/api/pages-layout/
https://qiita.com/whoshino/items/22426bd18b5ac7e192b0
https://ja.onsen.io/v2/api/vue/v-ons-splitter.html
https://vuetifyjs.com/ja/components/expansion-panels
https://vuematerial.io/components/menu/
見やすく分類されてる
https://github.com/vuejs/awesome-vue
https://vuejsexamples.com/a-vue-js-2-0-content-management-system/
https://vuejsexamples.com/diagram-component-for-vue-js/
Vue.Draggable
https://github.com/SortableJS/Vue.Draggable
https://qiita.com/kkeisuke/items/45f4725d41dd789061a2
https://jp.vuejs.org/v2/cookbook/serverless-blog.html
使ってみた感想が書いてあるサイト
https://qiita.com/tiwu_official/items/8ab7bb47eba265db198d
google とかで、vue splitterとかで、検索すると、まとまってるサイトを
いくつか見つけることができる
https://github.com/rmp135/vue-splitter
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/
https://vuejs.org/v2/guide/components.html#Dynamic-Components
https://docs.stdlib.com/#/introduction