<div id="app">
  </div>


  <!-- Vue.js -->
  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    // el 은 Vue 인스턴스의 속성이다.
    const app = new Vue({
      el: '#app', // 어떤 요소에 mount 할지를 결정
      data: { // MVVM => Model이다.
        message: 'Hello Vue'
      },
    })
  </script>

  <div id="app">
    
  </div>



  <!-- vue.js -->
  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue'
      },
    })
  </script>

  <div id="app">
    <!-- Vanilla JS. domElement.innerText -->
    <!-- v- 접두사로 시작하는 것들은 모두 디렉티브 라고 부른다. -->
    <p v-text="message"></p>
    <p></p>
  </div>

  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '완전이 같아요.'
      },
    })
  </script>

  <div id="app">
    <p v-if="boo1">
      true
    </p>
    <p v-if="bool2">
      false
    </p>

    <p v-if="str1">
      Yes
    </p>
    <p v-if="str2">
      ''
    </p>

    <p v-if="num1">
      1
    </p>
    <p v-if="num2">
      0
    </p>
  </div>

  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    // el 은 Vue 인스턴스의 속성이다.
    const app = new Vue({
      el: '#app', // 어떤 요소에 mount 할지를 결정
      data: { // MVVM => Model이다.
        boo1: true,
        boo2: false,
        str1: 'Yes',
        str2: '',
        num1: 1,
        num2: 0,
      }
    })
    console.log(app.message)
  </script>

  <div id="app">
    <p v-if="username === 'master'">
      Hello Master
    </p>

    <p v-else>
      Hello User
    </p>

    <p v-if="number > 0">
      양수
    </p>

    <p v-else-if="number < 0">
      음수
    </p>

    <p v-else>
      0
    </p>
  </div>


  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    // 초기화
    const app = new Vue({
      el: '#app',
      data: {
        username: 'master',
        number: 0,
      }
    })
  </script>

  <div id="app">
    <ul>
      <li v-for="number in numbers"></li>
    </ul>

    <ol>
      <li v-for="teacher in teachers"></li>
    </ol>
  </div>


  <!-- Vue.js -->
  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        numbers = [0, 1, 2, 3, 4, 5],
        teachers: [
          { name: 'neo' },
          { name: 'tak' },
        ],
      },
    })
  </script>

  <div id="app">
    <a href="">Bad Google Link</a>
    <!-- v-bind:표준속성 => 표준 html 속성과 Vue 인스턴스를 연동할 때. (+a) -->
    <a v-bind:href="googleUrl">Good Google Link</a>
    <a v-bind:href="naverUrl">Naver Link</a>
    <img src="randomImageUrl" v-bind:alt="altText">
  </div>


  <!-- Vue.js -->
  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        googleUrl: 'https://google.com',
        naverUrl: 'https://naver.com',
        randomImageUrl: 'https://picsum.photos/200',
        altText: 'random-Image',
      },

    })
  </script>

  <div id="app">
    <h1>v-model Test</h1>
    <input v-model="inputText">
    
  </div>


  <!-- Vue.js -->
  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        inputText = '',
      },
    })
  </script>