Vue.jsの始め方(html/css/js/jQueryがある程度わかる方向け)

フロントの技術力アップのためvue.jsの勉強をはじめました
これから始めたいと考えている方向け+備忘録として
ブログに書いていこうと思います

Vue.jsとは？

Evan you氏によって開発されたjavascriptフレームワーク（ライブラリ）です
PHPフレームワークLaravelに標準搭載されたことで近年人気が高まっています

主なjavascriptフレームワーク

Angular
　→googleを中心に開発されているフルスタックフレームワーク
React
　→Facebookが開発したフレームワークでビュー相当の機能を提供
Vue.js
　→ビューに特化したシンプルなフレームワーク

Vue.jsの特徴

Vue.jsはビュー（見た目）に特化したフレームワークで
導入が手軽で学習コストが低い点がおすすめです。

またアプリが複雑になってきたのでフレームワークを
後から導入したい場合も気軽に後乗せできる手軽さが強みです

コンポーネント（ページを構成するUI部品）を使用するため
コンポーネント指向について学ぶこともできます。

コミュニティの活動が活発で関連する情報やライブラリも豊富です。

Vue.jsを使うための準備

jsfiddleで実際に記述しながら読むことをおすすめします。

vue.jsを使うにはCDN（content delivery network）経由で
ライブラリをインストールするのが手軽です。
まずはHTML5を以下で準備しましょう。
本記事ではVue.js ver2.6.11を使用します。

まずは基本となるVueインスタンスを作成し
データをマスタッシュ構文でバインディングしてみましょう

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vue.js</title>
</head>
<body>
  <div id="app">  <!-- この範囲にVue.jsのコードを記載 -->

  </div><!-- この範囲にVue.jsのコードを記載 -->

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <script src="js/index.js"></script>
</body>
</html>

CDN部分はJSシートよりも前で読み込んでください。
本記事ではid="app"の中がvue.jｓが使える範囲です。
続いて下記のように追記をしてください

index.html

<div id="app">
  <p>{{ message }}</p>
</div>

{{　　　}}　部分をマスタッシュ構文と呼びます
つづいてindex.jsシートに以下を記述しましょう

index.js


let app = new Vue({
  el:"#app",　/* インスタンスのエレメントを指定 */
  data:{ /* バインディングするデータを記載 */
    message: '皆さんこんにちは！'
  }
});

こちらをchromeで実行すると結果は以下の通りになるはずです

皆さんこんにちは！

Vue.jsの核となるのが"Vueクラス"です。
起動はこのVueクラスをインスタンス化するだけです。
※変数appに格納していますが参照する用途がなければ省略可能です。

次回はデータバインディングについて記事にしていきます。
Vue.js　データバインディングの基礎