반응형 Study/Vue.js4 Vue의 반복문 V-for Vue에서 반복문을 알아보자. 반복적인 코드를 작성하거나, 혹은 반복적인 태그를 여러개 생성해야될때 주로 사용되는게 바로 For(반복문)이다. if와 for는 플랫폼을 가리지 않고 자주 사용되는데 Vue에서도 마찬가지로 반복문을 사용하여 반복적인 코드를 한번에 생성하도록 할수 있다. {{products[0]}} 매매 {{price2}} 만원 {{products[1]}} 전세 {{price1}} 만원 {{products[2]}} 전세 {{price3}} 만원 이 코드를 보면 태그가 반복되어 행해지고 있다. 그리고 data 영역 안에서 선언된 products와 price 변수들을 이용하여 데이터 바인딩 처리를 해주고 있는데 V-for를 이용한다면 간단하게 여러 div를 data 갯수에 맞게 처리가 가능하다... 2023. 8. 17. Vue의 데이터바인딩 우리가 기존에 Javascript나 Jquery를 이용해서 동적인 데이터를 화면에 추가하기 위해서는 데이터를 추가할 요소에 id나 class 들을 추가해주고, 그 후에 Javascript에서는 document.getElementById(ID명).innerHTML = "넣을값"; 이라고 표현해주거나 Jquery에서는 $(#id명).html 이런식으로 각각 ID나 Class를 지정해서 해당 요소에 접근후 데이터를 해당 요소에 대입해줘야했다. 하지만 Vue는 다르다. 바로 이런식으로 말이다. 먼저 이 코드는 npm/cli를 사용하여 터미널에서 vue create 프로젝트명을 사용하여 생성된 vue 프로젝트이다. 코드 내에 있는 코드들이 우리가 알고있는 HTML과 CSS 영역이 화면에 표출되는 화면단이고 Scr.. 2023. 8. 16. VS code에서 Vue 프로젝트 생성하기 2023.07.11 - [Study/Vue.js] - Vue.js 개발환경 구축하기(feat. vs Code) Vue.js 개발환경 구축하기(feat. vs Code) 일전에 Python 공부하면서 VS code를 설치했었는데 Vue.js 개발할때도 VS code를 많이 사용한다고한다. 따라서 Vscode로 Vue.JS 개발할수 있는 개발환경 구축을 해보겠다. 먼저 vs code 환경에서 vue.js를 사용 yat-ong.tistory.com 개발환경이 완료되었으니 이제 Vue 프로젝트를 생성해볼 시간이다. 먼저 Vue를 사용하려면 2가지의 방법이 가능하다. 상단의 포스팅대로 npm을 이용하여 vue/cli를 설치하거나. CDN 방식으로도 Vue 설정이 가능하다. 우리가 개발할때는 개발버전을 사용하는것이.. 2023. 7. 29. Vue.js 개발환경 구축하기(feat. vs Code) 일전에 Python 공부하면서 VS code를 설치했었는데 Vue.js 개발할때도 VS code를 많이 사용한다고한다. 따라서 Vscode로 Vue.JS 개발할수 있는 개발환경 구축을 해보겠다. 먼저 vs code 환경에서 vue.js를 사용하려면 cdn 방식이 있고 vue/cli를 설치하는 방법이 있는데 vue/cli 설치하는 방법으로 개발환경 구축을 해보겠다. vs code로 terminal을 이용해 vue/cli를 설치하려면 npm이나 yarn이 설치되어있어야하는데 npm을 사용할것이고. npm을 사용하기 위해선 node.js를 설치해야한다. node.js 설치하러가기 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript .. 2023. 7. 11. 이전 1 다음 반응형
