Vue.js 学習 Part1

はじめに

私はこれまで、WEB制作でjQueryを使用してきましたが、数年前からVue.jsという単語をよく耳にするので、Vue.jsについて学習していきます。

まずは、scriptタグで手軽に読み込みたいと思います。

Vue 2とVue 3があるようですが、Vue 3 を使用していきます。

こちらのコードをbodyタグの直前あたりに記述します。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

これでVue.jsを使う準備ができました。

先ほどのscriptの後で、自作のmy-vue.jsというファイルを読み込んで、
挙動を確かめてみました。

ドキュメントを参考にしてコードを書いていき、
無事に以下のようにHello Vueと表示されました。

HTMLはこちらです。

<div id="hello-vue">
 {{ message }}
</div>

JSはこちらです。

const HelloVue = {
  data() {
    return {
      message: 'Hello Vue'
    }
  }
}

Vue.createApp(HelloVue).mount('#hello-vue')

こちらは「宣言的レンダリング」という名称が付いているようです。

以下のようなカウンターが作成されました。

HTMLはこちらです。

<div id="app">
 <button @click="count++">
  Count is: {{ count }}
 </button>
</div>

JSはこちらです（サンプルの方法では上手くいきませんでしたので、以前上手くいったやり方を採用しました）。

const HelloVue = {
  data() {
    return {
      count: 0,
    };
  },
};

Vue.createApp(HelloVue).mount("#app");

最初は、公式サイトよりも書籍で学んだ方がいいと思いました（公式サイトは開発者が書いていて、初心者には分かりにくい箇所がある）。

以前、札幌にある札幌市図書情報館という場所で読んでみた「動かして学ぶ！Vue.js開発入門」がとても分かりやすかったのでおすすめです！

次回は、この本を購入して「Vue.js 学習 Part2」を書いていきます。

投稿ID : 4032

TOP > これまでに書いた記事 > Vue.js > Vue.js 学習 Part1