【Vue.js】基本テンプレート

全体

<script>
export default {
  data() {
    // 1. 宣言的レンダリング
    return {
      データプロパティ: '値(文字列や数値、配列、クラスなど)'
      message: 'Hello World!',
      titleClass: 'title',
      count: 0,
      text: '',
      awesome: true,
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  mounted() {
    this.$refs.p.textContent = 'mounted!'
  },
  computed: {
    算出プロパティ() {
      if (this.データプロパティ) {
        return '値1'
      }
      return '値2'
    }
  }
  methods: {
    関数名() {
      // 処理
    },
    increment() {
      this.count++
    },
    toggle() {
      this.awesome = !this.awesome
    },
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <!-- 1. 宣言的レンダリング -->
  <h1>{{ message }}</h1>
  
  <!-- 2. 属性バインディング(v-bind) -->
  <h1 :class="titleClass">Make me red</h1>
  
  <!-- 3. イベントリスナー(v-on) -->
  <button @click="increment">count is: {{ count }}</button>
  
  <!-- 
  4. フォームバインディング(v-model)
  https://ja.vuejs.org/guide/essentials/forms.html
  -->
  <input v-model="text">
  <p>{{ text }}</p>
  
  <!-- 5. 条件付きレンダリング(v-if) -->
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
  
  <!-- 6. リストレンダリング(v-for) -->
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  
  <!-- 8. ライフサイクルとテンプレート参照 -->
  <!-- コンポーネントがマウントされた後でないとアクセスできない -->
  <p ref="p">hello</p>
</template>

<style>
.title {
  color: red;
}
</style>

スクリプト内

<script>
import 他のコンポーネント from './ChildComp.vue'

export default {
  // 自身のコンポーネントが他のコンポーネントから呼び出される際にpropを指定できる
  // ex) <MyComp :msg="データプロパティ" :引数="データプロパティ">
  props: {
    msg: String
    // 引数: 型
  },
  components: {
    他のコンポーネント,
    // ...
  },
  data() {
    return {
      データプロパティ: '値(文字列や数値、配列、クラスなど)'
      // ...
    }
  },
  mounted() {
    // https://ja.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram
    // マウントされたあとに実行する関数
  },
  watch: {
    データプロパティ() {
      // 該当のデータプロパティの値が変化したときに実行される
      // ex) 値が更新されたらAPIをコールする
    }
  },
  methods: {
    関数() {
      // 処理
    },
    引数付き関数(a) {
      // 呼び出し方の例: <button @click="引数付き関数(データプロパティ)">X</button>
    }
  },
  computed: {
    算出プロパティ() {
      // https://ja.vuejs.org/tutorial/#step-8
      // テンプレートからデータプロパティのように呼び出せる
    },
    書き込み可能な算出プロパティ {
      // https://ja.vuejs.org/guide/essentials/computed.html#writable-computed
      // getter
      get() {
        return '値'
      },
      set(newValue) {
        this.データプロパティ = newValue
      }
    }
  }
}
</script>

親子コンポーネント間でイベントを発行

this.$emits

子コンポーネント.vue

<script>
export default {
  emits: ['イベント名'],
  mounted() {
    this.$emit('イベント名', 値)
  }
}
</script>

<template>
  <h2>Child component</h2>
</template>

親コンポーネント.vue

<script>
import 子コンポーネント from './子コンポーネント.vue'

export default {
  components: {
    子コンポーネント
  },
  data() {
    return {
      データプロパティ: '親コンポーネントの値'
    }
  }
}
</script>

<template>
  <子コンポーネント @イベント名="(値) => データプロパティ = 値" />
  <p>{{ データプロパティ }}</p>
</template>