vue.jsのtemplateファイルの書き方

vue.jsのテンプレートファイル(.vue)について、備忘録的にまとめてみました。
ちょくちょく書き足していきます。

基本

SampleTag.vue

<template>
  <div class="sample-tag">
    <h1>{{ title }}</h1>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'SampleTag',
  data () {
    // テンプレート内で保有するデータ
    return {
      title: "Vue Template File"
    }
  },
  props: {
    // 親要素から受け取るプロパティの定義
    msg: String
  },
  computed: {
    // 算出プロパティ(処理結果がキャッシュされ、入力値が変更されたときのみ再計算)
  },
  methods: {
    // メソッド(毎回呼び出す度に処理を実行)
  }
}
</script>

<style scoped>
  p {
    color: red;
  }
</style>

App.vue

<template>
  <div id="app">
    <SampleTag :msg="messgae" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      massage: "さんぷるてきすと"
    }
  }
}
</script>

他のコンポーネントファイルを読込むときは、

nameプロパティの定義

ケバブケース(sample-tag)とキャメルケース(SampleTag)の2つの書き方があります。

PugとStylusを使って書いてみる

どうやったらできるか、はこの記事が参考になりました。

SampleTag.vue(pugver)

<template lang="pug">
.sample-tag
  p {{ msg }}
</template>

<script>
</script>

<style scoped lang="stylus">
p
  color red
</style>