본문 바로가기

전체 글99

[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.
[Vue.js] 리스트 변경 ● 리스트에 요소 추가 이름 추가하기 ID.{{ item.id }} {{ item.name }} 나이{{item.age}} var app = new Vue({ el: '#app', data: { name: '김민호', list: [ { id: 1, name: '홍길동', age: 25}, { id: 2, name: '김영희', age: 19}, { id: 3, name: '김철수', age: 30} ] }, methods: { //추가 버튼을 클릭했을 때의 핸들러 doAdd: function(){ //리스트 내부에서 가장 큰 ID 추출하기 var maxId = this.list.reduce(function(a, b){ return a > b.id ? a : b.id }, 0 ) //새로운 사람을 리스트에.. 2024. 1. 17.
[Vue.js] 반복렌더링 조건 ● 조건으로 클래스 조작 ID.{{ item.id }} {{ item.name }} HP.{{item.age}} 청소년입니다. var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: '홍길동', age: 25}, { id: 2, name: '김영희', age: 19}, { id: 3, name: '김철수', age: 30} ] } }) ● v-for 출력조건 반복요소에 직접 v-if 디렉티브를 적용 ID.{{ item.id }} {{ item.name }} HP.{{item.age}} 2024. 1. 17.
728x90

티스토리툴바