Vue.jsの基礎を勉強しました
勉強記録
今月から写真共有アプリ作成のチュートリアルを行なっています！
このチュートリアルで初めてVue.jsを使ってみて、わからないことが多かったので、「Vue.js入門」のチュートリアルも行いました！
下記のサイトのチュートリアル1~7までを参考に勉強の記録をまとめました。
programming-kanamama.hatenablog.com
www.hypertextcandy.com
チュートリアル(1) el,data
CDN
Content Delivery Network 、コンテンツ配信ネットワークのこと
様々な地域に分散されたサーバの集まり
同じ内容のデータのコピーを持っていて、各ユーザーに最も近いサーバーからデータへの要求に応えることができる。
※このチュートリアルでは、CDNにホストされたソースを利用
Vueオブジェクトのインスタンスをnewで生成
インスタンスが生成されるとVueアプリケーションが起動する
Vueオブジェクトを作成するために、コンストラクタの引数に設定オブジェクトを渡す。
var app = new Vue({ el: '#app', data: { message: 'kanamama!' } })
el
Vueアプリケーションの範囲、Vueの管轄領域を表す
例えば、el : ‘#app’, となっていたら、div id =“app”となっているタグ内部がVueアプリケーションとして認識される
data
Vueアプリケーション内で利用できるデータ（変数）を表している
Vueアプリケーション内＝elで指定した範囲内
（HTML側）
{{ message }}
二重の波カッコでデータの名前を指定することで、dataで定義した変数をつかえる
※上のコードで言えば、htmlで{{message}}とした部分にkanamama!と表示される
{{message}}をdiv id =“app”の範囲外にしたらどうなるか？
kanamama! ではなく、{{message}}と表示される
dataで定義した変数は、Vueアプリケーション内（elで指定した範囲）しか使えない
チュートリアル(2) テンプレート
Vue.jsではv-***というカスタム属性を用いて、テンプレート機能を表現する
条件分岐
v-if / v-else-if /v-else
tureでv-ifで書かれた要素がDOMに現れ、falseで要素がDOMから削除
<注意>条件式の中でも文字列を表現するときは’male’のように囲わないと、JavaScriptとして認識されてしまう。
v-if="user.gender === 'male’” 引用符の中に引用符の形になる
v-show
tureでv-showに書かれた要素が表示、falseで要素がCSSにより非表示に
繰り返し
v-for = "配列の一要素 in 配列データ"
繰り返される要素はv-forが記載された要素
HTMLの属性にデータを埋め込む
:src="~"のように、属性名の頭にコロンを付与すると、引用符の内部がJavaScriptとして評価される。
チュートリアル(3) クラスとスタイル
HTMLクラス
:class="{ 'text-error': message.error }"属性名の先頭にコロンをつける
text-errorがクラス名、message.errorはオブジェクトの値。
真偽値として評価され、真ならキーのクラス名がタグに追加、偽ならキーのクラス名がタグから削除
style属性
:style
スタイル属性も値としてJavaScriptオブジェクトをとる
v-cloak
Vueインスタンスの生成が完了するとVue自身によって削除される特徴がある
チュートリアル(4) フォーム入力
チュートリアル(5) イベントとmethods
イベントの登録
v-on
v-on:イベント名＝"********"でイベント登録ができる
値の部分はJavaScriptの式もしくはメソッド名
v-onは＠で書き換えることができる
v-on:click=~は @click=~でok
@属性の値にかいていいメソッド名は
Vueインスタンス作成時にコンストラクタに渡す設定オブジェクトのmethodsプロパティに定義された関数でなければならない
設定オブジェクト内ではthisを通してアクセスできる
thisが指し示すのはVueインスタンス
タブ
@click
フォーム
@submit
Ajaxでフォーム送信する場合、メインロジックの前にpreventDefaultメソッドを実行する
→@submit.preventと書くと、勝手にpreventDefault()してくれる
ファイルプレビュー
@change
v-modelではファイルそのものは取得できないので、changeイベントでeventオブジェクトを受け取ってそこからファイルを取得
eventオブジェクトのほかにも引数を渡したい場合は、eventオブジェクトも明示的に指定してやる
