개인공부/Vue316 Vue3 #4 서론 React를 배우면서 공식문서에서도 권장하면서 사람들과의 암묵적인 룰 같은 스타일 가이드가 Vue에도 있습니다. React에서는 파일이름, 컴포넌트이름 2개의 명사가 붙어있으면 (camelCase)이름으로 작성하고 API키 같은 경우는 대문자로 작성 등 있었습니다. 본론 우선순위 A: 필수(오류 방지) 1. 여러 단어로 된 컴포넌트 사용 // 나쁨 // 좋음 2. 자세한 Prop 정의 사용 // Even better! props: { status: { type: String, required: true, validator: value => { return [ 'syncing', 'synced', 'version-conflict', 'error' ].includes(value) } } } 3. v-f.. 2023. 11. 24. Vue3 #3 서론 공부 중인 강의에서 2와 3버전의 차이점을 보여주면서 강의를 하고 있습니다. Vue에서는 크게 script, template, style 3개로 구분하는데 script에서 함수, 컴포넌트 바인딩의 차이점도 알 수 있었고 setup을 통해 컴포넌트를 단 한줄로 import 가능합니다. 또한, style scoped를 해서 해당 vue파일에서만 style이 적용되게 할 수 있었습니다. 본론 빌트인 - 디렉티브 v-text v-text는 엘리먼트의 텍스트 컨텐츠 속성을 설정하므로, 엘리먼트 내부의 기존 컨텐츠를 덮어씁니다. 텍스트 컨텐츠의 일부를 업데이트해야 하는 경우, 이중 중괄호를 사용해야 합니다. 간단하게 자바스크립트의 innterText기능과 유사하다고 생각합니다. // 위 아래 동일 하지만 아래.. 2023. 11. 24. Vue3 #2 본론 Component SFC : Single File Component => Template + Script + Style 기본 HTML element를 확장하여 재사용 가능한 코드로 캡슐화 Vue 컴포넌트는 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에 사용하는 옵션은 제외)그리고 같은 라이프 사이클 훅을 사용할 수 있습니다. Components 생성 #HTML // 전역 컴포넌트 // 지역 컴포넌트 #Vue const {createApp} = Vue; // 지역 컴포넌트 const componentB = { template: `지역 컴포넌트` } const app = createApp({ components:{ "component-b": componentB } }).. 2023. 11. 23. Vue3 #1 서론 Next.js 공부를 하면서 Vue에 대해서도 막연하게 궁금하긴 했지만 Next와 다른 공부를 하면서 하기에는 벅차서 Next 클론코딩을 몇가지 만들어보고 Vue에 대해서 공부하려고 합니다!! 본론 인스턴스 생성 ##HTML {{message}} {{count}} +1 ##Vue const {createApp} = Vue; createApp({ data(){ return { message: "안녕하세요", count: 0 } }, methods: { Increment(){ this.count++ } } }).mount("#app") 생명주기 const {createApp} = Vue; createApp({ data(){ return { message: "안녕하세요", count: 0 } }, met.. 2023. 11. 23. 이전 1 2 3 다음