[Vue.js] 初歩の初歩 : 解説とかなんでもいいから、とりあえず最低限実行させるコードを知りたい

2023年4月9日 by Extrose

システムエンジニア

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js test</title>
  </head>
  <body>

    <p id="vueelement">{{ mustache }}</p>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
    <script src="vue_main.js"></script>

  </body>
</html>

JavaScript : vue_main.js

new Vue({ 
  el: '#vueelement',
  data: {
    mustache: "Hello world" 
  } 
});

結果

※さすがに何をしたか補足

pに ID「vueelement」を振ってある
これは Js側 Vue の「el」で指定した名前と同じ

「{{ <データ名> }}」と書くと置換できる
データ名は Vue のうち、「data」内で書いてあるものが指定できる
今回は mustache

ちなみにmustache : マスタッシュ : 髭はこの「{{ }} 」構文の名前

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