■Vue.js
Vue.js
https://jp.vuejs.org/index.html
以下は最近の記事でまとまっているように思う
Vue.js と Nuxt.js をざっと試したら目を通す
レガシーおじさん、SPAを始めてみた。そして限界を知る
https://zenn.dev/koduki/articles/0fe6cc5ada58e5600f75
2分でわかるVueとReactの比較
https://zenn.dev/tomon9086/articles/5f4014d8004dc5b5f63e
■簡易な開発
■Vue.jsをCDNで利用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Vue.js</h1>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'ハロー！'
}
});
</script>
</body>
</html>
■開発ツールスタンドアロン版
>npm install -g @vue/devtools
>vue-devtools
以下のようなGUI画面が表示される
Waiting for connection...
Add: <script src="http://localhost:8098"></script>
Or: <script src="http://192.168.56.1:8098"></script>
to the top of the page you want to debug.
作成したファイル内 <script src="https://unpkg.com/vue"></script> の直前に以下を追加する
<script src="http://localhost:8098"></script>
その後GUI画面を確認すると、開発ツールが表示されている
GUI画面を閉じると、開発ツールが終了される
■Vue CLI をインストール
>npm install -g @vue/cli
>npm install -g @vue/cli-service-global
■プロトタイプを実行
簡易な表示確認ができる
app.vue を作成し、以下を記述する
<template>
<div id="app">
<h1>Hello!</h1>
<p>This is message.</p>
</div>
</template>
app.vue のある場所へ移動し、以下を実行
>vue serve
DONE Compiled successfully in 174ms
App running at:
- Local:
http://localhost:8080/
- Network:
http://192.168.1.110:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
上記のように表示され、表示されている
http://localhost:8080/ にアクセスするとページが表示される
ファイルの内容を変更すると、表示される結果にもすぐに反映される
「Ctrl+C」で終了できる
■プロジェクトを作成して開発
■プロジェクトを作成
>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project
>vue create hello_app
実行すると質問が表示されるが、いったんすべてデフォルトのままでいい
最後に「プリセットとして保存するか？（Save this as a preset）」と確認されるが、今回は「N」で保存せずに終了する
hello_app フォルダが作成され、その中にファイルが作成される
プロジェクトの操作はこのフォルダ内で行うため、フォルダ内に移動しておく
>cd hello_app
以下でプロジェクトを実行する
>npm run serve
DONE Compiled successfully in 4231ms
App running at:
- Local:
http://localhost:8080/
- Network:
http://192.168.1.110:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
上記のように表示され、表示されている
http://localhost:8080/ にアクセスするとページが表示される
src/App.vue の内容を変更すると、表示される結果にもすぐに反映される
■プロジェクトをビルド
以下でプロジェクトをビルドできる
>npm run build
dist 内にファイルが書き出さる
これらをWebサーバの公開フォルダ直下に配置すると画面が表示される
■GUIツールでプロジェクトを管理する
プロジェクト一覧の場所に移動し、コマンドを実行する
>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project
>vue ui
実行すると、自動的にブラウザで
http://localhost:8000/project/select が開かれる
この画面からプロジェクトの一覧を表示したり、プロジェクトを作成したりできる
「設定 → Vue CLI → 公開パス」を空欄にすると、公開フォルダ直下以外に配置しても画面が表示されるようになる
「タスク → serve → タスクの実行」を実行し、動画面の「出力」をクリックするとアクセス方法が表示される
「タスク → build → タスクの実行」を実行すると、dist フォルダ内にビルド結果が出力される
コマンドプロンプトから「Ctrl+C」で終了できる
■Vue.jsの基本
basis.html
input.html
render.html
vhtml.html
vbind.html
vif.html
template.html
vfor.html
■プロジェクトを編集
先に作成した hello_app をもとに作業
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<template>
<div id="app">
<HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
<div class="hello">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
title: String,
message: String
}
}
</script>
<style>
div p {
color: #FF4500;
}
</style>
>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app
>npm run serve
ブラウザには以下が表示される
HelloWorld
Welcome to Your Vue.js App
■便利な機能
■スロットを使う
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App!">
<p>This is sample compoment.</p>
</HelloWorld>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
<div class="hello">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<div><slot /></div>
</div>
</template>
<slot /> の部分に「This is sample compoment.」が表示される
■名前付きスロットを使う
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App!">
<p>This is sample compoment.</p>
<p slot="a">Message A.</p>
<p slot="b">Message B.</p>
</HelloWorld>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
<div class="hello">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<div><slot /></div>
<div><slot name="a" /></div>
<div><slot name="b" /></div>
</div>
</template>
<slot name="a" /> の部分に「Message A.」が表示される
<slot name="b" /> の部分に「Message B.」が表示される
■アニメーション
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<template>
<div id="app">
<HelloWorld title="HelloWorld"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
<div class="hello">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<button v-on:click="doAction">
{{ btn }}
</button>
<transition name="transit">
<p v-if="flg" class="trans">トランジション</p>
</transition>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
title: String,
},
data: function() {
return {
message: 'Transition Sample!',
flg: true,
btn: '表示/非表示',
};
},
methods: {
doAction: function() {
this.flg = !this.flg;
}
}
}
</script>
<style>
/* 共通 */
.trans {
width: 150px;
background-color: #FFDDDD;
padding: 10px;
color: #FF4500;
}
.transit-enter-active {
transition: 1.0s;
}
.transit-leave-active {
transition: 1.0s;
}
/* フェードイン・フェードアウト */
/*
.transit-enter-active {
transition: opacity 1.0s;
}
.transit-leave-active {
transition: opacity 1.0s;
}
.transit-enter {
opacity: 0;
}
.transit-enter-to {
opacity: 1.0;
}
.transit-leave {
opacity: 1.0;
}
.transit-leave-to {
opacity: 0;
}
*/
/* 平行移動 */
/*
.transit-enter, .transit-leave-to {
transform: translateX(200px) translateY(-200px);
opacity: 0.1;
}
*/
/* 拡大縮小 */
/*
.transit-enter, .transit-leave-to {
transform: scale(5.0);
opacity: 0.1;
}
*/
/* 回転 */
/*
.transit-enter, .transit-leave-to {
transform: rotateZ(360deg);
opacity: 0.1;
}
*/
</style>
■計算アプリを作成
>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project
>vue create calc_app
>cd calc_app
>npm run serve
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\calc_app\src\App.vue
<template>
<div id="app">
<Calc v-bind:title="message" v-on:result-event="endCalculate"/>
<hr>
<div><table v-html="log"></table></div>
</div>
</template>
<script>
import Calc from './components/Calc.vue'
export default {
name: 'app',
components: {
Calc
},
data: function() {
return {
message: 'Calculation',
result: []
};
},
created: function() { // インスタンスが生成されたとき
var log = localStorage.getItem('log');
if (log != null) {
this.result = JSON.parse(log);
}
},
computed: { // 値が変わったとき
log: function() {
var table = '<tr><th>式</th><th>値</th></tr>';
for (var i in this.result) {
table += '<tr><td>' + this.result[i][0] + '</td><td>' + this.result[i][1] + '</td></tr>';
}
return table;
}
},
methods: { // メソッド
endCalculate: function(exp, res) {
this.result.unshift([exp, res]);
var log = JSON.stringify(this.result);
localStorage.getItem('log', log);
}
}
}
</script>
<style>
table th, table td {
border: 1px solid #000;
}
</style>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\calc_app\src\components\Calc.vue
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>
<input size="30" value="" v-model="formula">
<button v-on:click="calculate">計算する</button>
</p>
</div>
</template>
<script>
export default {
name: 'Calc',
props: {
title: String,
},
data: function() {
return {
message: '式を入力してください:',
formula: '',
};
},
methods: { // メソッド
calculate: function() {
var expression = 'function f() { return ' + this.formula + '; } f();';
var answer = eval(expression);
this.message = '計算結果: ' + answer;
this.$emit('result-event', this.formula, answer);
}
}
}
</script>
■2018年1月ごろに調べた内容
Vue.js 2.x 入門 - Qiita
https://qiita.com/sekiyaeiji/items/f1df5d9d4c8a147eed77
第1回 プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
http://gihyo.jp/dev/serial/01/vuejs/0001
第3回 Vue.jsでコンポーネント開発：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
http://gihyo.jp/dev/serial/01/vuejs/0003
■メモ
以下で練習中
http://refirio.org/page/memo/vuejs
引き続き、以下を進める
http://gihyo.jp/dev/serial/01/vuejs/0004
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
https://qiita.com/icoxfog417/items/49f7301be502bc2ad897
jQuery から Vue.js への移行 - Qiita
https://qiita.com/chibinowa/items/e7b2596d06b8005e8e6f
Vue.jsとjQueryで行うAjax処理 - Qiita
https://qiita.com/tachinbo/items/ed7414e48733164f5d3f