기능 설명 기존 목록 불러오기 목록 추가기능 (이름, 수량) 목록에서 체크리스트 체크/체크 해제 기능 중요도 확인 기능 장바구니 목록 {{item.name}} / {{item.num}} / {{item.important}} {{item.name}} / {{item.num}} / {{item.important}} name: num: 중요해?{{important}} 추가
v-on:click="a" 코드는 이벤트 핸들러로써 a() 메서드 함수를 호출하는 형태로 이벤트 핸들러를 지정한다. 그래서 클릭 이벤트가 발생하였을 때 a() 메서드를 호출한다. v-on:click="a()" 도 이벤트 핸들러로써 a()메서드 함수를 호출하는 형태이다. 이 두가지 차이를 자세하게 다뤄보려고 한다. v-on:click="a()" v-on:click="a" 메서드 호출 시점 해당 요소가 렌더링될 때마다 메서드가 호출된다. 이는 a() 메서드를 템플릿에서 직접 호출하는 것과 유사한 동작을 한다. 메서드 이름만을 이벤트 핸들러로 지정하는 방식은 이벤트가 발생했을 때 메서드가 호출된다. 따라서 이벤트가 발생해야만 메서드가 실행된다. 메서드 인자 전달 v-on:click="a(arg)">와 같이 메..
Vue란? 1편 보러가가기 ⬇️ Vue.js 사용법 1 (CDN 코드 이용) Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서드로 구성된다. 보다 동적이고 상호 호환적인 웹 애플리 skylarcoding.tistory.com Directive (지시자) Vue Events vue event 는 vue의 디렉티브(지시자) 중 하나인 'v-on' 또는 '@' 기호를 사용하여 이벤트 처리를 할 수 있다. vue events 디렉티브의 기능은 Dom 이벤트를 감지하고 Vue 인스턴스의 메소드와 연결하는 것이다. v-on:click click click 버튼을 누르시오 cnt:{{cnt}} ..
Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서드로 구성된다. 보다 동적이고 상호 호환적인 웹 애플리케이션을 개발하기 위해 사용된다. 사용방법 1. CDN 코드로 사용해서 빠르게 호출 2. 다운로드 후 설치 Node.js 설치 -> Vue 설치 .. 등의 과정을 거쳐 설치하여 사용한다. CDN 코드로 호출하는 것보다 더 많은 기능을 사용할 수 있다. 1. HTML 페이지 생성 2. div 생성 div 로 id 를 하나 부여하고, 해당영역을 Vue Application으로 할당해야한다. 3. Vue 어플리케이션 생성자 생성자를 선언하여 뷰 앱을 생성한다. 변수를 만들고 값을 할당하여..
