exercise_1_practice.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      [v-cloak] {
          display: none;
      }
    </style>
    <script src="https://unpkg.com/vue"></script>
    <!-- minified version for production ->
    <!--script src="https://unpkg.com/vue@2.5.6/dist/vue.min.js"></script-->
    <script>
    function randomName(callback){
      fetch('https://randomuser.me/api/').then( function(response){
        return response.json()
      }).then( function(json) {
        callback(json.results[0].name.first + ' ' + json.results[0].name.last)
      })
    }
    </script>
  </head>
  <body>
    <div id="app" v-cloak>
      <p>name: {{ name }}</p>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        name: 'SDS'
      },
      methods: {

      }
      
    })
    </script>
  </body>
</html>