くろおーかみ*てっく

しがないくろおーかみの勉強記

100DaysOfCode #11: Vue.js <script>直接組み込み(1)

100DaysOfCode Vue HTML JavaScript

やったこと

JSFiddle Hello World example でちょっと触ってから単一ファイルコンポーネントを触ったので、
「このページをVueでリプレースしてほしい。 少しずつ 」 というのに対応できなかったんですよ。

なので、インストールでいう <script> 直接組み込み からコードを書いています。

今日の進捗のコードはコチラ(日付ごとにtagを設定しています)

github.com

きづいたこと

  • Vueのスクリプトは (<body> だと) 一番下に挿入しないと動作しない

    • [Vue warn]: Cannot find element: #app1

vuesample.js

var app = new Vue({
  el: '#app1',
  data: {
    message: '宣言的レンダリングができました👏',
    message2: '隠しメッセージ'
  }
});

NG

<head>
  <meta charset="utf-8">
  <title>Vue direct-JS Sample</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- この位置は動作しない -->
  <script src="./vuesample.js"></script>
</head>

<body>
  <div id="app1">
    ...
  </div>

</body>

OK

<head>
  <meta charset="utf-8">
  <title>Vue direct-JS Sample</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app1">
       ...
  </div>

  <!-- 下部に挿入しないと動作しない -->
  <script src="./vuesample.js"></script>
</body>

みんなの進捗を応援！

Twitter @bwolftech で応援(Fav & RT)した進捗を紹介します💖

アプリの1機能ができましたか！進みましたね👏👏

CSSで作品ができています、すごいっ

認証後にその情報が渡っていないとかあると「認証されていない」ままになっちゃいますよね(経験談)
少しずつ原因を調べましょー