뷰
-
[Vue.js] 뷰 디렉티브란?Vue 2019. 1. 27. 23:58
뷰 디렉티브란? v-접두사 가지는 모든 속성을 의미함. JSTL의 foreach나 if문 처럼 화면 요소를 더 쉽게 조작하기 위해 사용한다. 디렉티브 이름 역할 v-if if문과 같다 true,false값에 따라 화면에 표시한다. v-for 지정한 뷰 데이터의 개수만큼 반복하여 출력 v-show css의 display:none 으로 속성을 준다. if문의 경우 태그를 완전삭제함. v-bind vue 데이터속성과 html태그 기본속성을 연결해줌 v-on 화면요소의 이벤트를 감지하여 처리 할 때 사용함 v-model form에서 주로 사용되는 속성. form태그에 입력한 값을 vue인스턴스의 데이터와 동기화함.화면에 입력된 값을 서버로 보낼때 사용.(watch와 같은 고급 속성을 이용하여 추가 로직 수행 가..
-
[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. 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. 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패턴의 뷰모델에 해당하는 화면단 라이브러리임