前回までの記事

フィルターとは

main.js


Vue.filter("upperCase", function(value) {
 return value.toUpperCase();
});

App.vue


//テンプレートタグ内
<h2>{{ title | upperCase}}</h2>

//スクリプトタグ内
export default {
  data() {
    return {
      title: "welcom vuejs"
    }
  }
}

大文字に変換するupperCase関数がfilterにより適用された

ローカルフィルタを定義する

App.vue


//テンプレート --->
    <h2>{{ title }}</h2>
    <h2>{{ title | upperCase }}</h2>
    <h2>{{ title | lowerCase }}</h2>
    // upperCaseが適用される
    <h2>{{ title | lowerCase | upperCase }}</h2>



//スクリプト --->
export defalut {
  filters: {
    lowerCase(value) {
      return value.toLowerCase();
    },
    upperCase(value) {
      return value.toUpperCase();
    }
}

フィルターでは、thisが使用できない
thisでアクセスするためには、computedプロパティを使用する
リロードが高頻度の環境では、filterよりcomputedが便利

ミックスインとは

コードの再利用

LikeNumber.vue


//テンプレート
    <p>いいね({{ harfNumber }})</p>
    <button @click="incriment">+1</button>

//スクリプト
import { likeNumber } from "@/likeNumber";
export default {
  mixins: [likeNumber],
};

likeNumber.js


export const likeNumber = {
  props: ["totalNumber"],
  computed: {
    harfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    incriment() {
      this.$emit("my-click", this.totalNumber +1);
    }
  }
}

jsファイルに分離する
使用したいファイル内で、インポート
mixinsプロパティで、配列指定で呼び出す

vue.jsを初めて学ぶ ⑤ [フィルターとミックスイン]

目次

フィルターとは

ローカルフィルタを定義する

ミックスインとは