Vue.jsのHelloWorld

投稿日: 2022-04-20 2022-10-07
タグ: Vue.js

Vue.js は、リアクティブコンポーネントのライブラリとして急速に人気のあるオプションになりつつあります。軽量で、把握しやすく、楽しく遊ぶことができ、ReactやAngularなどの他のライブラリの優れた代替手段になる可能性があります。

最も簡単な例で足を濡らしてみましょう。これが基本的なHelloWorldアプリのコードで、興味深い部分が強調表示されています。

<!DOCTYPE html>
<html lang="en">
  <meta>
    <meta charset="UTF-8">
    <title>Hello World in Vue.js</title>
  </meta>

  <body>
	
    <div id="hello-world-app">
      <h1>{{ msg }}</h1>
    </div>

    <script
      src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
    </script>

    <script>
      new Vue({
        el: "#hello-world-app",
        data() {
          return {
            msg: "Hello World!"
          }
        }
      });
    </script>

  </body>
</html>

ステップバイステップの内訳：

まず、基本的なHTMLボイラープレートファイルがあります。
IDが＃hello-world-appのdiv には、アプリが含まれます。
divには、h1とmsgデータへの参照があります。
cdnjsでホストされている縮小されたVue.jsライブラリを要求します。 2.1.6は、この記事の執筆時点での最新バージョンです。
次に、新しい Vue オブジェクトをインスタンス化し、 el を使用して、アプリが＃hello-world-appdivであることを通知します。
最後に、dataオブジェクトで必要なデータを提供します。この場合、msgのデータを提供します。

これで、この簡単な紹介は終わりです。詳細については、Vue.jsの公式ガイドのはじめにのセクションをご覧ください。

getdocs

13036