본문 바로가기
Frontend/Vue

Vue.js 강의 - 조건문과 반복문

by 훈즈 플로거 2020. 4. 13.

조건문과 반복문

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/2LMzjNC

 

[인프런 인강] 선착순 100명 50% 할인쿠폰! - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법

인프런 인터넷 강의 선착순 100명 50% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 678-ee6aa5185caa 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 6월..

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

댓글0