머털&보약의 기록

App.vue app AppHeader .vue {{ propsdata }} reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21465&tab=curriculum 학습 페이지 www.inflearn.com

하위 컴포넌트 import 후 사용 App.vue app AppHeader.vue Welcome to My App reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21464&tab=curriculum 학습 페이지 www.inflearn.com 2023.07.29 - [IT/development] - [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 App.vue app AppHeader .vue {{ propsdata }} yaga.tistory.com 2023.07.29 - [IT/development] - [Vue.js] 싱글 파일 ..

목차 터미널 명령어를 통해 Vue.js 개발환경을 더 쉽게 해주는 도구라고 보면 되고 아래와 같은 기능을 제공한다. 자바로 따지면 레거시 스프링을 사용하다 스프링부트를 만난 기분인 듯 프로젝트 생성 개발서버 실행 프로덕션 빌드 추가 플러그인 설치 vue.js의 기본 설정 및 구성을 쉽게 변경할 수 있는 설정 파일과 옵션 제공 ※ 사전에 npm 최신버전(LTS 권장) 설치 되어 있어야 함 설치(npm 또는 yarn으로 설치) 😃 npm install -g @vue/cli # OR yarn global add @vue/cli vue project 생성 🙂 vue create my-project#(생성할 프로젝트 명) # OR vue ui vue project를 생성할 경로로 이동 후 명령어 입력 시 프리셋을..

목차 v-bind(:콜론 바인딩으로 줄임 가능) {{ num }} 결과 v-if(조건문) 관리자 사용자 그 외 new Vue({ el: '#app', data: { auth: '관리자', } }) 결과 개발자 vue도구에서 data 변경 시 데이터도 변경됨 v-show(show, hide) 관리자 사용자 그 외 관리자 js코드는 위와 동일 결과 v-model(:콜론 바인딩으로 줄임 가능)(데이터 동기화) {{ userName }} new Vue({ el: '#app', data: { userName: '', } }) //아래처럼 javascript나 jQuery를 사용해서 dom에 접근해서 변경할 필요가 없음 //let userName = $("#userName").val(); //let userName..

get users {{ users }} 결과

하위(자식)컴포넌트에서 상위(부모) 컴포넌트로 데이터 전달 시 사용하는 속성 //하위컴포넌트인 app-header에 click 이벤트(v-on:click을 @click으로 표현 가능)를 설정 let appHeader = { template: 'click me', //methods 속성에 리벤트 핸들러를 생성 후 this.$emit('이벤트명')으로 이벤트 발생 시킴 //해당 이벤트는 부모 컴포넌트에서 감지해서 처리 가능 methods: { passEvent: function() { this.$emit('pass'); } }, } new Vue({ el: '#app', components: { 'app-header': appHeader, }, }) 결과 버튼 클릭 시 pass라는 이벤트가 발생하는 것 확인..

Vue.js에서 상위(부모)컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용하는 속성 const appHeader = { template: 'Header', props: ['propsdata'] } new Vue({ el: '#app', components: { 'app-header': appHeader, }, //전달하려는 데이터 data: { message: '부모 컴포넌트의 메시지', name: '아이언맨', } }) 결과 data 키값 변경 시 변경된 데이터가 자식 컴포넌트에도 표시됨 Root 컴포넌트의 데이터값 변경 시 props로 내려받은 자식 컴포넌트의 데이터에도 적용됨(reactivity) 하위 컴포넌트 추가 후 새로운 props 전달 //appContent라는 하위 컴포넌트 내..

목차 컴포넌트 등록 전역 컴포넌트 등록(플러그인이나 라이브러리 형태로 사용 시) Vue.component('app-header', { template: ' {{ message }} 결과 Root 컴포넌트를 기준으로 계층구조를 이룸 image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org 부모 컴포넌트에서 자식 컴포넌트로는 props 속성으로 데이터 전달 자식 컴포넌트에서 부모 컴포넌트로는 event로 데이터 전달 통신 규칙이 있으면 데이터 흐름 추적이 용이함 reference: https://www.inflearn.com/course/age-of..

인스턴스 뷰 인스턴스는 뷰 개발 시 필수로 생성해야 하는 코드 {{ message }} console.log(vm)에 찍힌 vue 인스턴스의 속성과 API들 new Vue({…})로 인스턴스를 만들고 인스턴스에 미리 정의된 속성과 기능들을 사용 크롬 확장프로그램(Vue.js devtools) 설치 시 브라우저에서 Vue 개발을 더 효율적으로 할 수 있음 인스턴스를 div에 붙이면 인스턴스를 적용한 엘리먼트는 Root 컴포넌트가 됨 생성자 함수 일반함수와 구분하기 위해 함수명 앞이 대문자로 되어 있고 new 연산자를 통해 인스턴스를 생성 생성자 함수에 속성, 기능들을 미리 정의해 놓고 인스턴스를 만들어서 미리 정의된 속성과 기능 사용 reference: https://www.inflearn.com/cour..

동등연산자와 일치연산자의 차이 간단히 테스트 😎 JavaScript에서 동등연산자(==, !=)를 사용할 경우 자동으로 형변환을 해서 비교하기 때문에 값만 맞으면 맞다고 하고 일치연산자(===, !==)를 사용할 경우 값과 타입까지 비교를 한다. 동영상을 보면 변수 one에는 정수 1이 들어 있고 변수 two에는 문자열 '1'이 들어 있는데 ==를 사용할 경우 true가 나오고 ===인 경우는 false가 return되는게 확인 되었다. 정확한 비교를 위해선 일치연산자를 쓰도록 하자.(비교 연산자 때문에 삽질할 미래의 너에게 하는 말)