싱글파일 컴포넌트에 배운 내용 적용하여 개발 시작하기 hi 싱글 컴포넌트 파일을 쓰는 경우 data: function() 형식으로 data를 선언해줘야 합니다. 다른 컴포넌트를 import 하는 방법을 알아보겠습니다. {{ str }} //AppHeader.vue Header 기본 강의에선 var AppHeader라는 인스턴스에 template을 설정해줬는데 앞으론 import에 컴포넌트 name과 경로를 작성해줘서 사용해줍니다. props를 적용하는 방식도 유사합니다. props는 상위 컴포넌트의 데이터를 하위 컴포넌트가 사용할 수 있도록 vue의 reactivity 원리를 사용한 속성입니다. // AppHeader.vue {{ propsdata }} 하위 컴포넌트인 AppHeader.vue에 prop..

싱글파일 컴포넌트 한 파일에 HTML, Javascript, CSS를 관리하는 컴포넌트 방식을 싱글파일 컴포넌트라고 합니다. vetur 플러그인을 사용해 vue 단축키로 손쉽게 싱글파일 컴포넌트를 생성해줄 수 있습니다. var appHeader = { template: 'header', methods: { addNum: function() { } } } new Vue({ el: '#app', components: { 'app-header': appHeader } }); header 기본 강의에서 var appHeader로 정해줬던 컴포넌트를 싱글파일화 시킨 것입니다. 상단 코드에 new Vue로 주입해준 컴포넌트까지의 코드를 하단의 template으로 나타냈다고..

Vue CLI vue create '프로젝트 폴더명' 아래와 같이 윈도우 powershell 권한 오류가 뜰 수 있습니다. 그럴 경우 powershell을 관리자 권한로 실행하신 다음에 권한 설정을 remoteSigned로 변경해주시면 됩니다. vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\klyhy\AppData\Roaming\npm\vue.ps1 파일 을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?Li nkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + vue create vue-cli + ~~~ + CategoryInfo : 보안 오류: (:) [], ..

모르는 문법 나왔을 때 공부방법 모르는 문법이 나왔을 땐 vue.js 공식사이트로 이동합니다. 예를 들어 아래와 같이 구현한다고 했을 때, 사이트에서 사진과 같이 검색하 수 있습니다. TODO: 인풋 박스를 만들고 입력된 값을 p 태그에 출력해보세요 혼자 공부할 때 learn 탭의 Guide나 API도 잘 활용할수록 좋다고 합니다. 참고자료: Vue.js 공식사이트

watch와 computed 데이터의 변화에 따라서 특정 로직을 실행할 수 있는 라이브러리 입니다. increase {{ num }} watch와 computed의 차이 가벼운 validate 같은 로직은 computed를, 매번 돌리기 무거운 로직은 watch를 주로 씁니다. 데이터 요청과 같은 경우 watch와 methods를 사용할 수 있다는 말이죠. 참고로 공식문서에서는 웬만하면 computed를 사용하는 것을 추천합니다. computed 사용예시 computed로 warning 속성을 추가해주는 방법은 아래 코드와 같습니다. 삼항연산자를 사용해 깔끔하게 나타냈습니다. Hello 참고자료 인프런 - 캡틴판교 Vue.js 시작하기 Vue.js - computed vs watch

템플릿 문법 뷰의 템플릿 문법은 뷰로 화면을 조작하는 방법을 의미합니다. 크게 데이터 바인딩과 디렉티브로 나뉩니다. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. {{ }} 콧수염 괄호(Mustache Tag)가 가장 기본적인 방식입니다. {{ message }} new Vue({ data: { message: 'Hello Vue.js' } }) 디렉티브 v-가 붙는 속성입니다. 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. Hello Vue.js new Vue({ data: { show: falsesS } }) 위 코드는 show 데이터에 따라 Vue.js 내용이 보이거나 보이지 않는 코드입니다. Computed computed를 활용..