프로그래밍/Vue.js
-
Vue.js v-for 반복문프로그래밍/Vue.js 2019. 10. 8. 08:45
v-for 반복문 사용법 1. foreach와 똑같은 형태를 뛴다. 2. todo에 todos의 값을 한번씩 대입해 준다. 3. p태그가 3번 이루어져 출력이 되게 된다. 4. 서버단에서 처리한 데이터를 DOM에 넣어주고 사용하면 반복문이 쉽게 이루어진다. html을 이렇게 적어 주자 v-for문은 foreach와 같은 형태를 가지므로 foreach를 꼭 숙지 하면 좋을 듯 하다. 위에를 보면 todos의 값이 3가지 가지고 있다. todo에 이 값을 한번에 하나 씩 대입을 해준다. todo = javaScript todo = vue todo = 무언가 이런 식으로 한번에 한나씩 대입을 하면서 넣어주면 p태그에 값을 3번을 넣어주어 출력을 하게 된다. v-for는 태그 라이브러리나 jsp에서 사용하는 반..
-
Vue.js v-if 조건문 작성법프로그래밍/Vue.js 2019. 10. 7. 22:40
조건문 사용법 1. true와 false를 구분한다. 2. 꼭 data를 넣어줄 곳에 v-if="seen"의 형태로 태그에 넣어 준다. 3. 플레그 값을 잘 활용하면 좋을 듯 하다. html 을 작성해 준다 id와 data의 내용에 꼭 true로 적어 주어야한다. v-if. seen에서 내용을 확인한 후 true이면 개제를 하는 형식이다. 이런 것은 백단위에서 ajax통신이나 서버와 연결을 할때 내용을 정리한 후 true면 보여주고 false면 안보여지는 형태의 것을 만들 수 있다. 예를 들어 관리자나 유저의 구분을 주는 플레그 값으로 만들 수 있다 실행 결과는 밑에 와 같다 seen 을 false로 주면실행 화면이 다음과 같다.
-
Vue.js 시작하기부터 오류(CDN 적용 안될 때, DOM내용 적용 안될 때)프로그래밍/Vue.js 2019. 10. 2. 00:21
오늘 처음 시작하자마자 그냥 안되던데 내용이 뭔지 도저히 모르겠어서 구글링을 열심히 하였다. 그러나 이 부분에 알려주는 사람이 없었다. 하는 수 없지 여러 번 시도 끝에 해결해 나갈 수 있었다. 내용을 살펴 보자 . html내용을 이렇게 적어 주었다 내용은 그냥 홈페이지에 나오는 내용이던데 화면 출력을 아래와 같았다. 선언적 렌더링이 되지 않더라 왜 그런가 정말 고민을 많이 해 봤다. 처음에는 CDN 부분을 먼저 바꿔 보았다. 이것 말고도 많이 있던데 그냥 패스하겠다. 그래도 안돼 더라 그래서 열심히 지워보고 삭제해보고 여러 가지 방법을 시도해본 결과 Vue Script 부분을 바디 부분으로 옮겨 주니 되더라 태그에 작성하면 전혀 먹지 않더라 Vue Script는 꼭 바디 부분에 적어 주는 연습을 하자 ..
-
Vue.js 시작 하기.(CDN, 선언적 렌더링)프로그래밍/Vue.js 2019. 10. 2. 00:15
시작하기 Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오. 홈페이지에 나오는 내용이다. 요약 1. 진보적인 프레임워크 2. 기존 프로젝트와의 통합이 매우 쉬우며 배우..