knvegr’s blog

学習メモ

【メモ】Vue.jsの設定から動作確認

  • Vue.js読み込みにはCDNを利用

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
  <div id="app">
    <h1>
      {{ greeting }}
    </h1>
  </div>    
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

【main.css】

var app = new Vue({
  el: '#app',
  data:{
    greeting:'Hello'
  }
})

【実行結果】 f:id:knvegr:20181112032410p:plain

  1. Vue.js公式サイトのインストールページからCDN欄に記載されているソースをコピーしHTMLのbodyタグ末尾に貼り付ける
    2. <body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</body>
  2. divタグでid属性を割り当てる。
    3. <div id="app">
  3. JavaScript側でVueインスタンス生成処理を記載する。
    4. var app = new Vue({
})
  4. Vueインスタンス内にel: #appを記載する。 これによりdiv id=app配下でVue.jsが動作する。
    5. var app = new Vue({
  el: '#app'
})
  5. Vueインスタンス内にdataオプションを定義する。 HTML側ではここで定義したプロパティを参照する。
    6. var app = new Vue({
  el: '#app',
  data:{
    greeting:'Hello'
  }
})
  6. HTML側で二重括弧(Mustache構文)を使用しプロパティを参照。
    7. <h1>
  {{ greeting }}
</h1>