8월 14일 수업내용

npm create vue@latest : latest는 node.js를 최신버전으로 받았기 때문에 가장 최근 버전으로 다운받겠다는 명령어이다.

기본 폴더에서 npm create vue@latest 입력후

vue 프로젝트 명으로 사용할 이름을 입력

현재는 no, no, yes, no, no로 입력하고 나중에 하나씩 무슨 의미를 가지고 있는지 확인해보는게 좋다.

 

까먹었던내용

터미널에서 폴더나 파일명이 길때 tab누르면 한번에 입력 가능하다.

 

Vue instance란

<script>

  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"
      }
    }
  })

 app.mount('#app')

</script>

Vue 코드이며 위에 부분을 말하며 이해가 잘 되지않는다면 google에 2형식으로 'vue instance is'라고 검색하면 영문의 문서를 찾아보는것이 가장 설명이 정확하다.

MVVM = Model View View Model

view는 div 쪽

model은 script 쪽

 

vue는 v-~~라는 것이 중요하다

ex) v-bind, v-show, v-if, v-for 등등

 

v-bind는 css의 style 기능을 한다.

<div v-bind:style={ fontsize: size}>

<img v-bind:src='url'>

v-bind는 ':'으로 대체 할 수 있다.대부분 생략을 하니까 ':'만 있다면 v-bind가 생략됬다고 생각해도된다.

  <p v-if="typewriterCount>0">
    in stock
  </p>
  <p v-else>
    not in stock
  </p>
</div>
.
.
<script>
  const app = Vue.createApp({
   data() {
    return {
      typewriterCount: 3
    }
   }
  })
  app.mount('#app')
</script>

v-if는 if문과 같이 v-else가 같이 따라온다.<div id="app">
script에 typewirterCount가 3으로 되어있으니 else로 출력된다.

 

<div id="app">
  <p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
  <p v-else>The word 'pizza' is not found in the text</p>
</div>
.
.
data() {
  return {
    text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
  }
}

v-if는 함수를 포함할 수 있다.

text에 pizza가 포함되어있으니 The text includes the word 'pizza' 내용이 출력된다.

 

#app > div {
   width: 200px;
   padding: 20px;
   border: dashed black 1px;
   background-color: gold;}
.impClass {
   background-color: lightcoral;
}

#app > div 선택자는 ID 선택자와 자식 선택자를 사용하므로, .impClass 클래스 선택자보다 우선순위가 높습니다. 따라서 background-color: gold 스타일이 최종적으로 적용되게 됩니다.

***참고자료

https://han-um.tistory.com/16

Vue.js 동적 배열 이미지 출력 및 반응형 처리하기

v-show와 v-if는 비슷해 보이지만 차이가 있다.

<div id="app">
  <p>Find the 'showDiv' data property in the code, change it to 'false', and run the code again.</p>
  <div v-show="showDiv">This div tag can be hidden</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        showDiv: false
      }
    }
  })
 app.mount('#app')
</script>

v-show는 이미 만들어진 요소를 true false를 이용해 보이거나 안보이게 하지만 v-if는 생성을 하는 것이다.

 

<div id="app">
  <div>
    <figure v-for="x in manyFoods">
      <img v-bind:src="x.url">
      <figcaption>{{ x.name }}</figcaption>
    </figure>
  </div>
  

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const app = Vue.createApp({
   data() {
    return {
      manyFoods: [
        {name: 'Burrito', url: 'img_burrito.svg'},
        {name: 'Salad', url: 'img_salad.svg'},
        {name: 'Cake', url: 'img_cake.svg'},
        {name: 'Soup', url: 'img_soup.svg'},
        {name: 'Fish', url: 'img_fish.svg'},
        {name: 'Pizza', url: 'img_pizza.svg'},
        {name: 'Rice', url: 'img_rice.svg'}
      ]
    }
   }
  })
  
  app.mount('#app')

</script>

v-for는 상당히 유용하게 쓸수있다.

x.url, x.name과 같이 DB에서 끌어와서 출력해줄수도있다.

<div id="app">
  <div>
    <p v-for="(x, index) in manyFoods">
      {{ index }}: "{{ x.name }}", url: "{{ x.url }}" <br>
    </p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
   data() {
    return {
      manyFoods: [
        {name: 'Burrito', url: 'img_burrito.svg'},
        {name: 'Salad', url: 'img_salad.svg'},
        {name: 'Cake', url: 'img_cake.svg'},
        {name: 'Soup', url: 'img_soup.svg'},
        {name: 'Fish', url: 'img_fish.svg'},
        {name: 'Pizza', url: 'img_pizza.svg'},
        {name: 'Rice', url: 'img_rice.svg'}
      ]
    }
   }
  })
  app.mount('#app')
</script>

배열요소에 번호를 얻으려면 v-for에 index를 넣어주면 손쉽게 번호를 생성할 수 있다.

v-on으로 이벤트를 생성할 수 있다.

<div id="app">
  <img src="img_moose.jpg" width="770" height="549">
  <p>{{ "Moose count: " + count }}</p>
  <button v-on:click="count++">Count moose</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    }
  })
 app.mount('#app')
</script>

v-on:click:count에 count++로 script의 count를 0부터 클릭할때마다 1씩 증가하는 이벤트를 작성하면 버튼을 누를때마다 숫자 카운트가 올라간다.

 

 v-on:click      @:click

 v-bind:click     :class

로 생각하면된다.

 

**해보기**

v-함수 이용해서 페이지 하나 만들어보기


function을 안쓰고 method라는 것을 쓴것은 객체지향이라고 생각하면된다.

Vue method들은 좀더 복잡한 일을 v-on과 관련해서 같이 사용하기 좋다.

const app = Vue.createApp({
  data() {
    return {
      text: ''
    }
  },
  methods: {
    writeText() {
      this.text = 'Hello Wrold!'
    }
  }
})

data, method는 옵션 text는 property

method 옵션에서 data 옵션 안에있는 text property에 접근하려고한다.

this는 writeText안에 있는 것이 아니라 

 

 

vue와 react의 차이는 two-way binding이라고 할 수 있다

• v-modelHTML 입력이 변경되면 Vue 인스턴스 데이터를 업데이트합니다.
• v-modelVue 인스턴스 데이터가 변경되면 HTML 입력도 업데이트합니다.

 

파생데이터란 기존에 DB에 저장되어 있는 열에 조건을 걸어서 따로 계산되어 나오는 데이터를 말한다.

예를 들어 연봉 계산을 위해서 DB에 저장되어 있는 월급데이터에 월급*12 이런식으로 데이터에 조건을 걸어 새로운 열로 만들도록 하는 것이다.

 

Vue Watchers는 method이다.