05.07.2022 TIL

😸 Vue TIL

 

😽 Done it

😼 Vue 시작

vue는 data가 바뀌면 화면이 바뀌는 반응성 프레임 워크입니다.
(반응성을 가진 data를 반응형 data라고 합니다.)

vue를 살펴 보기 전에 this에 대해 조금 더 공부하면 좋을 것 같습니다.

    <style>
      .orange {
        color: orange;
      }
    </style>
    <div id="app">
      <div v-bind:class="{orange: active}">{{counter}}</div>
    </div>
    <script>
      const App = {
        data() {
          return {
            counter: 0,
            active: true,
          };
        },
      };
      const app = Vue.createApp(App).mount('#app');

v-...

디렉티브

• v-bind는
  data를 연결해서 사용 할 수 있다.

a 속성에다가 b 데이터를 넣는다.

<div v-bind:a="b"></div>

• v-on는
  click, scroll, mouseenter...과 같은 JS 이벤트를 붙여줄 수 있다.

<button v-on:click="increase">hello</button>
<script>
  const App = {
    ...,
    methods: {
      increase() {
        ...
      }
    }
  }
  ...
</script>

• v-model

<input>, <select> 요소 같은 양식을 지정하는 html 요소에 연결하는 디렉티브(양방향)

• v-if 조건문, v-for 반복문

😼 Vue Application & instance

createApp
: Application instance를 반환하며 이 instance는 application 컨테스트를 제공합니다.

• mount
  : Application 루트 컴포넌트의 템프릿을 렌더링하여, 제시된 DOM element의 innerHTML을 치환한다.

😼 Vue tip

script 태그 안에서는 파스칼 표기법,카멜 표기법
그냥 보통 html 요소에서는 dash case로 사용 됩니다

• created: vue application 생성 후
• mounted: html 구조 연결 후
• {{}}: 선언해 놓은 data 출력
• v-once: data가 변경되어도 갱신 되지 않고 원래의 data 출력
• v-html: html 구조로 출력(XSS 조심)
• v-bind: 속성을 사용하도록 하는 디렉티브("" 안에는 data가 쓰이고 그냥 문자열을 넣고 싶을 때는 ''로 묶어서 넣는다.)

😺 Feeling

뭔가 진도를 잘 따라가고 있지만... 숙련도가 살짝 아쉬운 느낌이 듭니다. 특히 코드리뷰 반영이 쫌 밀렸습니다. 빨리 문제점을 파악해서 진화를 해야 하는데 아쉽습니다.
그런데 복습 기간에 확실히 문제점을 한번 싹다 정리를 할려고 합니다. 그때도 바쁠려나? 조금 미루고 있는 감이 있지만. 화이팅 해봐야 겠습니다. :)

 

📖 REF

프로그래머스 데브코스
https://v3.ko.vuejs.org/guide/introduction.html