네발로 코딩하는 포메라니안

* v-on: == @ 1. 이벤트 수식어 1. @click.stop - 클릭 이벤트의 전파(Bubbling)를 막음 - stopPropagation()과 같음 예시) action1은 실행되지만, action2는 실행되지 않음 버블링 막기 +) stopPropagation() 사용 더보기 버블링 막기 2. @click.prevent - "기본" 이벤트의 자동 실행을 막음 ex) a태그 = 페이지 이동, form태그 = submit - preventDefault()와 같음 예시) action 메서드는 실행되지만, 페이지 이동은 일어나지 않는다. 네이버 +) preventDefault() 사용 더보기 네이버 - 두 가지 동시에 사용 가능 이동하기 - 메서드 없이, 수식어만 사용 가능 이동하기 2. 키 수식어..

이전글 2022.05.13 - [웹프로그래밍/Vue] - [Vue] 10. Vue Router 기초 [Vue] 10. Vue Router 기초 1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을.. yerinpy73.tistory.com 이전글의 코드를 보면 테스트를 위해 한 component의 template을 짧게 작성하였다. 하지만 상용소스는 이보다 훨씬 길기 때문에, 한 파일에 모든 component를 작성한다면 복잡해진다. 각 Component마다 하나의 파일로 분리해서 작성해보자. 1..

1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을 구현할 수 있다. 2. 라이브러리 불러오기 1. CDN 방식 2. NPM 방식 npm install vue-router 3. 실행 과정 router를 활용한 제일 기본적인 화면을 구성해보았다. STEP 0. component 생성 더보기 const Main = { template:'메인 페이지', }; const Board = { template:'게시판 페이지', }; STEP 1. path & component를 맵핑하는 router ins..

1. Component란? 화면의 구성 요소들을 블록처럼 분리해서 정의한 후, 한 화면을 만들 때 필요한 요소들을 붙여넣기 위해 사용된다. 이때 블럭에 해당하는 것이 Component이다. Vue Component는 Vue Instance이므로 이에 해당하는 속성들과 Life Cycle Hook 모두 사용 가능하다. *단, data는 함수 형식으로 작성해야 한다. data(){ return{ msg:"지역 컴포넌트!", } } Component 명명 방식 1. Component 이름 = 파스칼(MyComp) | 케밥(my-comp) 2. Component 사용할 때, 태그 명 = 케밥(my-comp) *Component이름을 파스칼형식으로 작성할 경우, 대문자를 기준으로 잘라 케밥으로 전환하여 태그명이 ..

1. v-on 사용하는 방식 1. Inline 방식 클릭한 횟수 = {{cnt}}번 클릭 2. method 방식 v-on은 이벤트 발생 시, 처리해야 하는 method이름을 받아서 처리한다. 클릭한 횟수 = {{cnt}}번 클릭 3. Inline + method 방식 Javascript구문으로 method를 사용하는 방식으로, 위에서 2번보다는 1번에 가까운 방식이다. 이때, 이벤트를 호출한 타겟의 정보를 event라는 객체가 가지고 있다. 클릭한 횟수 = {{cnt}}번 클릭 2. @ 사용하는 방식 v-on: = @이고, 이 방식 또한 위 3가지 방식 모두 적용 가능하다. 예시 클릭

1. el과 data - el = 해당 vue를 적용할 구역 지정 - data = DOM에 보여줄 데이터 정의 {{title}} 2. methods method안에서 vue객체를 접근할 때는 this.데이터이름으로 접근 *arrow function에서 this는 window를 가리키므로 arrow function 쓰지 않도록 주의하기 {{msgStar()}} {{cnt}} 증가 3. filter - 화면에 표시되는 텍스트 형식을 간단하게 변환하는 기능 - {{ }} 또는 v-bind 속성에서 사용 가능 {{ msg | filterName }} 1. 전역필터 el로 적용할 구역을 정해주지 않기 때문에, 어떤 id를 가진 구역에서든 가져다 사용할 수 있다. 2. 지역필터 el에 지정한 대로 id=app인 구..

1. 보간법 데이터 바인딩 방법으로 값 대입 또는 표현식이라고 할 수 있다. JavaScript에서는 Mustache 구문 즉, 이중 중괄호를 사용해서 나타낸다. {{변수명}} 특징 1. 이중 중괄호의 값은 HTML이 아닌 일반 텍스트로 데이터를 해석한다. {{msg}} 실행 화면 html로 해석되지 않아, tag까지 그대로 출력된다. html로 해석하기 위해서는 지시어 중 v-html을 사용해야 하며, 자세한 건 아래에 지시어 파트에 정리해놓았다. 특징 2. JavaScript 표현식 기능 지원 {{num+1}} {{num==0 ? "숫자는 0" : "숫자는 0이 아니다."}} {{"hello".split('').reverse().join('')}} {{msg}} 실행 화면 2. Directive : ..

1. Vue Instance Vue는 javascript기반이므로 혹은 .js파일에 작성한다. Vue Instance는 아래의 코드를 말한다. new Vue({ /*속성: 값*/ }) 속성 설명 el Vue가 적용될 element를 지정 (값 = CSS Selector | HTML 태그명) data Vue가 사용하는 정보 등록하는 곳으로, (1) 객체 형태와 (2) 함수 형태(권장)가 있다. template 화면에 표현할 HTML, CSS등을 정의하는 속성 methods 화면 로직 제어(이벤트 처리 등)와 관련된 method 정의 lifecycle 속성 (beforeCreate, created, ..., destroyed) Vue Instance의 생성 전, 생성 후, ... , 소멸 후에 실행할 로직 ..

1. Vue.js란? 쉽게 생각하면 Frontend의 프레임워크라고 할 수 있으며, 가볍다는 것이 장점이다. 2. MVVM Pattern (Model + View + ViewModel) Model : 순수 JS 객체, Logic처리 View : 웹페이지 DOM (= html) ViewModel : Vue Vue가 view와 model을 자동으로 바인딩해서, 양방향 통신을 가능하게 한다. 풀어서 설명하자면, Vue가 DOMListener를 통해 DOM을 보고 있다가 변경사항이 생기면 JS에 반영한다. 반대로 DataBinding을 통해 JS에서 Data가 변경되면 DOM에 반영한다. 3. Vue 시작하기 1. Chrome 웹스토어에서 개발자 도구 추가 웹스토어에서 vue검색(아래 사이트) > Vue.js ..