Vue.js
-
vue의 데이터바인딩 문법Vue.js 2022. 7. 6. 13:51
html에 꽂아넣는 데이터바인딩 문법을 알아보자. xx 원룸 {{price1}} 만원 xx 원룸 {{price2}} 만원 vue에는 데이터 보관함이 있는데, script태그안에 export default안에 data () { return {} }안에 데이터를 오브젝트 형식으로 넣어주면 되며, 사용할 땐, {{ 키값 }} 이렇게 중괄호 2개에 데이터이름만 적어주면 된다. 이렇게 {{ 데이터바인딩 }}을 하는 이유는 vue가 실시간 자동 렌더링을 하기 때문이다. 데이터바인딩은 그래서 실시간으로 변경되는 데이터들을 쓴다. 그리곤 속성도 데이터바인딩이 가능하다. 데이터보관함에 이름 : '속성'을 쓰고, html에 :style="데이터이름" 이런 식으로 :을 써주면 된다.
-
Vue 개발환경 셋팅Vue.js 2022. 7. 5. 13:01
vscode 터미널에 npm install -g @vue/cli //또는 yarn global add @vue/cli 이렇게 입력해서 우선 vue를 설치해준다. 그리곤, Extensions버튼을 눌러서 에디터 부가기능을 설치해준다. vetur과 html css support, vue 3 snippets 를 설치해준다. 그리고, 터미널에 vue create 프로젝트명 을 써서 프로젝트를 만들어준다. 이렇게 만들어진 폴더를 vscode로 오픈하고 코딩을 시작해주면 된다. 그리고 미리보기를 띄우고 싶으면 터미널에 npm run serve 를 입력하면 된다. 메인페이지는 App.vue가 된다. 만약, build를 하려면 npm run build를 해주면 된다.