Vue 学習ノート

初心者がVue.jsを勉強して理解したことを更新していきます。
HTML,CSS,Javasciptの基本構文は一通り理解していて、過去にReact、Node.jsを勉強してアプリを作った経験があります。

vue-cli生成ファイル構造

├── node_modules 
├── public
│   ├── favicon.ico: Webのシンボルマーク
│   └── index.html: HTMLのエントリーポイント
├── src
│   ├── assets: 静的ファイルの保管フォルダ
│   │   └── logo.png
│   │── component: コンポーネントの保管フォルダ
│   │   └── HelloWorld.vue
│   │── App.vue: アプリケーションの親玉
│   │── main.js: Vue全体の初期化をしているJSファイル
├── .gitignore: gitで管理したくないファイルとフォルダーの設定ファイル
├── babel.config.js: babelの設定ファイル
├── package.json: プロジェクトのパッケージ管理
├── README.md: プロジェクトの説明文
├── package-lock.json：　パッケージのバージョン管理

vueのビルドの違いについて

公式サイト

1. vue.jsとvue.runtime.xxx.jsの違い：
   1. vue.jsは完全版のvue。templateを解析するためのコンパイラとランタイムの両方が含まれたビルド
   2. vue.runtime.xxx.jsはVueのコアな機能だけを残して、templateを解析するコンパイラーが入ってないVueのランタイムビルド
2. vue.runtime.xxx.jsはtemplateを解析する能力がないので、new Vue({ ... })の時はtemplateオプションが使えず、render関数に手伝ってもらう必要がある。 vue-cliで生成されたmain.jsの中でインポートしているVueは裏でランタイムビルドを参照しているので、new Vueの時はrender関数の中でcreateElement関数でtemplate内容/コンポーネントをレンダリングしている。vue-cliの中でcreateElementは略してhって名付けている

main.js

import Vue from "vue";　　//ランタイムビルドをインポートしている
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),

  // render: (h) => h(App)と同じ 
  // render(createElement) {
  //    return createElement(App);
  //  },

  // template: `<h1>Hello</h1>` これはエラー
}).$mount("#app");

ランタイムビルドは完全ビルドに比べおよそ30%軽量なため、利用できるときにはこれを利用したほうが良い

vue.config.js 設定ファイル

1. vue inspect > output.jsでvue-cliのデフォルト設定を確認できる
2. vue-cliのデフォルト設定をOverrideしたい場合はvue.config.jsファイルを作成してカスタマイズする　詳細はこちら

ref属性

1. HTMLタグ、もしくは子コンポーネントを後で取得できるように名前を登録するときに利用する。idの代替。
2. 使い方
   1. 登録：<h1 ref="xxx">.....</h1> または <School ref="xxx"></School>
   2. 取得：this.$refs.xxx
3. HTMLタグにrefをつけた場合、this.$refsで取得できるのはDOM要素。コンポーネントにrefをつけた場合に取得できるのはコンポーネントのインスタンス

props

1. コンポーネントが外部からデータをもらうためのもの
2. コンポーネントにデータを渡す場合：<School name="xxx" / >
3. コンポーネントがデータを受け取る場合：
   1. やり方１　（宣言して受け取る）：　props:['name']
   2. やり方２　（データ型を制限して受け取る）：　props:{name:String}
   3. やり方３　（データ型、必須、デフォルト値を指定して受け取る）：　

props:{
    name:{
    　　　　type:String, //型
    　　　　required:true, //値が必須
    　　　　default:'Sample' //デフォルト値
    }
}

1. propsで受け取ったデータはコンポーネントインスタントに関連付けられるので、thisで取得できる
2. propsで受け取ると宣言したものの、渡してもらえなかったデータはundefinedになる

propsは読み取り専用です。Vueは裏でpropsへの変更を監視していて、変更が見つかったら、ワーニングが出るようになっている。もしpropsのデータを修正する必要があれば、propsの中身をdata()にコピーしてからデータの修正を行う

<script>
export default {
  name: "App",
  data() {
    return {
      myAge: this.age,　　//propsのデータをmyAgeにコピー
    };
  },
  props: ["age"], //propでageを受け取る
};
</script>

mixin

1. コンポーネント間で共通利用できるdata(), methods:{}などを切り出して定義する機能。
2. mixin.jsの定義

mixin.js

export const mixin = {
  methods: {
    showName() {
      alert(this.name);
    },
  },
  mounted() {
    console.log("Hello");
  },
};

export const mixin2 = {
  data() {
    return {
      x: 100,
      y: 200,
    };
  },
};

1. mixinの利用
   1. グローバル利用：　Vue.mixin(xxx)
   2. ローカルで利用:

<template>
</template>

<script>
//mixinのインポート
import { mixin } from "../mixin";
export default {
  name: "Sample",
  data() {
    return {
    };
  },
　　　　//コンポーネント内で利用するmixinを定義
  mixins: [mixin],
};
</script>

plugin

1. Vueのグローバルレベルの機能追加に使う
2. pluginの本質はinstallメソッドを含めたJSオブジェクト。installメソッドは最初にVueを引数に取り,2個目以降の引き数optionsの利用は任意で、一般的にpluginを呼び出す方から受け取るデータを入れる。

plugin.js

const myPlugin = {
    install(Vue, options){
  
      // 1. グローバルフィルター
      Vue.filter(....)
    
      // 2. カスタムなdirective
      Vue.directive(....)
    
      // 3. グローバルミックスインを配置
      Vue.mixin({
        data() {
          return {
            x: 100,
            y: 200,
          };
        },
      });
   
      // 4. インスタンスメソッドを追加
      Vue.prototype.$myMethod = function () {...}
      Vue.prototype.$myProperty = xxxx
    }
}

export default myPlugin;

pluginの利用

main.js

import myPlugin from "./plugins";

Vue.use(myPlugin)

new Vue({
  // ... オプション
})

scoped スタイル

1. コンポーネントに適用するスタイルの範囲を現在のコンポーネントでのみ有効にして、他のコンポーネントとスタイルの衝突を防ぐ。
2. 書き方　<style scoped > </style>