Vue.jsを試してみます。

Vue CLIを導入する前に、まずは簡単に試せるVue.jsのサンプルを動かしてみます。

Vue.jsのサンプル

以下をhtmlファイルとして保存し、Webブラウザで開きます。

hello_vue.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vueサンプル</title>
</head>
<body>
  <div id="app">
    {{ text }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
  new Vue({
    el: '#app',
    data: {
      text: "Hello, Vue",
    }
  });
  </script>
</body>
</html>

恐らくこれが最もシンプルなVue.jsのサンプルになると思います。

実行結果

hello_vue.html

解説

{{ text }} は変数textの値を表示しています。

<div>タグのidにappを指定しています。後述のVueインスタンスで#appと対応が取れていれば任意のidが指定可能ですが、慣例的にappにしています。

<div id="app">
{{ text }}
</div>

Vueインスタンスを生成しています。elで<div>タグのidを指定していて、data配下で「text」という名前の変数を定義し、値を設定しています。

new Vue({
  el: '#app',
  data: {
    text: "Hello, Vue"
  }
});

たったこれだけですが、まずは実行して簡単に画面に表示できることがわかりました。

Vue.jsのサンプル

hello_vue.html

実行結果

解説

関連

コメント一覧

【Vue.js入門】VueのHelloWorldを解説 (Vue Routerなし) | TECH GUILD23/

コメントを残すコメントをキャンセル

最近の投稿

人気の投稿

カテゴリー

アーカイブ

Twitter

Facebook

Instagram

Vue.jsの入門 お手軽サンプルを試してみる

Vue.jsのサンプル

hello_vue.html

実行結果

解説

関連

コメント一覧

【Vue.js入門】VueのHelloWorldを解説 (Vue Routerなし) | TECH GUILD23/

コメントを残す コメントをキャンセル

最近の投稿

人気の投稿

カテゴリー

アーカイブ

Twitter

Facebook

Instagram

Vue.jsの入門お手軽サンプルを試してみる

コメントを残すコメントをキャンセル