vue321 vue3 v-for @고유id를 만들때 사용 npm i -D shortid shortid.generate() 추가 {{ name }} - {{ id }} //변이 methods push, pop, shift, unshift, slice, sort, reverse //비-변이 methods filter, concat, slice 2021. 10. 18. vue3 v-if / v-show click me! Hello? Hello? 2021. 10. 18. vue3 v-if / v-else-if / v-else click me! Hello!!!! Count > 3 Good~~! 2021. 10. 18. vue3 클래스, 스타일 바인딩 //클래스 바인딩 Hello World ( {{ isActive }} ) 스타일 바인딩 :style 부분에 직접 color:red 를 입력하는 방식 fontStyle 오브젝트 입력 [배열, 배열] 형식으로 입력 Hello My name is Solyi 2021. 10. 18. vue3 watch @watch }, watch: { //데이터들의 변경 사항을 감시하는 용도 //감지가 되면 내부 로직이 실행되는 구조 //데이터, function 모두 가능 msg: function(newValue){ console.log('msg: ', this.msg, newValue) }, reversedMessage(v){ console.log('reversedMEssage : ', this.reversedMessage , v) } }, 2021. 10. 18. vue3 computed - getter setter {{ reversedMessage }} {{ reversedMessage }} ADD~! 2021. 10. 18. vue3 computed 캐싱 //중괄호 내부에서 문자 합치기, 변형하기 {{ msg+'!?' }} {{ msg.split('').reverse().join('') }} //h1 태그 내부 {{ reverseMessage() }} //methods {{ reversedMessage }} //computed. computed 캐싱 - 한번 계산을 하면 저장된 값을 - computed에서 만들어둔 데이터는 캐싱이라는 기능이 있어서 한번 연산을 해두면 반복적으로 데이터처럼 화면에 출력할때 또 계산을 하지않음. 가지고 있는 데이터를 출력해줌 - 여러차례 출력되는 데이터 일땐 계산된 가지고 있는 데이터(캐싱)를 통해서 출력을 해준다. 기본적으로 application을 만들때 데이터를 최적화 할때 캐싱 기능을 이용할수있다. computed 에는.. 2021. 10. 18. vue3 computed @@@Computed //계산된 데이터 computed 에 function haSFruits 생성후 v-if문에 hasFruits 입력 function reverseFruits 생성후 v-for문 fruit in reverseFruits Fruits {{ fruit }} Reverse Fruit {{ fruit }} 2021. 10. 18. 이전 1 2 다음 반응형