본문 바로가기

분류 전체보기101

[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] 컴포넌트 통신 스코프: 영향을 미칠 수 있는 범위 this.message // 스코프 내부의 데이터 this.update() //스코프 내부의 메서드 스코프는 다른 기능에 실수로 영향을 미치지 않게 하기 위한 것. 컴포넌트끼리 데이터를 공유하거나 연동하려면, 1. props 와 사용자 정의 이벤트를 사용해서 부모 자식끼리 통신하기 2. 부모 자식 관계가 아닌 경우 이벤트 버스를 사용해서 통신하기 3. Vuex를 사용한 상태관리 child-component는 parent-component 의 자식 컴포넌트 Vue.component('parent-component',{ template: '' }) ● 부모 컴포넌트의 템플릿에서 자식 컴포넌트를 사용할 때, 속성으로 컴포넌트에 데이터를 가지도록 할 수 있다 ▼부모 측 템플릿.. 2024. 1. 19.
[Vue.js] 컴포넌트 정의방법 Vue.component 메서드로 등록하면 모든 컴포넌트에서 사용할 수 있음 메서드의 매개변수로 전달되는 것 (사용자 정의 태그로 사용할 이름, 컴포넌트의 옵션 객체) Vue.component('comp-child', { template: 'MyComponent' }); var app = new Vue({ el: '#app', }); 등록한 컴포넌트를 사용하려면 부모가 되는 컴포넌트의 템플릿에 사용자 정의 태그(컴포넌트 태그)를 작성함 2024. 1. 19.
[Vue.js] 컴포넌트 정의 타이밍 1. 컴포넌트를 정의하는 타이밍 - 컴포넌트는 루트 인스턴스가 생성되기 전에 정의해야한다. new Vue() 하기 전에 정의하기. var myComponent = { template: 'MyComponent' } new Vue({ el: '#app', components: { 'my-component': myComponent } }) 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.
[Vue.js] input 입력 핸들링 v-model, 체크박스,radio, select ● v-model 사용법 - v-model 디렉티브 값에 사용자입력과 동기화할 데이터를 지정함. input 값과 message속성을 바인딩 ▼ input의 값을 변경하면, 동기화되면서 message 문자 변경됨 {{ message }} var app = new Vue({ el: '#app', data: { message: 'Hello !' } }) - 체크박스 하나의 요소를 선택하는 체크박스는 기본적으로 데이터를 boolean 으로 다룸 -> 체크 상태에 따라 요소에 값을 설정하고 싶은 경우에는 true-value, false-value 라는 특별한 속성을 사용함 {{ val }} var app = new Vue({ el: '#app', data: { val: true } }) 실제 렌더링 ▼ 여러 개의.. 2024. 1. 18.
[Vue.js] 메서드 이벤트, 인라인 메서드 이벤트 1. 메서드 이벤트 핸들러 메서드 이벤트 핸들러는 컴포넌트의 methods 옵션에 정의되어 있는 메서드 이름을 지정함. 클릭 => 버튼의 클릭 이벤트 핸들러를 handleClick 메서드로 지정하는 코드 v-on 디렉티브는 @ 로도 사용가능함 클릭 var app = new Vue({ el: '#app', methods: { handleClick: function(){ alert('클릭') } } }) 2. 인라인 메서드 핸들링 - 디렉티브의 값에 자바스크립트 식을 직접 작성하는 것 클릭 2024. 1. 18.
[Vue.js] 제어 디렉티브 v-pre v-once v-text v-html 1. v-pre : 템플릿 컴파일 생략 - 자식 컴포넌트를 포함한 내부의 HTM을 컴파일하지 않고, 정적콘텐츠로 다룰 때 사용함 Hello {{ message }} => Mustache 와 디렉티브 등이 그대로 출력된다. 2. v-once : 한 번만 바인딩 - 템플릿을 한 번만 컴파일하고 이후에는 정적 콘텐츠로 다루고 싶을 때 사용 - 렌더링 후에 message 속성이 변경되어도 DOM은 변경되지 않음 3.v-text - 텍스트 콘텐츠가 단일 Mustache만으로 구성되어 있는 경우 v-text 디렉티브로 대신 사용 가능함 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, }) 4. v-html :HTML 태그를 그대로 렌더링 va.. 2024. 1. 18.
[Vue.js] $el $refs ● $el - 컴포넌트 템플릿을 감싸고 있는 루트 요소는 $el (element) 을 사용해서 DOM을 직접 참조할 수 있음 Hello var app = new Vue({ el: '#app', mounted: function(){ console.log(this.$el) } }) => 라이프 사이클 중 mounted 이후부터 사용할 수 있음. ● $ref - 루트 이외의 요소는 ref와 $ref 를 사용해서 참조할 수 있음 템플릿에서 대상 요소에 ref 속성을 지정하고 이름을 붙여줌 Hello var app = new Vue({ el: '#app', mounted: function(){ console.log(this.$refs.hello) //p요소를 DOM으로 다룰 수 있음 } }) 2024. 1. 17.
728x90

티스토리툴바