vueはじめましたその１ - とあるWeb屋の備忘録

はじめてのvue

仕事でvueを使うことになったので遅ればせながらvueを勉強し始めました！
仕事で使うからにはしっかり覚えたい！ということで、ここでは勉強したことをアウトプットして脳みそに定着させることを目標にしています。
とはいえNode.jsのほうも勉強したいし更新もしていきたいので、当面はvueとnodeを4:6くらいで更新していけたらいいなーと思っております。
素人Web屋の解説なので同じ初心者の方に向けて説明できたらって感じです。

まずは環境構築

自分はnpm+gulp+browserifyで環境構築しました。
今はwebpackのほうが主流だと思いますがbrowserify使い慣れていたので。
Node.jsをインストールしていることが前提です。（Nodeをインストールするとnpmもインストールされます）

まずはpakage.jsonとgulpfile.jsを作ることから始めます。
npm initはnpmを初期化してpackage.jsonを作るコマンドです。
package.jsonはnpmでインストールしたパッケージをリスト化したものでjson形式で記述されています。

npm init
touch gulpfile.js

あとはvueを使えるgulpfile.jsを書いていけば環境構築は完了です。長いのでgithubに上げておきます。とりあえずvueを動かすことが目標のディレクトリ構成なのでだいぶ散らかってます。（実際のプロジェクトには使えないと思います笑） https://github.com/tomoyukionodera/vue_test

ちなみにこちらのgithubに上がっているソースを参考にさせていただきました！ありがとうございます！
FAST Browserify + Reactify + Babelify

vueをはじめる前に

vueを簡単にまとめると柔軟に設計できるjsフレームワーク。
再利用可能なコンポーネントごとに分けて記述できるので柔軟性が高い。
使い方にはざっくり以下の使い方がある。　

cdnを読ませて使う方法

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

npmでvueをインストールして使う方法（こっちでやります）

npm install vue

そして

コンポーネントを使わない方法（今回はこっちについて）コンポーネントを使う方法

※あと大規模な開発になるとvuexというVue.jsアプリケーションのためのフレームワークを使うことになると思います。
こちらは学習コストがvueより高いので自分もまだ勉強始めてません。始めたらこちらについても書こうと思います。

使い方

vueをはじめるときにまずやることは2つあります。
1 vueインスタンスを作成すること
2 データをマウントする箇所にidを振ること
です。

main.jsでvueインスタンスを作成します。

const Vue = require('vue')

const vue = new Vue({
  el: '#app',
  data: {
    text: "hello vue.js"
  }
})

index.htmlでマウントしたい要素にvueインスタンスに対応したidを振ります。

<body>
  <div id="app">{{text}}</div>
</body>

これでブラウザにはhello vue.jsと表示されます。

vueインスタンスの説明

vueインスタンスを作成するときはまずvueのモジュールをrequire()して用意します。
newしてvueインスタンスを作成します。vueインスタンスは基本的に以下のオプションを指定します。

el: マウントポイントを指定。既存のDOM要素にvueインスタンスを与える。 data: vueインスタンスのためのデータオブジェクト。関数を入れることもできる。

このほかにも代表的なオプションとして以下がある。
methods, computed, props, そしてライフサイクルである。

ライフサイクルとは

methods, computed, propsについては実際に使うときに説明しようと思うがライフサイクルはここで説明しておきます。
ライフサイクルは簡単にいうとインスタンスができる前～破壊された後までを8ステージに分割して、そのステージごとオプションとして指定できるよってことです。
ステージごとにフックが用意されているので好きな処理を割り込ませることができます。ステージは、beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed です。
順番に、インスタンスができる前、できた後、マウントされる前、された後、データが更新される前、された後、インスタンスが削除される前、された後です。
分かりやすい例としてはインスタンスを作成して初期値を持たせておきたいときです。
上のソースと結果は同じですが、以下の書き方でブラウザにテキストを表示させることもできます。

const Vue = require('vue')

const vue = new Vue({
  el: '#app',
  data: {
    text: ""
  },
  created: function(){
    this.text = "hello vue.js"
  }
})

マウントポイントを設定したHTMLの説明

マウントポイントになる箇所にidを振りますが、インスタンスのdataオブジェクトのtextにアクセスするためには{{}}を使います。
これはマスタッシュ構文というもので、vueをコンポーネント化しない場合、これを使うことが基本的な形になります。

<div id="app">{{text}}</div>

読んでいただいてありがとうございました！素人Web屋の解説なのでご指摘大歓迎！！
次回はディレクティブというvueで使用する特殊なHTML属性とmethodsについて書きたいと思います！