はじめに

こんにちは。
JavaScriptのフレームワークVue.jsについてアウトプットしていきます！

Vue.jsとは

Vue.jsは、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。開発で必要な機能がセットになったツールと思ってもらえればわかりやすいと思います。
様々な機能が用意されているため、操作を覚えると扱いやすく少ない記述で実装が可能です。

参照：https://coosy.co.jp/blog/vuejs-benefit/

フレームワークとは

フレームワークは全体の流れがもともと実装されている「型」のようなもので、その中で実装したい部分のコードを記述して開発していく。VueやReact、Angularなどがある。

Vue.jsを使用するメリット

JavaScriptのライブラリにjQueryというものがありますが、Vue.jsとの違いとして、

Vue.jsの方が、簡潔にコードを記述できる
SPA（シングルページアプリケーション）開発ができる
シンプルに設計されているため、拡張性が高い

などが挙げられます。

Vue.jsのコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})

Vue.jsの基本的な構文になります。
bodyタグ内で、HTMLでVueとJSファイルを読み込みと、divタグにIDappを指定。
{{ message }}に'Hello World'が置換されて出力される。

最後に

ここまでVue.jsについてまとめました。
これからVueについての理解を深めるためにアウトプットしていきます！
誤った認識があればご指定いただけると嬉しいです^ ^

【Vue.js】Vue.jsについて

はじめに

Vue.jsとは

フレームワークとは

Vue.jsを使用するメリット

Vue.jsのコード

最後に