[Hoon] Vuejs 강의 - 조건문과 반복문

조건문과 반복문

https://kr.vuejs.org/v2/guide/index.html#조건문과-반복문

엘리먼트가 표시되는지에 대한 여부를 제어

<div id="app">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

 

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})

버튼을 하나 추가하고, Todo 를 추가하는 메소드를 만들어서 확인해 봅시다. { text: 'New item' }를 추가힙니다.
Todo 목록에 새 항목이 동적으로 추가 된것을 볼 수 있습니다.

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
  <button v-on:click="addTodo">추가</button>
</div>

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  },
  methods: {
  	addTodo: function(){
    	this.todos.push({ text: 'New item' })
    }
  }
})

사용자 입력 핸들링

https://kr.vuejs.org/v2/guide/index.html#사용자-입력-핸들링

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

new Vue({
  el: '#app-6',
  data: {
    message: '안녕하세요 Vue!'
  }
})

컴포넌트를 사용한 작성방법

https://kr.vuejs.org/v2/guide/index.html#컴포넌트를-사용한-작성방법

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다.
이는 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적 개념입니다.
생각해보면 거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

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

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
  <!-- 컴포넌트를 사용한 작성방법 -->
   <ol>
    <todo-item 
       v-for="todo in todos"         
       v-bind:todo="todo"
       v-bind:key="todo.id"
       >        
    </todo-item>    
  </ol>  
</div>

Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스 입니다.
Vue에서 컴포넌트를 등록하는 방법은 간단합니다.

// 컴포넌트를 사용한 작성방법
Vue.component('todo-item', {
	//template: '<li>할일 항목 하나입니다.</lie>'
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

new Vue({
	el:'#app',
  data: {
    todos: [
    	  { id:0, text: 'Javascript 배우기'},
        { id:1, text: 'Vue 배우기'},
        { id:2, text: '무언가 멋진 것을 만들기'},
    ]
  }
})

bit.ly/3fXOzon

인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런