분류 전체보기115 Vue- 자주쓰이는 디렉티브 디렉티브(Directive): html 태그 안의 v-접두사를 가진 모든 속성 v-bind : html 속성 값에 뷰 데이터 값을 연결할 때 사용 아이디데이터 클래스데이터 스타일데이터 new Vue({ el:'#app', data:{ id_data:"tmp_id", class_data:"tmp_class", style_data:"tmp_style", } }); 전역 컴포넌트 같은 경우 이렇게 선언 가능하다. -> 전역 컴포넌트의 props 속성에 prop_data가 명시되어 있어야 한다. v-bind:는 :로 축약해서 사용할 수 있되 혼동을 줄 수 있으므로 혼용해서 사용하진 말자. v-if : 값에 따라(true, false) 보이거나 보이지 않거나 flag=true면 보임 v-for : 반복문 설명을 .. 2022. 10. 6. LIS문제 -DP LIS문제: 최장 증가 부분 수열 배열의 일부분을 순서대로 추출했을 때 크기가 커지는 배열들의 집합 중에서 가장 길이가 긴 수열 찾기 문제의 답은 여러개가 될 수 있다. [8, 2, 6, 5, 4, 9, 2, 7, 5, 1] 배열이 있다면 [2, 4, 9] 배열은 정답 후보에 있을 수 있다. 생각해보면 커지는 것을 발견하면 선택하는 식으로 해결한다면? [1,2,9, ~~~] 에서 9를 선택했는데 ~~~부분이 3,4,5,6,7 이렇게 더 긴 조합을 생성할 수 있으므로 유의해야 한다. DP [8, 2, 6, 5, 4, 9, 2, 7, 5, 1] 8이 배열의 마지막인 배열들 중 가장 길이가 긴 것은 [8] 하나밖에 없다. [8, 2, 6, 5, 4, 9, 2, 7, 5, 1] 2가 배열의 마지막인 부분배열들 .. 2022. 10. 6. Vue-라우터 사용법 라우터 라우팅: 웹 페이지 간의 이동방법, 주로 SPA에서 주로 사용함 라우팅 사용시 매끄러운 화면 전환 가능 Vue 라우터 관련 특수 태그 URL : 페이지 이동에 사용하는 태그 : URL값에 따라 갱신되는 영역 var view1 = {template:'view1'}; var view2 = {template:'view2'}; var routes = [ {path: '/view1', component:view1}, {path: '/view2', component:view2}, ]; var router = new VueRouter({routes}); var app = new Vue({router}).$mount('#app'); view1 view2 view1 view2 링크를 클릭시 router-view영.. 2022. 10. 6. Vue- 컴포넌트간의 통신 컴포넌트 기본개념 같은 페이지에 구성되어있는 컴포넌트라도 데이터를 공유하기는 어렵다. 각자의 유효범위가 존재함 컴포넌트간의 통신 방법에는 상.하위 컴포넌트 관계, 같은 레벨의 컴포넌트 간 통신으로 구분 상.하위 컴포넌트간의 데이터 전달 상위 -> 하위 : props 전달 하위 -> 상위: 이벤트 발생 상위->하위 컴포넌트 데이터전달 예제코드 new Vue({ el: '#app', data: { meg: 'hello' } }); Vue.component('child',{ props: ['data'], template: '{{data}}', }); #app 컴포넌트영역의 msg는 hello값을 가진다. child컴포넌트는 #app안에 구성되어있는 전역컴포넌트이다. 또한 하위 컴포넌트이다. child컴포넌트는.. 2022. 10. 6. Vue- 컴포넌트 컴포넌트: 화면을 구성할 수있는 블록 -> 화면의 구조화, 일괄적인 패턴으로 개발가능 앞서 data, 메소드 등 Vue 를 구성할 수 있는 형식을 미리 만들고 컴포넌트에 추가함으로 코드 재활용 높음 전역 컴포넌트: 어느 범위든 지정한 컴포넌트 태그를 적용하고 싶을 때 사용가능 지역 컴포넌트: 특정 범위 내의 컴포넌트 태그에만 적용하도록 할 때 사용가능하다. 컴포넌트 안에 template, data, method 등 정의 가능하다. 전역 컴포넌트 등록 예시코드 var cmp = { template: '지역 컴포넌트' }; Vue.component('component_name', cmp}); 전역 컴포넌트는 어느 영역이든 모두 적용된다. 지역 컴포넌트 등록 예시코드 var cmp = { template: '.. 2022. 10. 4. Vue 입문 Vue에 대한 기본문법을 이해할 때는 굳이 Vue 컴포넌트를 생성할 필요없이 html로 실습할 수 있다. new Vue({}); 를 뷰 인스턴스라고 한다. (Vue는 생성자) el속성을 사용해서 뷰 인스턴스와 관계된 부분을 명시한다. (#app를 이해하지 못한다면 CSS 문법 공부부터) data속성에 정의된 값들을 사용하고자 한다면 {{ 데이터이름 }}으로 사용할 수 있다. id=app : {{ message }} id=app2 : {{ message }} 위 코드블럭 실행 상태 (더보기 클릭) 더보기 HTML 삽입 미리보기할 수 없는 소스 2022. 10. 4. 이전 1 2 3 4 5 6 ··· 20 다음
