Vue.js 공식문서 Tutorial

step.1

<template>
  <h1>Hello World!</h1>
</template>

 

step.2

<script>
export default {
  data(){
   return {
     message: "Hello World!"
}
}
}
</script>

<template>
  <h1>{{message}}</h1>
</template>

 

step.3

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

 

step.4

<!-- 버전 1  -->
<script>
  export default {
    data() {
      return {
        count: 0
      }
    }, 
    methods: {
      increment(){
        this.count++
      }
    }
  }
  </script>
  
  <template>
    <button v-on:click="increment"> count is: {{ count }}</button>
  </template>

<!-- 버전 2 -->
<script>
  export default {
    data() {
      return {
        count: 0
      }
    }, 
    methods: {
      increment(){
        this.count++
      }
    }
  }
  </script>
  
  <template>
    <button v-on:click="increment"> count is: {{ count }}</button>
  </template>

6번 눌렀을 때 나오는 화면

 

step.5

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

 

step.6

<script>
export default {
  data() {
    return {
      awesome: true
    }
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome
    }
  }
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

toggle을 클릭하면 'Vue is awesome!'화면과 'Oh no 😢'

화면이 번갈아서 나온다 

 

step.7

<script>
  // give each todo a unique id
  let id = 0
  
  export default {
    data() {
      return {
        newTodo: '',
        todos: [
          { id: id++, text: 'Learn HTML' },
          { id: id++, text: 'Learn JavaScript' },
          { id: id++, text: 'Learn Vue' }
        ]
      }
    },
    methods: {
      addTodo() {
        this.todos.push({ id: id++, text: this.newTodo})
        this.newTodo = ''
      },
      removeTodo(todo) {
        this.todos = this.todos.filter(t => t != todo)
      }
    }
  }
  </script>
  
  <template>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo">
      <button>Add Todo</button>    
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
  </template>

 

step.8

<script>
  let id = 0
  
  export default {
    data() {
      return {
        newTodo: '',
        hideCompleted: false,
        todos: [
          { id: id++, text: 'Learn HTML', done: true },
          { id: id++, text: 'Learn JavaScript', done: true },
          { id: id++, text: 'Learn Vue', done: false }
        ]
      }
    },
    computed: {
      filterdTodos(){
        return this.hideCompleted
          ? this.todos.filter((t) => !t.done)
          : this.todos
      }
    },
    methods: {
      addTodo() {
        this.todos.push({ id: id++, text: this.newTodo, done: false })
        this.newTodo = ''
      },
      removeTodo(todo) {
        this.todos = this.todos.filter((t) => t !== todo)
      }
    }
  }
  </script>
  
  <template>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo">
      <button>Add Todo</button>
    </form>
    <ul>
      <li v-for="todo in filterdTodos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
    <button @click="hideCompleted = !hideCompleted">
      {{ hideCompleted ? 'Show all' : 'Hide completed' }}
    </button>
  </template>
  
  <style>
  .done {
    text-decoration: line-through;
  }
  </style>

 

step.9

<script>
export default {
  mounted() {
    this.$refs.p.textContent = 'mounted!'
  }
}
</script>

<template>
  <p ref="p">hello</p>
</template>

 

step.10

  <script>
    export default {
      data() {
        return {
          todoId: 1,
          todoData: null
        }
      },
      methods: {
        async fetchData() {
          this.todoData = null
          const res = await fetch(
            `https://jsonplaceholder.typicode.com/todos/${this.todoId}`
          )
          this.todoData = await res.json()
        }
      },
      mounted() {
        this.fetchData()
      }, 
      watch: {
        todoId(){
          this.fetchData()
        }
      }
    }
    </script>
    
    <template>
      <p>Todo id: {{ todoId }}</p>
      <button @click="todoId++">Fetch next todo</button>
      <p v-if="!todoData">Loading...</p>
      <pre v-else>{{ todoData }}</pre>
    </template>

4번 클릭 시 나오는 화면

 

step.11

<script>
  import ChildComp from './ChildComp.vue'
  
  export default {
    components: {
      ChildComp
    }
  }
  </script>
  
  <template>
    <ChildComp />
  </template>

 

step.12

<script>
  import ChildComp from './ChildComp.vue'
  export default {
    components: {
      ChildComp
    },
    data() {
      return {
        greeting: 'Hello from parent'
      }
    }
  }
  </script>
  
  <template>
    <ChildComp :msg="greeting" />
  </template>

 

step.13

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      childMsg: 'No child msg yet'
    }
  }
}
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

 

step.14

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      msg: 'from parent'
    }
  }
}
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

 

step.15

<script>
import JSConfetti from 'js-confetti'

const confetti = new JSConfetti()

export default {
  mounted() {
    this.showConfetti()
  },
  methods: {
    showConfetti() {
      confetti.addConfetti()
    }
  }
}
</script>

<template>
  <h1 @click="showConfetti">🎉 Congratulations!</h1>
</template>