はじめに
今回は、エンジニアになって約半年の私がjavascriptのフレームワークであるVue.jsを使って開発を行ったので、そのVue.jsの基本的な記述について備忘録としてまとめます。
データバインディング
テキストのバインディング
- データのバインディグのもっとも基本的な形 マスタッシュ {{ }}を利用したもの
- 以下のような使い方ができます。
App.vue
<template lang="pug">
#app
span {{ msg }} //hello
</template>
<script>
export default {
data(){
return{
msg:"hello"
}
}
</script>
App.vue
<template lang="pug">
.app
span {{inc}} //numに +1された数字がバインディングされる
</template>
<script>
export default {
data(){
return{
num:10
}
},
computed:{
inc(){
return this.num + 1
}
}
};
</script>
属性のバインディング
- {{ }}マスタッシュはHTML属性の内部では使えない
- 代わりに v-bindディレクティブを使用する
App.vue
<template lang="pug">
#app
span(v-bind:class="dynamicClass") {{ msg }}
</template>
<script>
export default {
data(){
return{
msg:"hello",
dynamicClass:"hoge"
}
}
</script>
<style>
.hoge{
display:inline-block;
}
.fuga{
display:none;
}
</style>
dynamicClassの値をhoge⇨fugaに変更すると、spanのクラスが変更され、非表示になります。
親子間のデータの受け渡し
- Vue.jsでの親子間のデータの受け渡しは、『props down, events up』
- 親はプロパティを経由してデータを子に伝える
- 子はイベントを経由して親にメッセージを送る
という認識でいます。
以下のように子コンポーネントでpropsオプションを指定します。
CustomInput.vue
<template>
...
input(type="text" :placeholder="customPlaceholder" @input="updateValue")
...
</template>
<script>
export default = {
props:{
customPlaceholder:{
type:String,
default:""
}
},
methods: {
updateValue (e) {
this.$emit('input', e.target.value)
this.$emit('change', e.target.value)
}
}
}
</script>
CustomInput.vue
this.$emit('input', e.target.value)
この部分で子コンポーネントからinputに入力されたvalueを親に渡しています。
親コンポーネントでは、子に渡すデータを指定、inputEmailの値が子のコンポーネントに渡されます。
Form.vue
<template>
custom-input(:customPlaceholder="inputEmail")
</template>
<script>
import CustomInput from "./components/CustomInput"
export default = {
components:{
CustomInput
},
data(){
return{
inputEmail: "メールアドレスを入力してください"
}
}
}
</script>
だいぶ掻い摘んで書いてみましたが、書き方どうだっけ？的なときのために。