BETA

UdemyのVue JS講座を受講した際のメモ その3

投稿日:2020-04-28
最終更新:2020-04-28

講座名

超Vue JS 2 完全パック - もう他の教材は買わなくてOK!

Vue CLIについて

インストール

npm install -g @vue/cli  

確認

vue --version  

プロジェクト作成

vue create myapp  

vue createで生成されるファイルについて

babel.config.js

  • Babelで使う設定ファイル。
  • BabelはES6からES5に変換するために使う。

src/ ディレクトリ

  • .vueファイルやらcssやらを入れておくディレクトリ
  • ここにあるファイルなどをwebpackでひとまとめにする。

public/ ディレクトリ

  • 静的ファイルを置くディレクトリ
  • 通常はあまり使わない。

コンポーネントについて

  • Vueインスタンスは、elプロパティor$mount()で指定したセレクタに最初に一致した要素にしか適用されない。
  • classやタグ自体を指定して、1つのVueインスタンスを複数のタグに対応付けることはできない。
  • コンポーネントで指定するdataは、オブジェクトを返す関数にする必要がある。
  • コンポーネントには2種類の定義方法があり、1つはどのVueインスタンスからも参照可能なグローバルコンポーネント、もう1つは特定のVueインスタンスのみから参照可能なローカルコンポーネントである。
  • 基本的にはローカルコンポーネントを使う
  • .vueファイルをimportすると、コンポーネント定義の際に指定する形式のオブジェクトが得られる。
  • コンポーネントは、/components配下に配置していくのが一般的。

シングルファイルコンポーネントのtemplateタグ内には1つの親要素のみを書く

<!-- OK -->  
<!-- 1つの親要素(div)に子要素(p, button)がくっついている -->  
<template>  
  <div>  
    <p>Hello</p>  
    <button>Button</button>  
  </div>  
</template>  

<!-- NG -->  
<!-- 2つの親要素(p, button)が含まれている。-->  
<template>  
  <p>Hello</p>  
  <button>Button</button>  
</template>  

グルーバルコンポーネントの定義

main.jsでVue.componentを使って定義する

import Vue from 'vue'  
import App from './App.vue'  
import LikeNumber from './LikeNumber.vue'  

Vue.config.productionTip = false  

Vue.component('LikeNumber', LikeNumber)  

new Vue({  
  render: h => h(App),  
}).$mount('#app')  

ローカルコンポーネントの定義

.vueファイルのscriptタグ内でcomponentsプロパティで割り当てる。

<template>  
  <div>  
    <LikeHeader></LikeHeader>  
    <LikeNumber></LikeNumber>  
  </div>  
</template>  

<script>  
import LikeHeader from './LikeHeader.vue';  

export default {  
  components: {  
    LikeHeader  
  }  
}  
</script>  

コンポーネントの命名規則について

  • 単語をハイフンで区切るケバブケース(like-number)か、各単語の頭の文字を大文字にしてつなげるパスカルケース(LikeNumber)を使う。
  • コンポーネントの名前をパスカルケースで定義すると、タグを指定する際にケバブケースでも使えるようになる。
  • どちらを使っても良いが、統一する
  • 講師の方のおすすめは、パスカルケース
    • Javascriptでもよく使う
    • htmlのデフォルトタグとの見分けがしやすい。(htmlタグではケバブケースが用いられる)
  • ただし、DOMテンプレート内で使う場合は、ケバブケースしか使えない
    • DOMテンプレートは、vue-cliで作ったプロジェクトで言うpublic/index.html
    • ブラウザは、大文字小文字の区別をしないため、パスカルケースを認識できない
    • vue-cliを使っているならあまり気にしないでも問題ない
    • CodePenやJSFiddleなどのプレイグラウンドで検証するときは要注意。
  • 実はキャメルケース(likeNumber)も普通に使えるが、vueがコンポーネントを使う時はパスカルケースかケバブケースにしましょうと言っているので、キャメルケースはなし

styleタグについて

  • .vueファイル内においてstyleタグを指定してstyleを指定すると、グローバルな設定になってしまう
  • <style scoped>とすると、範囲を特定してスタイルを指定することが可能

