여름 언덕에서 배운 것

ID : PW : submit

Vue Single File Component 소개 .vue 파일은 뭘까? 싱글 파일 컴포넌트는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법 vue 확장자를 가진 파일은 모두 싱글 파일 컴포넌트 싱글 파일 컴포넌트는 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행됩니다 왜냐면 브라우저에서는 .vue 파일이 인식되지 않아서 별도의 변환과정을 거칩니다. VueCLI 가 들고온 APP.vue 싱글컴포넌트뷰로 들어오면 컴포넌트명 파스칼표기로 적어주자 싱글 파일 컴포넌트 코드 작성 팁 설치하고 vbc 쓰면 데이터 바인딩~ {{message}} 경고 v-on 은 @ 로 축약된다. `v-on`은 Vue.js에서 이..

1. 위 예제에서는 `count`라는 반응성 있는 참조와 `increment`라는 함수를 직접 정의했습니다. - Props와 Emits: `defineProps`와 `defineEmits`를 사용하지 않고도 props와 emits를 타입 어노테이션으로 정의할 수 있습니다. 위와 같은 코드는 아래와 같이 간결하게 작성할 수 있습니다. -` 문법을 사용할 때는 일부 Vue 3 Composition API 기능들이 자동으로 내장되어 있습니다. 이렇게 되면 일부 API 함수들을 명시적으로 임포트하지 않아도 됩니다. `` 내에서, `defineProps`, `defineEmits`, `withDefaults`, 그리고 `useContext` 같은 함수들은 내장되어 있으므로 별도로 `import` 할 필요가 없습니..

1. CDNCDN은 Contents Delivery Network의 약자입니다.물리적으로 멀리 떨어져 있는 사용자에게 컨텐츠를 빠르게 제공할 수 있는 기술을 이야기합니다.https://cdn.jsdelivr.net/npm/vue@2.6.0 로 런타임 동안에 가상돔을 비교하기 위해 사용되는 코드를 CDN을 통해 제공합니다. * 런타임이란 코드가 동작하는 시점을 뜻합니다. 사용자 입장에서 보면, 사용자가 웹 페이지에서 서비스를 제공받는 동안을 런타임이라고 볼 수 있습니다. 뷰에서 CDN을 사용하는 방법은 와 같이 사용할 수 있습니다.* 빌드타임은 프로젝트가 빌드되어 빌드된 JS 파일들을 생성하는 시점을 이야기합니다. 2.npm/ yarnhttps://joshua1988.github.i..

Vue CLI 는 vue js 프로젝트 생성해주는 도구 입니다. 간단한 명령어를 콘솔에 입력했을 때 실행된다. 설치 명령어 npm install -g @vue/cli vue create "프로젝트명" cd로 설치한 프로젝트 폴더로 이동 npm run serve 또는 yarn serve package.json 에서 확인되는 serve 초기 화면 헬로월드 컴포넌트와 props 확인해 볼 수 있다. 배포용 디펜던시 vs 개발자용 디펜던시 차이 알기 config ctrl space 하면 설정할 수 있는게 많다! vue cli 에서 api 공식 문서보고 추가해가면 된다. 라이브러리, 파일 임포트 방식 설명 public 폴더 index.html 은 화면에 표시되는 껍데기 , 어플리케이션의 진입점입니다. app 보이..

클래스 바인딩 데이터 바인딩 예제 아이디 바인딩 반갑습니다. 축약어 : 을 사용하자 클래스 바인딩 데이터 바인딩 예제 아이디 바인딩 반갑습니다. style 도 가능! 클래스 바인딩 데이터 바인딩 예제 아이디 바인딩 반갑습니다.

v-if 데이터 변화에 따른 화면 변화 로그인 되었습니다. 로그인 하세요 로그인 v-on 으로 이벤트 제어 로그인 되었습니다. 로그인 하세요 로그인 v-show display : none 을 넣다 뺐다 해준다. 로그인 되었습니다. 로그인 하세요 로그인 로그인 하세요 로그인

상위 컴포넌트를 이용해야지 같은 레벨의 컴포넌트가 소통이 이뤄짐을 볼 수있다. 로그인 버튼 클릭 후! 지금 apptitle 로 소문자로 바뀐걸 볼 수 있는데 - 하이픈으로 해주면 된다. 싱글파일컴포넌트 배우고 나면 신경 안써도 되긴 합니다. 코드 해석: : app-header라는 컴포넌트를 사용하며, app-title이라는 props를 이용해 message 데이터를 전달합니다. : app-contents라는 컴포넌트를 사용합니다. login이라는 이벤트가 발생하면 receive라는 메서드를 호출합니다. appHeader 컴포넌트: appTitle이라는 props를 받아서 화면에 제목으로 출력합니다. appContents 컴포넌트: "로그인" 버튼이 있습니다. 버튼을 클릭하면 sendEvent 메서드가 실..