最近vue.jsを触るようになりました。2日前とかですw
laravelと相性良さそうなのでワクワクしています!
今回はほんとに最初の部分で、vue.jsの$emitについて僕の今の感覚で説明していきます。(全部は知らないよってこと😊)
vueは3つの連携
vueが普段どのように動いているかですが、今の所は.vue拡張子ファイルと.html拡張子ファイル、そしてapp.jsが連携しています。
vueファイル
このファイルの中身も3つの構造からなっています。
表示される際に使用されるテンプレート
条件を決めたり関数を呼び出したりするスクリプト
ここで用意したテンプレートに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ファイルのメソッド名を一致させる必要がある
こんな感じでしょう。。。まだまだ始まったばかりなのであやふやなところはありますが、アウトプット忘れずに取り組んでいきます。