(22.05.25) Vue.js

22.05.25

라이프사이클

created()는 컴포넌트 생성된 직후
mounted() html, 컴포넌트가 연결될 직후

<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reverseMessage }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello World'
    }
  },
  // 계산된데이터
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(msgValue) {
      console.log(msgValue)
    }
  },
  // 라이프사이클
  // created()는 컴포넌트 생성된 직후
  created() {
    console.log(this.count)
  },
  // mounted() html, 컴포넌트가 연결될 직후
  mounted() {
    console.log(this.count)
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {
      this.message = 'Good!'
    }
  } 
}
</script>

객체구조분해할당

<template>
  <button @click="click">
    Click!
  </button>
  <!-- 객체구조분해할당 fruit -->
  <li
    v-for="{name, index} in newfruits"
    :key="name">
    {{ name }}-{{ index }}
  </li>
  <hr />
  <!-- v-for문 -->
  <li
    v-for="fruit in newfruits"
    :key="fruit">
    {{ fruit.name }}-{{ fruit.id }}-{{ fruit.index }}
  </li>
</template>

<script>
// id속성 부여해보기
import { nanoid } from 'https://cdn.skypack.dev/nanoid'

export default {
  data() {
    return {
      fruits: ['apple', 'banana', 'grape']
    }
  },
  computed: {
    newfruits() {
      // map은 새로운 배열반환
      return this.fruits.map( (fruit, index) => ({
        id: nanoid(),
        name: fruit,
        index
      }))
    }
  },
  methods: {
    click() {
      this.fruits.push('oragne')
    }
  }
}

</script>

양방향 데이터 바인딩

v-model 디렉티브를 사용함
CJK 중국어, 일본어, 한국어는 v-model이 업데이트 되지 않음

v-on:input
input요소에 데이터가 입력될때마다 이벤트 -> @input

<template>
  <h1 @click="click">
    {{ msg }}
  </h1>
  <!--? 한글도 바로 작성되는걸 볼 수 있는 수식어 양뱡향 데이터 바인딩-->
  <input
    :value="msg"
    @input="msg = $event.target.value" />

  <!--? v-model로 사용법은 간단해졌지만 한글출력이 한박자 늦음 양뱡향 데이터 바인딩-->
  <input
    v-model="msg" />

  <h1>{{ checked }}</h1>
  <input
    v-model="checked"
    type="checkbox" />
</template>

<script>
export default {
  data() {
    return {
      msg : 'Hello Vue!!',
      // 체크가 해제된 상태에서 실행
      checked: false
    }
  },
  //event출력, event.target 대상출력 ->이벤트객체출력
  methods: {
    click(event) {
      console.log(event)
      console.log(event.target)
      console.log(event.target.textContent)
    }

  },
}
</script>

양방향 데이터 바인딩 v-model 수식어

.lazy

<input
    v-model.lazy="msg"/>
.lazy: 입력완료되고 다른행동을할때 값 출력

.number

<input 
  v-model.number="msg"/>
.number: 입력값을 숫자로 유지하고싶을때  

.trim

<input
    v-model.trim="msg"/>
.trim: 앞뒤 공백입력값 없앨때

<template>
  <h1>{{ msg }}</h1>
  <input
    v-model="msg"/>
</template>


<script>
export default {
  data() {
    return {
      msg: ''
    }    
  },
  watch: {
    msg() {
      console.log(typeof this.msg) //string으로 출력되기때문에 숫자값유지하고싶을때.number사용해주기
    }
  }
}
</script>

<style>
  body {
    font-size: 3em;
  }
</style>

폼 입력 바인딩

팩토리함수: 함수가 어떤데이터를 반환할건데 함수가 참조형(객체, 배열, 함수)데이터를 return으로 반환하는걸
리턴키워드를 통해서 객체데이터를 반환하니까

데이터를 반환(return)하는 형식으로 해줘야지 데이터 함수를 한번 호출될 때 객체리터럴은 곳 객체를 선언하는것.
그래서 데이터는 꼭 함수로 만들어줘야지 꼬이지 않음

끄적

https로 만드는 이유!
로컬에서는 http상관없음.

http와 https와 통신하는걸 막아버림
http -> https 양뱡향 가능하지만
https -> http 는 안됌! 브라우저 차원에서 통신차단

실시간이미지는 선생님 홈페이지에서 확인해보기