ImYena

Watch 컴포넌트의 데이터 변경 시 자동으로 핸들러 호출 유효성 검사에 용이 computed: 랑은 목적이 다름 computed: 는 기존의 데이터를 수정하여 새로운 데이터를 만드는데 목적 예시 Exam02Watch UserId Name Company Price product 객체 변경 객체 데이터 변경 감시의 경우 주의

이벤트 처리(Event Handling) Event Handling — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org v-on:이벤트="..." @이벤트="..." " " 안에는 실행문|핸들러|핸들러(arg1, ..., $event) 처리 가능 이벤트 수식어 @submit.prevent : form 태그의 기본 submit 기능 취소 자바스크립트의 event.preventDefault() 효과와 동일 @click.prevent : a 태그의 기본 이동 기능 취소 @click.ctrl : Ctrl + Click 할 경우 @keyup.enter : Enter 를 눌렀다 뗄 경우 @keyup.alt.67 : Alt + C 를 눌렀다 뗄 경우

Computed 바인딩 데이터를 가공한 새로운 값을 생성해서 바인딩할 목적으로 사용 정의 형태는 리턴값이 있는 메소드이지만, 사용은 속성처럼 사용 데이터가 변경되지 않으면 캐싱된 이정 값을 바인딩, 메소드를 재실행하지 않음 데이터가 변경되면 자동으로 메소드 실행, 리턴값으로 새로 캐싱 불필요한 캐싱을 줄임으로써 성능 향상 Computed 사용 예시 ComputedBinding ssn1: {{ssn1}} ssn2: {{ssn2}} date: {{date}} ssn: {{computedSsn}} 결과:

데이터 바인딩(Data Binding) 단방향 바인딩(One-way binding) 컴포넌트의 데이터가 변경되면 UI요소 내용 변경 양방향 바인딩(two-way binding) 컴포넌트의 데이터 변경 ↔ UI 요소의 변경 주로 폼 데이터와 폼 양식 간의 바인딩 콧수염 표현식 데이터 바인딩(Mustache Data Binding) {{...}} {{ 데이터 객체 속성명 }} : {{data}} {{ 삼항연산식 }} : {{(data>0)?"Yes":"No"}} {{ 하나의 값을 산출하는 연산식 }} : {{data+1}} {{ 하나의 값을 리턴하는 메소드 호출 }} : {{getMethod()}} {{ computed 속성명 }} : {{getMethod}} 디렉티브 데이터 바인딩(Directive Dat..

[Vue.js] 컴포넌트란?, 뷰와 컴포넌트 컴포넌트(Component) 재사용 혹은 조립 가능한 독립적인 UI 객체 HTML 조각( ) + JavaScrip( 뷰(View)와 컴포넌트(Component) 공통점 .vue(싱글 파일 컴포넌트) 파일 확장명 사용 둘다 컴포넌트이므로 파일 작성. imyena.tistory.com 이어서) 싱글 파일 컴포넌트(Single File Component) HTML, CSS, JS 코드를 한 파일에서 관리하는 방법으로 vue 확장자를 가진 파일 .vue 파일은 컴파일 되면 자바 코드로 변환되기 때문에 하나의 모듈임 공통 요소 컴포넌트: src/components/....vue 화면 컴포넌트: src/views/....vue 싱글 파일 컴포넌트 구조 컴포넌트가 렌더링될..

$router 메소드를 이용해서 라우트 네비게이션 기능 수행 예시 this.$router.push(경로) this.$router.go(-1) : 뒤로가기 $route 현재 URL에 대한 정보를 코드에서 얻을 수 있음 예시 this.$route.query.변수명

URL 데이터 전달 방식 params(path variables)로 전달 라우트 정의 { path: "/menu01/exam06view/:bno", name: "menu01_exam06view", component: () => import(/* webpackChunkName: "menu01" */ '../views/menu01/Exam06View'), props: true } props: true로 설정하면, $route.params가 컴포넌트의 props에 설정됨 Exam05View Exam05View params(path variables)로 전달 exam06view/1 exam06view/3 exam06view/5 exam06view/7 Exam06View: params 데이터 얻기 Exam06Vi..

Props(Property) 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방식 컴포넌트 내에서 props를 접근하는 것은 소유하는 것을 의미하는 것은 아니므로, 값 수정은 불가능 리액티브(reactive)-반응형 Data 각 컴포넌트의 메모리 리액티브(reactive)-반응형 사용 예시 {{data}} 데이터 변경 위와 같이 사용한 data는 private이며 컴포넌트 자신만을 위해서만 사용 가능 다른 컴포넌트는 접근 불가능 참고) Props vs Data in Vue Vue에서는 변수를 저장하는 두 가지 방법으로 props와 data가 있다. 이들이 비슷한 일을 하는 것처럼 보여 처음에는 헷갈릴 수 있으며, 각각을 어떤 때에 사용해야 하는 지 명확하지 않을 수 있다. kinchi22.githu..

뷰/컴포넌트 전환 방식 1. 기본적인 뷰 전환 라우트 정의 { path: '/menu01/exam02view', name: 'menu01_exam02view', component: () => import(/* webpackChunkName: "menu01" */ '../views/menu01/Exam02View') } 1. 선언적 방식 import(/* webpackChunkName: "menu01" */ '../views/menu01/Exam03View'), //중첩된 라우트 뷰 children: [ { path: "subacomponent", component: () => import(/* webpackChunkName: "menu01" */ '../components/menu01/SubACompon..

Vue 라우터(Router) Vue에서 라우팅 기능을 제공하는 공식 라이브러리 라우트(경로)를 찾아내는 역할을 하는 장비 Vue Router router.vuejs.org 라우팅(Routing) URL 주소에 따라 페이지가 전환되는 것 Vue는 URL 주소에 따라 화면 컴포넌트인 View가 전환 라우트(경로)를 찾는 행위 라우트(Route) URL 주소, 경로 기능 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 설치 방식 1..