본문 바로가기

Vue.js20

[Vue.js] Vue 프로젝트 파일구조 node_modules: npm으로 설치된 패키지 파일들이 모여 있는 디렉토리 public: 웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리 src/assets: 이미지, css 등을 관리하는 디렉토리 src/components: Vue 컴포넌트 파일이 모여있는 디렉토리 App.vue: 최상위(Root) 컴포넌트 main.js: 가장 먼저 실행되는 자바스크립트 파일로, Vue 인스턴스를 생성하는 역할 2024. 1. 26.
[Vue.js] 프로젝트 설치 vue CLI 설치 npm install -g vue-cli 버전확인 vue --version vue create '프로젝트 이름' vue 3 버전 -> Default (Vue 3 Preview) 선택 To get started: cd '프로젝트이름' npm run serve 뜨면 설치가 완료됨 터미널에 npm run serve 하고 localhost:8080 가면 vue프로젝트 확인가능 처음에 이런 오류가 떴는데, npm install 해주고 다시 npm run dev 하니 해결됨 . 기본 포트 외 다른 포트를 사용하려면 npm run serve -- --port포트번호 로 직접 지정할 수 있음 ex) npm run serve -- --port 3000 2024. 1. 22.
[Vue.js] 스코프 css example 2024. 1. 21.
[Vue.js] 부모가 가진 데이터 조작하기 props를 마음대로 변경하면 오류가 발생하는데, $emit과 사용자 정의 이벤트를 사용할 수 있다. ▼부모의 템플릿 v-on:do-click 에서 do-click을 카멜케이스(doClick)로 작성하면 오류가난다. v-on:do-click은 자식 컴포넌트 methods 중 do-click 을 호출한다. props로 ID 받고, $emit으로 매개변수를 전달할 수 있다. //자식이 자신의 이벤트 실행 Vue.component('child-component', { template: '{{ name }} 나이:{{ age }}\ 나이확인', props:{ id: Number, name: String, age: Number}, methods: { //버튼 클릭 이벤트 핸들러에서 $emit으로 doClick 호.. 2024. 1. 21.
[Vue.js] $emit 자식->부모 이벤트 잡기 1. 부모에서 자식 사용자 정의 태그에서 v-on 디렉티브로 이벤트를 핸들한다. 2. 자식은 $emit 으로 자신의 이벤트인 childs-event 를 실행한다. $emit 의 두 번째 이후의 매개변수로 임의의 데이터를 지정할 수 있다. 3. 부모는 자식 이벤트를 통지받아 미리 등록한 핸들러를 호출한다. //자식이 자신의 이벤트 실행 Vue.component('child-component', { template: '이벤트 호출하기', methods: { //버튼 클릭 이벤트 핸들러에서 childs-event 호출하기 handleClick: function(){ this.$emit('childs-event') } } }) //부모쪽에서 이벤트 받기 new Vue({ el:'#app', methods: { .. 2024. 1. 21.
[Vue.js] props 받을 자료형 지정 props 로 받을 자료형은 지정하는 것이 좋다. 지정한 자료형이 아닌 값일 경우, 에러를 쉽게 찾을 수 있다. Vue.component('child-component', { props: { val: String //문자열 자료형의 데이터만 허가 } }) props는 받을 자료형 이외에도 디폴트값 지정도 가능함. ▼ Vue.js 공식 가이드에 나와있는 props 샘플 Vue.component('child-component', { props: { //기본적인 자료형 확인('null' 은 어떤 자료형에서도 받을 수 있음) propA: Number, //여러 개의 자료형을 지정할 수도 있음 propB: [String, Number], //필수 문자열 propC: { type: String, required: .. 2024. 1. 21.
[Vue.js] 컴포넌트를 리스트 렌더링하기 v-for ● 컴포넌트에 v-for 디렉티브 사용하기 //자식 컴포넌트 Vue.component('child-component', { template: '{{ name }} 나이: {{ age }}', props: ['name', 'age'] }) //부모 컴포넌트 new Vue({ el:'#app', data: { list: [ {id: 1, name: '홍길동', age: 30}, {id: 2, name: '김민지', age: 18}, {id: 3, name: '이지호', age: 24} ] } }) 리스트의 요소가 컴포넌트의 속성으로 사용된다. ● props로 전달받은 데이터는 마음대로 변경하면 안됨 //자식 컴포넌트 Vue.component('child-component', { template: '{{ na.. 2024. 1. 21.
[Vue.js] 컴포넌트 정의방법 Vue.component 메서드로 등록하면 모든 컴포넌트에서 사용할 수 있음 메서드의 매개변수로 전달되는 것 (사용자 정의 태그로 사용할 이름, 컴포넌트의 옵션 객체) Vue.component('comp-child', { template: 'MyComponent' }); var app = new Vue({ el: '#app', }); 등록한 컴포넌트를 사용하려면 부모가 되는 컴포넌트의 템플릿에 사용자 정의 태그(컴포넌트 태그)를 작성함 2024. 1. 19.
[Vue.js] 이미지 파일 파일타입은 v-model 디렉티브 사용불가 리액티브 데이터와 동기화할때는 change 이벤트를 바인딩 해야함 var app = new Vue({ el: '#app', data: { preview: '' }, methods: { handleChange: function(event) { var file = event.target.files[0] if(file && file.type.match(/^image\/(png|jpeg)$/)){ this.preview = window.URL.createObjectURL(file) } } } }) 이미지가 변경되면 화면에 프리뷰를 출력한다. ▼ 2024. 1. 18.
728x90

티스토리툴바