vue.js入門！現場で使用したエンジニアが解説するVueの基礎
Vue.jsを使用して1年以上経過したので、経験も踏まえながらVue.jsの超基礎を解説します。
Vueファイルの構造
Vueファイルは3つの言語が全て入っています。
- html
- JavaScript
- css
具体的には以下の通りです。
<template>
<div>
html記述
</div>
</template>
<script>
export default {
name: "XXX",
data() {
return {
xxx: yyy
}
}
}
</script>
<style lang="css">
</style>
各言語ごとに分離可能ですが、今回は省略します。
scriptとstyleは他の言語に変更可能です。
筆者は主にscriptはTypeScript、styleはscssかstylusを採用してます。
template
htmlを記述する箇所です。
基本的に普通のhtmlと同じ記法ですが、Vue独自の記述があります。
Vue独自の記述については別途記事を書く予定です。
script
JavaScript系を記述する箇所です。
今回はJavaScriptを例に解説します。
以下が基本の記述です。
export default {
data() {
return {
xxx: "yyy"
}
},
methods: {
hogeMethod(str) {
return str
},
hugaMethod() {
let test = this.xxx;
test = this.hogeMethod(test);
return test;
}
}
}
dataはVueファイル内で利用可能な変数を宣言、初期化することができます。
htmlに加工データを表示したい時などに頻繁に使用します。
※オブジェクト型でreturnしているので注意です。
methodsは一般的な関数です。
同ファイル内の変数、関数を呼び出す際はthis.を先頭に付けてください。
同関数内の変数はthis.は不要です。
以下の箇所が該当します。
hugaMethod() {
let test = this.xxx;
test = this.hogeMethod(test);
return test;
}
ライフサイクル
ライフサイクルは今回の記事で最も理解しにくい箇所です。
公式では以下のページで確認できます。
https://jp.vuejs.org/v2/guide/instance.#ライフサイクルダイアグラム (opens new window)
Vueファイルが読み込まれてから破棄されるまでのタイミングを8つで区切り
javascript内でタイミングごとに処理をコントロールできます。
タイミングは以下の通りです。
- beforeCreate インスタンス前
- created インスタンス後
- beforeMount マウント前
- mounted マウント後
- beforeUpdate 更新前
- updated 更新後
- beforeDestroy 破棄前
- destoryed 破棄後
対応して記述は以下の通り。
export default {
data() {},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
methods: {}
}
主に使用するのがcreatedとmountedです。
createdとmountedの違いは、DOM要素の読み込みです。
- createdはDOM要素が読み込めれる前
- mountedはDOM要素が読み込まえた後
となっています。
基本はcreatedで初期化などのscript処理を行い、mountedはhtmlに関連する処理を行いましょう。
style
css系を記述する箇所です。
普通のcssと同じ記法なので問題ないと思います。
.display-flex {
display: flex;
}
まとめ
今回はVue.jsの超基礎を紹介しました。
メイン所であるComponentとBindingについては別記事で解説します。