반응형 vue stand alone3 [Vue3] Stand Alone #6. Component 만들기 Vuejs 3 Stand Alone Component 만들기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ npm build 없이 php 나 html 에서 사용하려면 .vue 를 import 못하기 때문에 js 로 component 를 만들어서 사용해야합니다. 우선 javascript 파일을 만듭니다. baseCard.js const BaseCard = { props:{ title: String, content: { type: String, default: "", description: "card content" }, but.. 2022. 3. 21. [Vue3] Stand Alone #3. v-for, :key Vuejs 3 CDN 으로 사용하기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ data 의 cars 배열을 for 문으로 li 들을 뿌려주는 예제입니다. v-for="item in cars" 로 반복을 합니다. :key 는 unique 한 값으로 입력을 해줘야 합니다. {{ item }} 배열의 문자열이 중복될 수 도 있으니 index 를 사용할 경우 아래와 같이 변경하면 됩니다. {{ item }} 문자열이 json list 일 경우 {{ item.name }} ({{ item.age }}) 결과 2022. 3. 20. [Vue3] Stand Alone #1. vuejs CDN 및 기본 사용 Vuejs 3 CDN 으로 사용하기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ cdn 주소는 https://unpkg.com/vue@3 입니다. {{ message }} lesson.html 로 이름을 만들고 파일을 더블클릭 해서 실행 해 볼 수 있습니다. 기본적으로 이렇게 사용할 수 있습니다. npm 이나 vue cli 로 프로젝트를 만들고, webpack 등으로 빌드해서 사용할 수 있지만, 그럴 수 없는 환경(예를들어 웹 호스팅에서 지원안해줄 때, )일 경우에 cdn방식이나 로컬 js 를 include 해서 사용할 수.. 2022. 3. 20. 이전 1 다음 728x90 반응형
