A study meeting for backend engineers About basic vue.js

1. Kou 2021/9/28

2. Vue.jsとは
Vue.jsは、ユーザーインターフェースを開発するための、Javascriptフレームワークです。
Vue.js人気の理由は学習コストは低い、開発効率化は可能、とにかく手軽なところです。
Github:
https://github.com/yyx990803
Twitter:
https://twitter.com/youyuxi

3. Vue.jsの特徴
Vue.jsはMVVM（Model View View-Model）と呼ばれるデザインパターンをとっています。

4. Vue.jsを使ってみましょう
● Vueの導入
方法１: CDN (ちょっとだけテストする場合)
Vue.jsはCDNで読み込むことが出来ます。CDNのスクリプトはbodyタグの閉じタグの
直前に下記を追加します。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

5. Vue.jsを使ってみましょう
● Vueの導入
方法2: npm (小規模の開発の場合)
npmでインストールをするときはシェル（macならターミナル、windowsならコマンド
ライン）で下記のコマンドでインストールします。
# 最新の安定版
$ npm install vue

6. Vue.jsを使ってみましょう
● Vueの導入
方法3: Vue CLI (やや大規模なシングルページアプリケーション開発の場合)
Vue.js では オフィシャル CLI を提供します。この CLI にはモダンなフロントエンドワ
ークフローのための、すぐに使えるビルド設定を用意しています。
npm install -g @vue/cli
# OR
yarn global add @vue/cli

7. Vue.jsを使ってみましょう
● Vueインスタンスの作成
全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成
することによって起動されます。
const app = new Vue ( {
// (1) mountする要素
el: '#demo',
...
})

8. Vue.jsを使ってみましょう
● Vueインスタンス・コンポーネントの作成
パーツ単位でHTMLをまとめるコンポーネント指向ですが、.vue拡張子の
単一ファイルコンポーネントによって、その「パーツを構成するために必
要な HTML・CSS・JSをひとまとめに」して独立した1つのファイルで扱
うことができます。
それぞれ<template>、<script>、<style>が担当します。

9. Vue.jsを使ってみましょう
● Vueのよく使うプロパティ
data: アプリケーションで使用するデータ
computed: 算出プロパティ
methods: アプリケーションで使用するメソッド

10. Vue.jsを使ってみましょう
● demoの目標
Demoテスト環境:
https://codepen.io/me-kou/pen/zYzypGV

11. Vue.jsを使ってみましょう
// (2) アプリケーションで使用するデータ
data: function () {
return {
num: 0,
message: 'Hey! これはVueから受けとたメッセージです！'
}
},
data: アプリケーションで使用するデータ

12. Vue.jsを使ってみましょう
computed: {
numAddHundred: function() {
return "+100の加工を行いましょう: " + (this.num + 100)
}
},
computed: 算出プロパティ

13. Vue.jsを使ってみましょう
<button @click="add">このボタンは{{num}}回押された</button>
// (4) アプリケーションで使用するメソッド
methods: {
add: function() {
this.num += 1
}
}
methods: アプリケーションで使用するメソッド