Vue.js (6)

とりあえず忘れないようにうろ覚えの内容を思い出しつつグローバルコンポーネントを使って駄コンテンツを作る。グローバルコンポーネントにおける CSS の設定がよく分からない・・・。が、グローバルコンポーネントを使うこともあんまりないだろうし、いいか・・・。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app">
  <my-header :header-text="headertext"></my-header>
  <my-message :message-text="messagetext"></my-message>
  <button @click="click">
    {{btnTitle}}
  </button>
</div>

Vue.component("my-header", {
  props: ["headerText"],
  template: "<p :style='this.styleObject'>{{headerText}}</p>",
  data() {
    return {
      styleObject: {
        color: "red",
        backgroundColor: "#99ffff",
        textAlign: "center"
      }
    }
  }
})

Vue.component("my-message", {
  props: ["messageText"],
  template: "<p :style='this.styleObject'>{{messageText}}</p>",
  data() {
    return {
      styleObject: {
        backgroundColor: "#ff99ff",
      }
    }
  }
})

new Vue({
  data: {
    headertext: "くまきちくんのメッセージが変わるよ",
    messageText: "うぉぉぉぉにゃんみー",
    btnTitle: "クリック"
  },
  computed: {
    messagetext() {
      return this.messageText
    }
  },
  methods: {
    click() {
      this.messageText += "うぉぉぉぉ"
    }
  }
}).$mount("#app")