■ はじめに

　メジャーなJavaScript フレームワークの内のひとつである
Vue.js（ヴュージェイエス）について、触ってみる。

 ⇒ 触ってみた個人的な感想は、巷でいうみたいに、
　分かりやすくて使いやすいなー（学習コストが低い）っと思った

主な JavaScript フレームワーク

１）React
２）Vue.js
３）Angular.js

React ～入門編～
https://dk521123.hatenablog.com/entry/2020/04/29/000000

【１】情報源

１）公式サイト

https://jp.vuejs.org/

チュートリアル

公式サイトが充実している。

https://jp.vuejs.org/v2/guide/

２）動画

* 以下の動画が分かりやすかった

https://www.youtube.com/watch?v=cL3Al628mLE&list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW
https://dotinstall.com/lessons/basic_vuejs_v2

【２】開発環境

色々あるが簡単な方法として以下がある

１）CodeSandbox

Web 上で簡単に環境構築してくれる

https://codesandbox.io/

【３】サンプル

例１：Hello world

https://jp.vuejs.org/v2/guide/#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello world</title>
  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    <!-- #app に指定しVueを適用する -->
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello world!'
      }
    });
  </script>
</body>
</html>

出力結果

Hello world!

例２：カウンタ

<template>
  <div>
    <div>count: {{ count }}</div>
    <button v-on:click="countUp">Click me!</button>
  </div>
</template>

<script>
export default {
  name: "First Counter",
  data: () => ({
    count: 0,
  }),
  methods: {
    countUp() {
      this.count = this.count + 1;
    },
  },
};
</script>

参考文献

https://qiita.com/kskinaba/items/3e8887d45b11f9132012

プログラムの超個人的なメモ

Memo for Programming.

【Vue】Vue ～入門編～

■ はじめに

主な JavaScript フレームワーク

目次

【１】情報源

１）公式サイト

２）動画

【２】開発環境

１）CodeSandbox

【３】サンプル

例１：Hello world

例２：カウンタ

参考文献

関連記事