본문 바로가기

Web/Vue5

[Vue] 컴포넌트 컴포넌트 화면의 영역을 쪼개서 재사용 할 수 있는 형태로 만드는 기능(웹 화면을 헤더, 푸터, 컨텐츠영역, 네비 등으로 분할해서 화면을 구성한다고 생각하자) 전역 컴포넌트 먼저 전역 컴포넌트를 등록 해보자. Vue.component('컴포넌트 이름', 컴포넌트 내용); 으로 등록 할 수 있다. js Vue.component('global-component', { // 컴포넌트 이름은 케밥 형식이 아니여도 된다. template: '전역 컨텐츠의 내용이 요기잉네' }); const app = new Vue({ el : '#app' }); html // 컴포넌트 이름과 같은 태그를 생성 전역 컴포넌트 렌더링 결과 지역 컴포넌트 지역 컴포넌트도 등록해보.. 2020. 8. 4.
[Vue] 반복 렌더링 & 조건 적용 유니크 키가 없는 배열 배열 조작을 가하기엔 적합하지 않지만, 단순 출력을 위한 용도로는 문제가 없다. {{ item }} data: { list : ['리스트1', '리스트2', '리스트3'] }리터럴에 직접 v-for 적용 {{ item }} 번째 P 문자열에 v-for 적용 {{ item }}data : { text: 'TEST' }반복 렌더링 const data = { monster : [ { id: 1, name: '슬라임', hp: 100 }, { id: 2, name: '고블린', hp: 200 }, { id: 3, name: '드래곤', hp: 500 } ], } const app = new.. 2020. 8. 4.
[Vue] 기본 기능 Vue 기본 기능 인스턴스 생성 뷰로 개발할 때 필수로 생성해야 하는 코드 new Vue(); 참고로 뷰 인스턴스는 변수에 담아서 확인해 볼 수 있다. const app = new Vue(); console.log(app); 뷰에서 제공해주는 기능들을 확인 가능 뷰는 생성자 안에 객체가 들어가는 형태(객체 리터럴)로 코드 작성하는걸 권한다. const obj = { 속성 : 값, 속성 : 값 } const app = new Vue(obj); 이러지 말고 const app = new Vue({ //요 안에 객체 표기법으로 내용이 들어간다. 속성 : 값, 속성 : 값 });이런 식으로 작성하자. 인스턴스에서 사용할 수 있는 속성과 api new Vue({ el: , // 인스턴스가 그려지는 화면의 시작점 d.. 2020. 8. 4.
CentOS7 + Vue CLI 3.0 프로젝트 환경 구축 vue-cli는 Vue.js 의 작업환경을 간편하게 생성해준다. 나는 CentOS7 (7.4v) 환경에서 설치 / 프로젝트 생성을 했다. 저장소 할당 후 node js / npm을 설치한다. 저장소에 추가 curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash - curl -sL https://rpm.nodesource.com/setup_10.x | bash - node js 설치 sudo yum install nodejs 버전확인 node --version npm 및 vue-cli 설치 sudo yum -y install npm sudo npm install -g @vue/cli버전확인 vue --version 혹여 vue --version 명령어에 n.. 2019. 3. 20.
Vue devtools 활성화 문제 vue.js를 사용해서 개발할때 거의 필수적으로 필요한 확장프로그램 vue devtools 에서개발자도구의 Vue 탭이 활성화되지 않는 문제점을 발견.단순히 chrome 브라우저에서의 문제점인줄 알았으나 해결책을 찾기위해 검색해보니 firefox에서도 같은 문제점이 종종 발견되는것 같았다. 위 문제는파일 url에 대한 액세스 허용활성화/비활성화를 재시도하거나, 페이지 새로고침,js 페이지 내에서 Vue.config.devtools = true; 를 해주어도 해결되지 않았지만엄청 단순한 방법으로 해결되었다. (출처 : https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js) vue.js 로드시 min 파일처럼 압축된(?) 걸 사용하지 않고 vue.js 개발버전.. 2018. 2. 26.