Vue.jsを学ぶ - No.1

Vue.jsの基礎を学ぶ過程でいつでも振り返られる様に、メモしていきます。

Vue.jsアプリケーションを作る

アプリケーション（アプリ）：コンポーネントを組み合わせたもの

コンポーネント：単体のオブジェクトのこと

新しくコンポーネントを作成するとき↓

var obj = new Vue({ オブジェクト });

Vue：フレームワーク側で定義されているクラス名

コンポーネントの中で使うデータやメソッドは引数として渡す。

引数：役割に応じたプロパティとしてオブジェクト表記する。

主なプロパティ

el: '＃app', //どのHTMLと結びつけるかを定義　（id名）

data：　{ 
  //保持するデータを定義
},　
methods：　{  　
　//メソッドを定義
},　
filters：　{  
　//フィルターを定義
},　
computed：　{ 　
　//算出プロパティを定義
},　
watch：　{ 　　 
　//ウォッチャを定義　？？
},　
// ライフサイクルハックを定義　

Vue.js公式HP↓

プロパティ — Vue.js

ライフサイクルハック

ライフサイクルハック：Vueが自動的にコンポーネントへ通知を送ってくれる仕組み

[ 発生するタイミング：ハック名 ]

インスタンス生成前：beforeCreate

インスタンス生成されVueの準備完了後：created

インスタンスがDOMと連結する前：beforeMount

インスタンスがDOMと連結した後：mounted

リアクティブデータが更新され、DOMに反映される前：beforeUpdate

リアクティブデータが更新され、DOMに反映された後：updated

インスタンスが破棄される直前：bedoreDestroy

インスタンスが破棄された直後：destroyed

例）サーバーからデータを読み込む時などは　dataオプションでは対応できないため、createdライフサイクルで初期化処理をするなどして活用される。

ディレクティブ

「v-」で始まる独自の属性を併用することで、様々な機能が使える。

例）

v-bind：コンポーネントのデータとHTML要素を同期させる。

HTML
<div ivad="app">
    <input type="text" v-bind:value="message">
</div>

JavaScript
var app = new Vue({
    el: '#app',
    data: {
        message: 'こんにちは'
    }
})

スコープ

データの活用には有効範囲がある。

関数の中でのみ有効：ローカルスコープ

関数の外側からも参照可能：グローバルスコープ

※グローバルスコープのリスク：他のライブラリと変数名が重なったりすると誤作動を引き起こし、エラーになってしまう。Vueのコンポーネントの独立性を活かすには、ローカルスコープを原則使う様にする。

レンダリング（ページを描画）

マスタッシュ（{ }：ヒゲ：髭）構文でHTML内に記述すると、dataオプションに定義したプロパティの値が出力される。

{{ プロパティ名 }}

※{{・・・}}には、JavaScriptの式も記述可能

属性にバインドする

属性にバインドする時は、属性名の前に「v-bind:」をつける

<要素名 v-bind:属性名 ="プロパティ名">

style属性にバインドする

stylesheetに指定する場合、style="CSSプロパティ名：値；"と記述するが、以下の様にvueでは記述可能。

<要素名 v-bind:style="{cssのプロパティ名:アプリのプロパティ名}">

活用例

HTML
<div id=#app>
    <p v-bind:style="{fontSize: pSize}">文字サイズは{{pSize}}です。</p>
</div>

JavaScript
var app = new Vue({
    el:'#app',
    data: {
        pSize: '40px'
    }
});

↓

文字サイズは40pxです。

キャメルケース

バインドする時の表記の仕方が、p-sizeではなく、pSize の様に、くっつけ、大文字を使って文字の境がわかる様に表記する方法。これを活用するのは、JavaScriptのオブジェクト表記だから。

class属性にバインドする

<要素名 v-bind:class="{class名:class名を出力する条件式}">

条件式が長い場合は、条件式をdataオプションに記述し、そのプロパティ名を記述するとシンプル。

続く…