vue
-
[Vus.js] Vue 템플릿과 데이터 바인딩하는 법Vue 2019. 1. 27. 18:02
Vue 탬플릿이란? 마크업 요소와 Vue인스턴스 속성을 연결하여 HTML로 변환해주는 속성 마크업요소: html,css등Vue 인스턴스 속성: 데이터, 로직 데이터 바인딩 방법 2가지가 있다. {{ }} - 콧수염 괄호 v-bind - vue뿐만 아니라 다른언어나 프레임워크에서도 자주사용되는 템플릿 문법이다 - vue 데이터가 변경되어도 값을 바꾸고 싶지 않다면 v-once 속성을 사용한다. - {{ }}안에서 자바스크립트 표현식작성이 가능함 - 변수선언 불가 - 분기문은 if문 사용불가, 삼항연산자 사용가능 - 복잡한 연산은 vue인스턴스의 computed속성을 이용하여 작성한다.(캐싱효과있음) - id, class, style등 html속성값에 vue 데이터 값을 연결할 때 사 용 하는 방식 - v-..
-
[Vue.js] 네임드뷰Vue 2019. 1. 21. 22:40
네임드뷰란? 특정 페이지로 이동 했을 때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식 - 네스티드 라우터와의 차이점은 화면을 구성하는 컴포넌트수가 적을땐 유리하지만, 네임드뷰는 컴포넌트수가 많을때 유리하다. 예제 14행 : name이 없는 경우 default로 맵핑된다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344 네임드 뷰 var Header = {template: '여기는 머리'}; var Body = {template: '여기는 바디'}; var Footer = {template: '여기는 발'}; var router = new VueRouter({ routes: [{ path:'/', compon..
-
[Vue.js] 네스티 라우터란?JS 2019. 1. 20. 23:57
네스티 라우터, 네임드 뷰는 여러개의 컴포넌트를 동시에 표시 할 수 있는 라우터이다. 네스티 라우터란?라우터로 페이지이동을 할때 최소 2개이상의 컴포넌트를 화면에 나타내는 기능 -구조는 상위컴포넌트 1개에 하위컴포넌트 1개를 포함하는 구조 예를 들어 localhost:8080/user //user가 상위localhost:8080/user/detail //detail은 하위localhost:8080/user/create //create도 하위 이런식으로 접근이 가능함. -기본 라우터와 네스티라우터의 차이점은 최상위 컴포넌트에도 가 있고, 최상위 컴포넌트의 하위 컴포넌트에도가 있다는 것. 예제 30행, 34행의 path=url에 따라 해당 컴포넌트를 보여지게 된다. 12345678910111213141516..
-
[Vue.js] Vue 라우터란?Vue 2019. 1. 20. 23:02
뷰 라우터란? vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리. 태그 설명 페이지 이동 태그, 화면에선 태그로 치환됨 페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역 라우팅이란? 웹페이지간의 이동방법을 말함. - 페이지를 이동할때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시 클라이언트의 라우팅을 이용하여 화면을 갱신함, 이러한 방식을 SPA라고도 함(Single Page Application) - 라우팅을 이용하면 화면간의 전환을 매끄럽게 할 수 있음 - 뷰,리액트,앵귤러 모두 라우팅을 이용하여 화면을 전환함. 예제 - 뷰 라우터 라이브러리를 사용하기 위해서는 7행의 라우터 CDN 추가를 해준다.- 35행의 $moun..
-
[Vue.js] Vue 컴포넌트 데이터 주고 받기Vue 2019. 1. 14. 00:52
"vue 프레임워크의 기본적인 데이터 전달 방식은 상위-하위간 데이터 전달이다." 기본 방식은 아래와 같다상위 -> 하위 (props 전달)하위 -> 상위 (이벤트 전달) 각각 컴포넌트들은 고유한 유효범위를 가지고 있어 직접 다른 컴포넌트 값을 참조 할 수 없음아래코드 참고 ㅎㅎ 123456789101112131415161718192021222324252627282930313233343536373839404142434445 컴포넌트 간의 통신! var obj1 = { template : ' 첫번째 지역 컴포넌트: {{result}} ', data : function(){ return { result : 12345 } } }; var obj2 ={ template : ' 두번째 지역 컴포넌트: {{resu..
-
[Vue.js] Vue 인스턴스의 라이프 사이클Vue 2019. 1. 13. 23:28
vue 라이프 사이클 크게 4단계로 구별됨 1. 인스턴스 생성2. 생선된 인스턴스 화면에 부탁3. 화면에 부착된 인스턴스 갱신4. 인스턴스 소멸 라이프사이클 속성"인스턴스의 상태에 따라 호출 할 수 있는 속성들을 라이프 사이클 속성이라고 한다" beforCreate- 인스턴스 생성되고 가장 먼저 실행되는 단계- data 속성, method속성 아직 정의 되지않음- DOM으로 접근 불가 create- data속성, method속성 정의됨- 화면에 부착되기 전이기 때문에 template속성을 DOM으로 접근 불가- 서버에서 데이터를 요청하여 받아오는 로직을 수행하기 좋음 beforeMount- template속성을 render()함수로 변환- el속성에 지정한 DOM요소에 인스턴스를 부착하기전- rander..
-
[Vue.js] Vue 컴포넌트란?Vue 2019. 1. 13. 21:04
Vue 컴포넌트란?조합하여 화면을 구성할 수 있는 블록을 말함 vue 컴포넌트의 장점?=> 빠르게 구조화하여 일괄적인 패턴으로 개발 가능 전역 컴포넌트 사용방법 전역 컴포넌트 - .component()를 호출한다.1234567891011121314151617181920212223 등록 Vue.component('my-component',{ // 전연 컴포넌트 등록 template : ' 전역컴포넌트 등록완료! ' }); new Vue({ el: '#app' }); Colored by Color Scriptercs 전역 컴포넌트가 화면에 나타나는 과정1. 뷰 라이브러리 파일 로딩2. 뷰 생성자로 컴포넌트 등록3. 인스턴스 객체 생성4. 특정화면 요소에 인스턴스 부착5. 인스턴스 내용반환 지역 컴포넌트 사용..
-
[Vue.js] Vue.js란?Vue 2018. 12. 5. 22:01
Vue.js란?=프런트앤드 프레임워크임. 앵귤러를 좀 더 쉽게 사용하고자 만든 프레임워크 vue의 장점1.배우기가 쉬움 2. 리액트, 앵귤러에 비해 성능이 우수하고, 빠름 3. 리액트의 장점, 앵귤러의 장점을 모두 가지고 있음 리액트의 장점 = 가상 DOM기반의 렌더링 앵귤러의 장점 = 데이터 바인딩 왜 배워야하나?- 네이버에서 친절하게 정리해 줌( 자바스크립트 동향)- 요즘 개발구인공고를 보면 앵귤러, 리액트, 뷰 이3중에 하나는 대부분 있더라.. 여기서 리액트>앵귤러>뷰 순으로 학습곡선이 높기때문에 쉬운거 부터 시작함.- Vue.js의 구글 트랜드 검색 자료 MVVM에서 Vue.js의 위치 Vue.js는 MVVM패턴의 뷰모델에 해당하는 화면단 라이브러리임