728x90 반응형 IT/VueJS11 첫번째 프로젝트 1. 프로젝트 생성(프로젝트명은 소문자로만 해라) vue create vue-commerce 2. App.vue 파일의 내용을 아래와 같이 바꾼다. Hello world {{ title }} {{product.title}} : {{ product.price }} 상품추가 export default { name: 'App', methods: { buttonClicked() { console.log('button clicked...'); }, linkClicked(prod) { console.log(`${prod} 이 선택되었습니다.`); } }, data() { return { title: '상품목록', products: [ { id: 1, title: '아이폰', price: 35000, }, { id:.. 2022. 8. 24. 데이터 바인딩, Interpolation {{ }} 일명 mustache 표기법 - 모든 자바스크립트에서 표현식 사용 가능하다. Attribute 바인딩 ( 거의 비슷한 걸로 Directives) ':'(콜론)을 앞에다 붙인다. imgSrc: 'https://여기다 URL'; 속성값에 바인딩을 쓰는 기법 Vue Directives, 지시문 v-text : {{ }} 대신 사용 v-once : 컴포넌트를 초기에 한번만 랜더링(static) v-html : 태그를 포함해서 렌더링 기능 v-bind(:src) : 이미지의 url을 바인당할때 사용. v-if v-show v-for 양방향 데이터 바인딩 주로 form 요소에서 사용됨 2022. 8. 23. VueJS 프로그램 구조 개발 환경과 배포 환경이 다르다. src 폴더 components -> HelloWorld.vue 배포환경 개발한것을 컴파일 함. (vue 파일을 HTML 파일로 변경) App.vue에 태그부분.. 3가지 태그를 모아놓음. 단일 파일 구성(SFC) 라고 함. App.vue 는 Entry. 개발자는 src 디렉토리만 보면 됨 main.js랑 App.vue 만 남기고 전부 지워라. 태그 내용지우고. 부분에 import 부준 지우고, components 부분 모두 지우고 부분 지우고 설정-> auto save 검색해서... afterDelay, 1000으로 설정해라 main.js 가 Entry Point다. 파일 하나가 컴포넌트라 생각하면 됨. createApp(App).mount('#app') 의미는... .. 2022. 8. 23. VueJS 총론 개발자 : Evan You https://vuejs.org/ Vue.js - The Progressive JavaScript Framework | Vue.js Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework. vuejs.org VueCLI 를 이용해 프로젝트를 만든다. - Vue-UI : GUI를 통해 Vue 프로젝트 생성, 개발 및 관리 가능(Scaffolding Tool - 초기 구조를 만드는 툴) - DevTools : Vue 앱 디버깅을 위한 독립형 웹 브라우저 확장 scaffolding(비계) - Best Practice 를 모아서....자동으로.. 2022. 8. 23. 이전 1 2 3 다음 728x90 반응형