vue.jsとは
の編集
Top
/ vue.jsとは
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
10の質問
ABC予想
AI
AI API
AI プロンプト
AIでつかわれているtransformerのまとめ
AIの話題
ANTLR
ANTLR v3 FAQ よくある質問
ANTLR 独学
ANTLR4 独学
ANTLRでOracleのDDLを解析してみる
ANTLRチュートリアル
AOP
API
ARMマイコン基盤
ATOM SHELL理論
Access VBAメモ
Access-Control-Allow-Origin
AndroidとTensorflow
Android開発
Android開発 入門
AngularJS
Anko
Apache Bench
ArchUnitを学ぶ
Axiosとは
Axis2
BI Publisherで始めるデータ駆動型レポート作成
BPMNの勉強
BackTrack4
Blog from iPhone
Bootstrapとは
BracketName
C3 AI Applications
C3 AI エクスマキナ
CSS備忘録
CentOS
ChatGPTの話題
Chevrotainのパーサメソッド
Chevrotain一覧
Chromeエクステンション
Cocoa Touch Static Library
CoffeeScript
Confluent Control Centerやってみる
C言語でオブジェクト志向な記述方法
DDD ドメイン駆動設計
DDL生成ツール
DJUnit
DMM.comのAPIとか
DOSコマンドメモ
Dashcode
DeepFloyd IF
Dockerが動かない場合の対処
ES2015
Eclipse Monkey
Eclipse Plugin
Eclipseの色設定
Eclipse使いがXCode使い初めて知りたいこと
ElasticMQメモ
Elixir
Emmet
Erlangメモ
ExcelファイルをAIに読ませる
Exceptionを見やすく
Expression Tree
FLEX
FLEX リフレクション
Fisheye
FlashやJavascriptを使った演出
FormattingRules
FrontPage
GAE
GAE Data Store API
GENERAL SQL PARSER JAVA を試してみる
GLOBAL
GPT4ALL
GQL
GUIからMacPortsを管理するアプリケーション - Porticus
Generative Adversarial Networks
Gin JavaScriptで構文解析
Git Blame
GitHubアクションを使ったトロイの木馬のまとめ
GitLab
GitLabRunnerを増やす
GitLabでPlantUML使ってみる
GitLabでプロジェクト管理する
GitLabの機能をそのまま使って認証システム作ったらどこまでできる?
GitLabサーバインストールとメンテ注意事項
GitとAntとSpringとJUnit
Google Cloud Platform
Googleの裏技
Google認定プロジェクトマネージャの勉強メモ
Grails
GraphQL
HTM 階層型時間メモリ
HTML スクレイピング
HTML パース
HTML5
HTML5 Canvas
Hadoop
Help
If Then Maybe プログラミング
Inkscape script
InterWiki
InterWikiName
InterWikiSandBox
JAVAの記事一覧
JBoss
JDBC テーブル一覧を得る
JDBC カラム一覧を得る
JDT eclipse
JGRIB
JHIPSTER JDL
JHIPSTER OpenAPI
JHIPSTER エンティティをフィルタリングする
JHIPSTER6.1.2
JHIPSTERでスマホサイト
JHIPSTERのBLUEPRINTを作る
JHIPSTER一覧
JHipster
JHipster API FirstDepelop
JHipster エンティティを更新する
JHipster7をつかってみる
JHipsterでBuleprintを使いこなす
JHipsterのコード生成を改造
JHipsterのプロジェクトをGitLabでCI/CDする
JHipsterのプロジェクトをデプロイする
JMeter
JOOQとは
JSFとStruts
JSqlParser
Java Closure
Java Compiler API
Java Function
Java SQL Parserを調査する
Java Spring AOP
Java Spriteを設計してみる
Java オブジェクトのダンプ
Java ドラックできる曲線
Java 備忘録
Java 文字化け
Java11以降のJRE
Java7サンプルコード
JavaFx
JavaScriptでパーサを作る Chevrotain
Javaasist 動的にクラスを編集
Javascript グラフィックライブラリ
Javascript コーディングパターン
Javascript界隈
Javassist
JavaでSVG
Javaで関数型で引数をとる
JavaのジェネリクスTip
Javaのラムダ式
Javaの有名なライブラリ紹介
Javaは、IDEのテンプレートを使いこなせばいいよ
Javaプログラマ向けモナド
Javaメモリリーク
Jenkins
Jenkins(Hudson)メモ
Jestとは
Jhipsterマイグレーション
Json Yaml Xml Hash Scala
Kafka REST Proxy さわってみる
Kotolin
LDAPサーバをdockerで立ち上げる
Linux メモ
LiquiBaseとは
Lombok
MDBをコンパクトにするVBA
MQL5 小作品
MT4
MT5 EA
MYSQL
MacTool
Macにしゃべらせる
Mac用のメモ
Mattermostを使ってオンプレミスでチャット環境を作る
Maven
Mementoパターン
MenuBar
NILScript
NetBeanでプロファイル
Network Service Desk Engineer
Node-RED
Node-Red
NumPy
OQL オブジェクト問い合わせ言語
OSコマンドインジェクション
ObjctiveC サウンド
ObjectMapperの備忘録
ObjectiveC NSString
ObjectiveC サーバ
ObjectiveC ターミナル用コマンドを作る
ObjectiveC バックグラウンド
ObjectiveC ワーニング
Oculusアプリの開発
OpenFeint
OpenOffice
OpenResty
Outlook VBA
PHP
POSTGRESQL
Pandas Python Data Analysis Library
PdfBox Java用PDFライブラリ
Plagger
PukiWiki
PukiWiki/1.4
PukiWiki/1.4/Manual
PukiWiki/1.4/Manual/Plugin
PukiWiki/1.4/Manual/Plugin/A-D
PukiWiki/1.4/Manual/Plugin/E-G
PukiWiki/1.4/Manual/Plugin/H-K
PukiWiki/1.4/Manual/Plugin/L-N
PukiWiki/1.4/Manual/Plugin/O-R
PukiWiki/1.4/Manual/Plugin/S-U
PukiWiki/1.4/Manual/Plugin/V-Z
PyHipster
QuartzCore
RAD
REST
RWKV
Rails3
Railsと差分開発についての考察
React.js
React.js モーダル画面
RecentDeleted
RedmineLE
Redshift
Relumeでサイトの骨格を作る
Require.js
Rubycocoa
RubyでScalaをコンパイルするツールをつくる
Rubyアソシエーション認定証
Ruby入門
SCALA REPL
SCALA support tool
SCALAの記事一覧
SELinux
SEO
SEO Yahoo対策
SEO対策一覧
SPAM対策
SQLite
SSH
SVNをJavaで操作
SakuraZencoding
SandBox
Scala / Hadoop
Scala Process exec
Scala 遅延評価
Scala/LiftでSlim3
ScalaSigParser
ScalaWithExcel
Scala チュートリアル
Scalaで3D
ScalaでLisp
ScalaとGroovyのPOJO比較
ScalaのIDEについて
Scala言語を学ぶやさしいツール「Kojo」
Slack API やってみる
SocketAppender
Spring
Spring bootでのテストのTIPS
SpringBootのSTSの新規プロジェクトでるエラーの対応
SpringSecurity SAML
Sqlite
Squirrel
StringTemplate
Stringクラス拡張
TALEND
ThreadLocal
Todo一覧
Trac Lightning
Twitter
UltraEdit
Unityでシューティングゲーム作る際のメモ
VBAのコード
VBAをOpenOffice.org Basicにする
VBAをOpenOffice.org+Basicにする
VPN構築の勉強メモ
VPSやIaaSメモ
VSCodeでRuby開発
VSCodeメモ
VSCode用ChatGptのPlugin
VSCode設定
VirtualBox On Mac
Visual Studio Code プラグイン開発
Vuexとは
WBS管理の弊害
WIN32API
WSDL
Watson
WebDesign探訪
WebLogic フィルタ
WikiEngines
WikiName
WikiWikiWeb
Windows10のPowerShell でキーボードの言語切り替え
WindowsTool
Worker Thread パターン
XBee
XDOCLET
XForms
XPath
XSL
YahooPIPES
Yahooインフォセンター
Yet Another Pragger
YouTuber
YukiWiki
anacondaをcygwinで使う
ansible
antlr snippet
antlr 再入門
antlrと日本語
autoit
automator
bluemix
bootstrap2
bower
ccze Colorize log files on CentOS and Ubuntu using ccze tool
centos7
cglibを使って動的コード生成
cocos2d
cygwin
diff
dockerのローカルイメージをDocker-in-Dockerで参照する
eclipse設定
emacs 備忘録
emacs 文字列置換
emacsをviライクにする
excel tips
expectで自動化
figmaにプラグインをインストールする
ftp自動化
gemini
generator-jhipster-gql
git diffを使った構成管理の省力化
goをやってみる
grizzly
gulp
homebrew
iPhone Bluetoothプログラミング
iPhone iAd
iPhone 実機テスト手続き
iPhoneでグラフィックのHellowWorld
iPhoneとGmailメール
iPhoneに実機転送
iPhoneプログラミング
iPhoneプログラミング/ビューを理解すればiPhoneアプリの基礎を押さえられる
iPhoneプログラミング一覧
iPhoneプログラミング入門
iPhone開発/Interface Builder Plug-in
iPhone開発/キャプチャの取り方
intra-mart
jQuery.Flickableのメモ
java spring boot 認証 memo
jersey
jhipster-codeにアノテーション追加してみる
jhipsterのテンプレート改造準備
jparsecドキュメント日本語訳
jparsec入門
kafkaの勉強
log4j2の脆弱性
mac diff
mailcowのインストール
memcached
minecraft マイクラ あるきながら、高速ダンジョン作成
mqttの勉強
nginx_lua
nginxのメモ
node_moduleをnpm linkを使って自分用にする
npm
openapi generator
openapi-generatorをコンパイル
openstack
oraclerac
play framework 1.2.5 sample
play! framework
play!framework selenium
playframework テンプレート
postmanとopenapi
prezi プレゼン
pukiwikiで行動管理
pukiwikiに類似したツール
pukiwiki勉強
pukiwiki記事一覧
python
python3のwindowsでの日本語文字化け対応
pythonでseleniumを使う
pythonのテストに使うライブラリ
rails5
reactでポップアップ表示
redmine
ruby on rails 6.0.0
scala
scala 99problem 32~
scala prototype.zip
scala repl
scala sbaz
scala spring
scala/インストール
scalaでまだ不勉強なところ
scalaのインストール
selenium
slack api
spark
spring boot
spring initializerをつかってプロジェクトのひな型をゲットする
spring-test
springboot
springboot env
storybook
sublimetext2
swagger
tracについて
ubuntu
vaadin
vue を typescriptで開発
vue 共通部品作成
vue.js memo
vue.jsとは
vue.jsのデバッグ
vue一覧
webの編集画面のよくあるパターン
windows環境構築
wordpress
xamppについて
•Axis2の本家のスタートガイドによるWebサービスの作り方
【Javascript】【CLIライブラリ】commanderの勉強
【MQL5】KuniRangeBreakoutEA
いまさらながらC++
びっくりする短いコード
アクター
アニメーション
アノテーション
アプリコット
アプリコット PukiWiki
アプリコード
アプリコード林邦行
イラストのエフェクト
インテンショナルプログラミング
カスタマイズjhipster7.9.3イメージ
カブロボ
ガイガーカウンター
クラスとハッシュマップの関係
クラック対策
クロス集計
コマンドラインという概念への考察
コミニュケーション
コード生成
サロゲートキーを使ったテーブル設計
シェルのサンプル
シェルサンプル
スクレイピング
スレッドプログラミングメモ
ソースtoソース変形
ターミナルをAppleScriptで制御
テキストエディタ作成javascriptフレームワーク
テスト用まっさらDBをdockerでたてる
テスト駆動
テレワーク環境の比較
ドット絵
バイオビルダー合成生物学メモ
バグの少ない設計のためのValueObject
パフォーマンスチューニング
フロントエンドのテストの結合テストを減らすには?
プッシュ技術
プログラマーじゃない人に覚えてほしいプログラムのコメントの書き方
プロジェクト管理スプレッドシート
マイクラ 有名ディメンション モッド
マクスウェル方程式
メタ
ラムダ計算について考える
リベリカJava13いいみたい
リモートワークでのプロジェクト注意点
レイアウトツール
ログ解析
世界の構文解析グラマーたち
予定表
予定表/2009-12-14
予定表/2009-12-18
予定表/2009-12-19
予定表/2009-12-22
予定表/2009-12-23
予定表/2009-12-24
事業の心構え
事業計画方針
人工知能とCUDA
人工知能コンペKaggle
仕様書のフォーマットについての考察
他言語サイトサンプル作成
仮説Oracleの罠
作曲と効果音作り
共和分
口コミ
古いRails5を入れる
哲学
大文字小文字変換
学習をHackする
扶養とシステム
投薬のみのガンの治療薬
擬似コーディングのすすめ
放射能対策
数式を扱う
文章を書く
新エネルギー
新年の抱負2010
新技術 プログラム編
日本のゼネコン式IT開発が失敗する理由
最近更新したページ
未来技術/新技術
枯れた技術の水平思考
株価データ
業界の動向
構文解析の記事一覧
正規表現
気象データ
流れるようなインタフェース
管理画面の生成におけるopenapiとJDLなどの考察
細胞の若返り
経済のことをまとめてみる
脆弱性
自分でPlaggerみたいなのを作るためのメモ
論語/学而第一
負荷テスト
販売/デスクトップPC
販売/ノートパソコン
販売/外部ストレージ
起業
酸化グラフェン
開発哲学
電子出版
電子出版の記事一覧
非可換幾何学
顧客分析のデシル分析とRFM分析
DIコンテナについて考える
MP3から携帯着うたを作る方法
[[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: 'おひるねする' }, ] } }); 注意点は、{{変数}}は、テキストにしか、使えない代入方法で、ほかに、属性、スタイル属性のやり方が、あるので、注意が必要。自分は、これで、スタイル属性を変更できると思って、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 *** 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
spamではない場合はチェックをいれてください。
タイムスタンプを変更しない
[[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: 'おひるねする' }, ] } }); 注意点は、{{変数}}は、テキストにしか、使えない代入方法で、ほかに、属性、スタイル属性のやり方が、あるので、注意が必要。自分は、これで、スタイル属性を変更できると思って、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 *** 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
テキスト整形のルールを表示する