method 속성, computed 속성

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"; } ..

• format_list_bulleted 🧠 저장/Vue
• · 2022. 9. 22.
• textsms

Vue 시작하기 + 기초 디렉티브(text, bind, model, if, for, on)

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..

• format_list_bulleted 🧠 저장/Vue
• · 2022. 9. 20.
• textsms