Vue에서 헷갈리는 두 속성 정리! 🐠 methods 속성 methods 속성 화면 로직 제어와 관련된 메소드를 정의하는 속성. 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있음. methods 속성을 활용하여 이벤트에 의한 메소드를 호출해보자 @mouseover → v-on:mouseover을 축약한 것 :src → v-bind:src를 축약한 것 const main = new Vue({ el : "#main", data : { kakaoImg : "img1.png" }, methods : { // 마우스오버 이벤트 overImg(){ this.kakaoImg = "img2.png"; }, // 마우스아웃 이벤트 outImg(){ this.kakaoImg = "img1.png"; } ..
Vue 카테고리 추가! 앞으로 Vue 공부한 내용을 정리해서 올려야지 Vue 는 무엇인가?MVVM 패턴의 뷰 모델(ViewModel) 레이어에 해당되는 화면(View)단 라이브러리 특징 1 : DOM Listeners - 사용자의 입력 이벤트를 Listener가 받고 자바스크립트 특정 로직을 실행특징 2 : Data Bindings - 데이터가 바뀌면 데이터 바인딩으로 화면에 반영특징 3 : Reactivity (반응성) - 데이터의 변화를 라이브러리에서 감지해서 바로 화면에 그려짐 0. Vue 시작하기일단 스크립트로 vue 불러오기 1. Vue 인스턴스 생성해보기 el : "#main" → 엘리먼트는 #main 즉, 아이디 선택자가 #main인 문서 객체를 지정 + 거기에 vue 인스턴스 생성 d..
Javascript 🤠 프로토타입 일반적으로 객체는 재활용 어렵다! 그래서 객체를 재활용할 수 있는 구조화 시키는 것이 필요! 그것이 바로 프로토타입화 프로토타입 : 재사용을 통해 객체를 생성하는 역할을 담당 const Car = (function(){ // 생성자 파트 - 외부로부터 전달된 데이터들을 함수구문 내부에서 활용 function Car(name1, color1){ this.name = name1; this.color = color1; } // 프로토타입 파트 Car.prototype.start = function(){ console.log(`${this.color} ${this.name} 시동을 건다. `); this.drive(); } Car.prototype.drive = function..
Javascript 이벤트 만만하게 봐서 미안해 .. 속이 깊은 친구였구나 넌 🎉 이벤트 이벤트란 웹페이지에서 발생하는 대부분의 일들을 말함 (버튼클릭, 스크롤, 키보드입력 등등!) 이벤트 핸들링은 자바스크립트를 통해 이벤트를 다루는 일 이벤트 핸들러는 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드, 이벤트 리스너라고도 한다. 🎉 이벤트 핸들러 등록 HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler') 를 통해서 이벤트 핸들러를 등록 가능! 🎉 이벤트 핸들러 삭제 addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다면, Element.removeEventListner('..