最近vue.jsを触るようになりました。2日前とかですw
laravelと相性良さそうなのでワクワクしています！
今回はほんとに最初の部分で、vue.jsの$emitについて僕の今の感覚で説明していきます。(全部は知らないよってこと😊)
vueは3つの連携
vueが普段どのように動いているかですが、今の所は.vue拡張子ファイルと.html拡張子ファイル、そしてapp.jsが連携しています。
vueファイル
このファイルの中身も３つの構造からなっています。
表示される際に使用されるテンプレート
条件を決めたり関数を呼び出したりするスクリプト
ここで用意したテンプレートにcssを当てているスタイル
それぞれのファイルのつながりを見ていきましょう
<template>
<div>
<p>
<button @click="start">lets start</button>ここのstartがメソッドを呼び出す時の名前になる必要がある
</p>
<div v-if="answer > 0">
<input type="number" v-model.number="num" @keyup.enter="guess">
</div>
</div>
</template>
<script>
export default {
// data プロパティの値がオブジェクトではなく、オブジェクトを返す関数になっている
data () {
return {
answer: 0,
num: 0,
tryCount: 10
}
},
methods: {
// テンプレートに記載されているアクション名と同じになる
start() {
this.answer = Math.floor(Math.random() * (100 - 1) + 1)
this.num = 0
this.tryCount = 10
this.$emit('start', this.tryCount)
},
guess() {
// ここに飛んできた時点で引き算始まる
this.tryCount -= 1
if(this.answer === this.num){
// 正解した場合の処理
this.$emit('collect', tryCount)
}
if(this.tryCount === 0){
// 負けた時の処理、loseメソッドの呼び出し
this.$emit('lose', tryCount)
} else if (this.answer < this.num){
// 予想した数字が正解より小さい場合の処理
this.$emit('lower', this.tryCount)
} else {
// 予想した数字が正解より大きい場合の処理
this.$emit('higher', this.tryCount)
}
}
}
}
</script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue Component Tutorial</title>
</head>
<body>
<div id="app">app.jsファイルにel: '#app'って書いてあるからこの中に記述したら動く
<number-guess
@start="start1" @startはvueファイルのメソッドの名前と一致させる。start1はapp.jsファイルのメソッド名と一致させる必要がある。
@collect="collect1"
@lose="lose1"
></number-guess>
<p>{{ message }}</p>
<p>残り：{{ tryCount }}回</p>
</div>
<script src="/js/app.js"></script>
</body>
</html>
import Vue from 'vue'
import NumberGuess from './components/NumberGuess.vue'
コンポーネンツファイルの下にあるNumberGuess.vueを呼び出している
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app', コンポーネントが効く範囲を指定している
data: {
message: 'スタート', コンポーネントされた時のデフォルトの値が入っている
tryCount: 0
},
components: {
NumberGuess コンポーネントする時の名前
},
methods: {
start1(tryCount){ htmlファイルに用意されているstart1と名前が一致しているので処理が実行されます
this.message = 'スタート！'
this.tryCount = tryCount
},
collect1(tryCount){
this.message = '正解！'
this.tryCount = tryCount
},
lose1(tryCount){
this.message = '残念！'
this.tryCount = tryCount
}
}
});
何が言いたいか
.vue拡張子ファイルを用意する。
app.jsとかで作成した.vueファイルをimportしてくる
Vue.componentかもしくはnew Vueの中にconponentsを指定してhtmlファイルで使用できるようにする
Vue.component('htmlファイルで呼び出す時の名前', require('./components/ファイル名.vue').default);
components: {
NumberGuess htmlファイルではnumber-guessという形になります
}
vue拡張子に設定したメソッドはhtmlで@メソッド名として呼び出す
そのメソッドの処理を実行するにはhtmlとapp.jsファイルのメソッド名を一致させる必要がある
こんな感じでしょう。。。まだまだ始まったばかりなのであやふやなところはありますが、アウトプット忘れずに取り組んでいきます。
