vue.js5 [Vue] Vue Component Vue Component 컴포넌트(Component) Vue의 가장 강력한 기능 중 하나 HTML Element를 확장하여 재사용 가능한 코드를 캡슐화 Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용 Life Cycle Hook 사용가능 전역컴포넌트와 지역컴포넌트 존재 전역컴포넌트 등록 ** 케밥표기법 : 케밥이 꽂혀있는것처럼 -를 이용하여 이름을 표기, 전부 소문자 지역컴포넌트 등록 Component Template {{msg}} Component Data 공유 전역변수와 지역변수에 따른 Data공유 - count 가 전역일 경우 컴포넌트 데이터 공유 문제 {{ count }} 클릭 - count 가 지역일 경우 컴포넌트 데이터 공유 문제 해결 {{ count.. 2022. 5. 10. [Vue] Vue event Vue event Vue event - Dom Event를 청취하기 위해 v-on directive를 사용 - method를 이용한 event handling - inline event handling v-on - v-on directive를 사용하여 DOM이벤트를 듣고 트리거가 될 때 JavaScript를 실행할 수 있다. 클릭 위 버튼을 클릭한 횟수는 {{counter}} 번 입니다. method event handler - 이벤트 발생 시 처리로직을 v-on에 넣기 힘들기 때문에 이벤트 발생 시 처리해야 하는 method의 이름을 받아 처리 Greet inline method handler - 메소드이름을 직접 바인딩 하는 대신 인라인 JavaScript구문에 메소드를 사용할 수도 있다. - 원본 .. 2022. 5. 10. [Vue] Vue Instance Vue Instance속성 Vue method - method안에서 data는 "this.데이터이름"으로 접근 가능 data : {{message}} method kor : {{helloKor()}} method eng : {{helloEng()}} * method안에서도 함수끼리 접근할땐 this.키워드를 사용한다. body> method test 아이디 이름 등록 filter - 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 - 중괄호보간법( {{ }} ) 또는 v-bind속성에서 사용가능 결과 : {{ msg | count1 }} {{ msg | count2('문자를 넣어보세요') }} 금액 : 전화번호 : {{ msg1 | price | won }} {{ msg2 | mobile }} co.. 2022. 5. 10. [Vue] Vue Directive Vue Directive 보간법(interpolation) 문자열 - 데이터 바인딩의 가장 기본형태는 "Mustache"구문 (이중 중괄호)을 사용한 텍스트 보간 - v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행 실습1 : v-once 사용 {{message}} {{message}} -> message데이터 수정 시 v-once 디렉티브를 사용한 h2구문은 변하지 않은것을 확인할 수 있다. (참고로 수정은 Vue.js devtools라는 구글확장프로그램을 사용하였다) 원시 HTML - 이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석 - 실제 HTML을 출력하려면 v-html 디렉티브를 사용 실습2: v-html 디렉티브 통해 html 구문 출력 ( 해당.. 2022. 5. 4. [Vue] Vue.js란 Vue.js Vue.js Evan You에 의해 만들어짐 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 progressive Framework Vue.js특징 - Approachable (접근성) - Versatile (유연성) - Performant (고성능) MVVM Pattern Model + View + ViewModel Model : 순수 자바스크립트 객체 View : 웹페이지의 DOM ViewModel : Vue의 역할 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 JQuery와 같은 라이브러리를 이용하였으나, Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다. 실습 1 : Hello VueJS 출력하기 {{messa.. 2022. 5. 3. 이전 1 다음
