WEB/Vue.js19 [Vue.js] 렌더링 조건(v-if,v-show) 렌더링조건(v-if,v-show) Randering If v-if / v-else-if / v-else 는 if문과 같이 조건문을 HTML테그에 바로 걸수 있습니다. 또한 v-if문의 조건에는 ||(or)조건과 &&(and) 조건을 사용할수 있습니다. 조회 생성 삭제 조회 생성 조회 Rendering Show v-show 사용법 + v-if 차이점 v-show : 사용자가 화면에서 선택을 자주할 경우에 사용하고 개발자 도구에서 코드를 보면 style="display: none"으로 잡혀있다. 즉, 렌더링될때 코드가 같이 딸려온다. v-if : 조건 만족시에 서버에서 코드를 가져오고 개발자 도구에서 코드를 보면 v-if라는 문구가 주석처리 되어 코드가 렌더링된다. 즉, 렌더링 될때는 코드가 .. 2022. 7. 11. [Vue.js] 이벤트 Vue.js 이벤트 기본적으로 JavaScript의 이벤트를 다루는 문법에서 @를 앞에 on대신에 사용하여 이벤트를 사용할 수 있습니다. Click이벤트 @click 을 이용하여 onclick과 같은 효과를 낼 수 있습니다. Add 1 {{ counter }} Change이벤트 @change로 변화가 일어날때 코드를 실행합니다. @change와 v-on:change는 같습니다. 가장 많이 사용되는 태그는 select, input type checkbox, input type radio에서 사용이 됩니다. input type text도 사용이 가능하긴 합니다. 이벤트를 변수에 받아서 함수에 넘겨주고 싶은 경우에는 $event를 통해서 event를 넘겨줄 수 있습니다. ==도시선택== {{ city.titl.. 2022. 7. 10. [Vue.js] 데이터 바인딩 데이터 바인딩 폴더 구조 Views폴더에서는 화면 전체를 구성하는 컴포넌트를 다룹니다. 또한 이름의 마지막에 View를 붙이는 룰이 있습니다. components폴더에서는 화면의 특정 영역이나 다른 여러 곳에 사용이 되어 재사용이 가능한 컴포넌트를 다룹니다. 데이터 바인딩 string Vue에서는 모든 데이터는 data() 함수에 정의하고 아래의 코드는 {{}} 중괄호 2개를 통해서 string 값을 단방향 데이터 바인딩을 하였습니다. 일반 바닐라 자바스크립트로 서버로부터 가져온 데이터를 바인딩하여 출력을 하려면 해당 태그에 id값을 할당하고 Document.getElementById()를 통해서 DOM에 접근하여. innerText 또는. innerHTML을 통해서 값을 바꿔야 한다. Hello {{ .. 2022. 7. 9. [Vue.js] 라우터 이해하기 Vue 라우터란? 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 라우팅이란? 웹 페이지의 이동 방법을 말합니다. 라우팅은 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용되고 화면 간의 전환을 매끄럽게 진행시킬 수 있습니다. Vue 라우터에 사용되는 태그 아래의 예제에서는 App.vue 파일에서 사용이 됩니다. 페이지 이동 태그, 화면에선 a 태그로 치환 페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역 폴더 구조 project |--public | |--index.html |--src |--router | |--index.js |--App.vue |--main.. 2022. 7. 7. 이전 1 2 3 4 5 다음
