Zenn
📘

【Vue】学習開始４週目で覚える内容

2021/01/16に公開
JavaScript
Vue.js
tech

4週目で学ぶべきこと

  • フック関数
  • カスタムディレクティブ
  • フィルター
  • ミックスイン
  • Vue Router

フック関数

  • フック関数：プログラムの中に独自の処理を割りこませるために用意されている仕組み。
関数名 詳細
bind 初めて対象のhtmlタグに紐づいた時に、呼ばれる
inserted カスタムディレクティブと紐づいた要素が親Nodeに挿入された際に呼ばれる
update コンポーネント内でデータ更新が行われたタイミングで呼ばれる
子コンポーネント更新される前
componentUpdated コンポーネント内でデータ更新が行われたタイミングで呼ばれる
子コンポーネント更新された後
unbind htmlタグとの紐付けが解除された時点で呼ばれる

カスタムディレクティブ

  • 引数はel, binding, vnode, oldVnode。 ※基本はel, bindingを使う
  • フック関数の中で、bind, updateは頻出のため、function関数で省略可能
  • elはhtmlタグのことを指す。
//カスタムディレクティブ定義方法①
Vue.directive("sample", {
  bind(el, binding) {
     el.style.color = 'red';
  }
});

//カスタムディレクティブ定義方法②
Vue.directive("sample", function(el, binding) {
  el.style.border = 'red';
});

◆ binding.value


<template>
  <!-- "v-sample"は、カスタムディレクティブ -->
  <p v-sample="red">Home</p>
</template>


Vue.directive("sample", function(el, binding) {
  //v-sample="red"の値を、binding.valueで受け取る
  el.style.color = binding.value;
});

◆ 引数：arg

<template>
　<!-- "v-sample:solid"で、引数を指定する -->
  <p v-sample:solid="red">Home</p>
</template>

Vue.directive("sample", function(el, binding) {
  //"v-sample:solid"の引数を"binding.arg"を用いて取得する
  el.style.samplestyle = binding.arg;
});

フィルター

  • Vue.filterで、フィルターを作成し、パイプを使って適用する
//フィルター名："UpperCase"　input値を"大文字"に変換する
Vue.filter("UpperCase", function(value) {
  return value.toUpperCase();
});

<template>
  <!-- "Vue.filter"で定義した"UpperCase"を挿入する -->
  <h1>{{ answer | UpperCase }}</h1>
</template>

<script>
export default {
  data() {
    return {
     //属性値：answer 初期値："hello world!"
      answer: "hello world!"
    }
  }
};
</script>

ミックスイン

  • export constを用いてミックスインを定義する
  • ミックスインを定義したファイルをimport, exportを使って反映させる
//ミックスイン名：sampleを定義する
export const sample = {
  data() {
    return {
     //属性値：answer 初期値："hello world!"
      answer: "hello world!"
    }
  }
};

<template>
  <p>{{answer}}</p>
</template>

<script>
//ミックスインを定義したファイル名をインポート
import { sample } from "@/sample";

export default {
  //ミックスインで定義した内容をエクスポートし、反映させる
  mixins: [sample]
};
</script>

Vue Router

◆ router.js

//vue-routerをインポートする
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

//Router(プラグイン)を適用する
Vue.use(Router);

//new Routerによって、パスルーティングを指定
export default new Router({
  routes: [
    {
      //path, componentを指定
      path: "/",
      component: Home
    }
  ]
})

◆ main.js

//vue-routerを追加する
import router from "./router"

new Vue({
  //routerを追加
  router: router,
  render: h => h(App)
}).$mount("#app");

◆ App.vue

<template>
  <!-- "router-view"を使用することで、設定したルーティングを適用する -->
  <router-view></router-view>
</template>

同シリーズ

参考文献

Discussion