refirio.org

Memo

メモ > 技術 > フレームワーク: Vue.js
Vue.js
簡易な開発
プロジェクトを作成して開発
便利な機能
2018年1月ごろに調べた内容
戻る
■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
Memo

Advertisement
