すべてのカテゴリ

Vue 公式チュートリアル　〜　条件によって表示を変えるVue 公式チュートリアルのステップ６は、Javascript の条件によって表示の内容を変える事を学習します。前回までのポイントは？前回までに、Vue の表示に使う「部品」になる、「*.vue」ファイルの基本の三つの部分、「template」、「script」、「style」の書き方を学習しました。そして、Javascript と HTML、HTML と CSS の連携についても少しづつ学習しています。HTML、Javascript、CSS の基本の書き方は、それぞれの標準的な書き方に「近い」書き方です。しかし、実際には、「Vue 独特の書き方」があります。特に、HTML の細かい書き方は、微妙に違っています。そう考えると、初心者が混乱を避けるには、直接 Vue 独特の書き方をその都度学習するのは、意外に効果的かもしれません。今回学ぶのは？今回のステップ６の課題は、ボタンを押す度に表示する内容をプログラムで変えるやり方です。これが今回の変更前の課題のコードです。<script>export default {  data() {    return {      awesome: true,    };  },  methods: {    toggle() {      // ...    },  },};</script><template>  <button ＠click="toggle">toggle</button>  <h1>Vue is