TIL_210723

1. Facts(사실, 객관)

- 캡틴판교 vue 중급강의 TodoList 만들기

 

2. Feelings(느낌, 주관)

- 이제 vue를 <template> <script> <style>로 구분을 하고 TodoList를 만들었습니다. LocalStorage를 이용하였습니다. 기존에 LocalStorage를 사용해본 적이 없었는데 이번 기회에 사용하게 되었습니다. 또한 차근차근 기존에 초급강의에서 배웠던 스타일로 코딩을 했습니다. ES6를 사용하지 않았고, 최대한 풀어서 코딩을 하는 방식이었습니다. 특히, 여러번 스스로 코딩을 해보면서 최대한 구조와 형태를 익히려고 노력했습니다.

 

3. Findings (배운 점)

*VUE 강의 Notion 정리

- 싱글파일 컴포넌트

https://www.notion.so/31c90aef56b64422b1f566844992ac61

 

- form 프로젝트

https://www.notion.so/form-344e07e6a53f441fb1441e5e83ef055f

[[App.vue]]
<template>
  <div>
    <app-header 
      v-bind:propsdata="str"
      v-on:renew="renewStr">
    </app-header>
  </div>
</template>

<script>
 export default {
  data: function() {
   return {
    str: 'Header'
   }
  },
  components : {
   'app-header' : AppHeader
  },
  methods : {
   renewtr : function() {
    this.str = 'hi';
   }
  }
 }
</script>

[[AppHeader.vue]]
<template>
 <header>
 	<h1>{{ propsdata }}</h1>
    <button v-on:click="sendEvent">send</button>
 </header>
</template>

<script>
 export default {
  props:['propsdata'],
  methods: {
   sendEvent : function() {
    this.$emit('renew');
   }
  }
 }
</script>

* v-bind:propsdata="str"

v-bind:프롭스 속성 이름="상위 컴포넌트 데이터 이름"

 

* v-on:renew="renewStr"

v-on:하위 컴포넌트 이벤트 이름="현재 컴포넌트 이름"

 

vue의 특징은 props와 event로 단방향으로 데이터와 이벤트가 발생하는 것이다.