jQueryとVueでの書き方 #Vue.js

Jqueryの場合だとHTMLを書き換える部分は
何行も記載しなければならないので結構大変
vueの方が直感的でわかりやすい

<!DOCTYPE html>
<html lang="en">
<head>

    <script src="main.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUETtest</title>


</head>

<body>
    <div id="container">
    <h1>TEST</h1>


    //vue.での記載方法
    <ul>
      <li v-for="qq in w">{{ qq }}</li>
    </ul>
    </div>


    <script src="jquery-3.5.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

      //Vue.jsでの記載方法
      var app = new Vue({
        el: '#container',
        data: {
          w: ['月','火','水','木','金','日']
        }
      })      

      //jqでの記載方法
      // var w=['月','火','水','木','金','日'];
      // $('#container').append('<ul>');
      //   for(var i=0;i<w.length;i++)
      //   {
      //     $('#container ul').append('<li>'+w[i]+'</li>');
      //   }


      // var img=$('<img>');
      // img.attr('src','https://blog-imgs-114.fc2.com/r/e/l/religionofrabia/gollira.jpg')
      //     .attr('alt','写真')
      //     .appendTo("#container");

      //   $('#container').append(img)
    </script>

</body>
</html>