コンポーネント間のデータの受け渡し

  • 親コンポーネントから子コンポーネントの受け渡しと、子コンポーネントから親コンポーネントの受け渡しはやり方が違う。

親コンポーネント → 子コンポーネント

親コンポーネントのdataで定義されている値を、子コンポーネントに渡すためには、
親コンポーネントでどの値をどんな名前で渡すかを設定し、
子コンポーネントで受け取る値の名前を設定する。

親コンポーネント

  • 子コンポーネントのタグに、属性({子コンポーネントに渡す際の名前}="{渡したい値}")を追加する。
  • {渡したい値}に動的な値を設定したい場合は、v-bindを用いる。
<template>  
  <div>  
    <LikeHeader></LikeHeader>  
    <h2>{{number}}</h2>  
    <LikeNumber number="10"></LikeNumber>  
    <LikeNumber :number="number"></LikeNumber>  
  </div>  
</template>  

<script>  
import LikeHeader from './components/LikeHeader.vue';  

export default {  
  data() {  
    return {  
      name: "Taro",  
      number: 10,  
    }  
  },  
  components: {  
    LikeHeader  
  }  
}  
</script>  

子コンポーネント

  • propsプロパティを追加する。
  • propsプロパティには、配列を指定する。
  • 配列の中身は文字列で、その文字列でdataを指定したときの同じように扱える。
  • 以下コードでは、dataでnumberを追加していないが、templateタグ内でnumberという変数を扱っている。
  • また、propsで指定する名前には、一般的にキャメルケース、ケバブケースのいずれかを用いる。
  • 講師の方の推奨としては、propsに指定する文字列はキャメルケース、親コンポーネントで指定する属性にはケバブケースを用いる。
  • propsで配列やオブジェクトを渡すと参照渡しになるので注意。
<template>  
  <div>  
    <p>いいね({{ number / 2 }})</p>  
    <button @click="increment">+1</button>  
  </div>  
</template>  

<script>  
  export default {  
    props: ["name", "number"],  
    methods: {  
        increment() {  
          this.number++;  
        }  
    }  
  }  
</script>  
  • propsには、オブジェクトを指定することができる
  • オブジェクトには、キーに変数名、バリューに型を指定することができ、指定した型以外の型の値が渡されたときのバリデーションを行うことができる。
  • また、バリューにはオブジェクトも指定することができ、型チェック以外の様々なバリデーションが行える。
  • よく使うキーとしては、required, defaultがある。
<template>  
  <div>  
    <p>いいね({{ halfNumber }})</p>  
    <button @click="increment">+1</button>  
  </div>  
</template>  

<script>  
  export default {  
    props: {  
      totalNumber: {  
        type: Number,  
        default: 100  // 親コンポーネントで指定がなかったときの初期値を指定する  
      }  
    },  
    methods: {  
        increment() {  
          this.totalNumber++;  
        }  
    },  
    computed: {  
      halfNumber() {  
        return this.totalNumber;  
      }  
    }  
  }  
</script>  

子コンポーネントから親コンポーネントにデータを渡す

  • $emitで行う。
  • 子コンポーネントからの送り口として、`$emit$を使う。
  • $emitは2つの引数をとる。$emit("{イベント名(なんでも良い)}", {送るデータ自身})
  • $emitは指定した名前のイベントを発火させるので、それを親コンポーネントでv-on:{イベント名}で受け取ることができる。
  • $emitは、子から親へデータを受け渡すためにあるわけではなく、子の好きなタイミングで親のイベントを発火するためのもの=$emitはカスタムイベントを作成するメソッド
  • 子は親のデータを変えることはできない。そのため、子からカスタムイベントを発行し、親に値を変えてもらう必要がある。
  • 子から親のデータを変えることができる場合、データフローが非常に複雑になってしまうため、Vueでは親から子のデータは簡単に変えることができるが、子から親はあえて難しくしている。
  • カスタムイベント名はケバブケース推奨。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@popy1017の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう