웹 퍼블리셔 기록/Vue3 (4) 썸네일형 리스트형 [vue3] v-for 를 정복해버렸다...!!!!! 뷰 새내기 윤쮼입니다!!!! 뷰의 기초 중의 기초 v-for 시간도 없는데 오늘 정복해버릴까합니다. 그래서 예시를 들고왔어요!!! 첫번째 예시!! 데이터이름 : 과일들 데이터 내용 : 사과, 딸기, 바나나 과일들 : [사과, 딸기, 바나나] 이거를 v-for 로 뿌려줄 거에요! {{과일}} 자 위에 코드에서 "과일들"(즉 데이터이름) 에서 각각의 "과일"(데이터내용 - 네이밍은 마음대로 가능)을 빼내온다고 생각하면 되요. :key="과일"은 안쓰면 오류나니까 써야합니다. (공식페이지에서 하래요....) "과일 in 과일들" 에서의 과일과 :key="과일" 에서 과일은 같은 값을 가리킵니다. 출력하면 사과, 딸기, 바나나 이렇게 같죠. 두번째 예시!! 데이터이름 : 음식들 데이터 내용 : 짜파게티, 유부초.. Vue 프로젝트를 시작하자! [시작부터 오류발생...... 해결방법은!!!?] 계획만 해서는 안된다! 일단 시작을 하자! 작업 운영체제는 윈도우 (Window) npm 설치 시 맥에 비해서 오류가 많이 난다고 하는데.. 조금 걱정이 된다! 그래도 도--전!!!!!!! Vue3 프로젝트 시작 순서! 1. 프로젝트 폴더 아무 곳에나 생성 2. Vscode 에서 오픈 폴더 => 생성한 폴더 불러오기 3. 터미널에 npm install -g @vue/cli 입력!!! 후후....아니나 다를까 바ㅡ로 오류 발생!!!! ("허가되지 않은 스크립트 어쩌구 저쩌구") ㅡ.ㅡ 해결 방법 ???? 윈도우 검색메뉴(돋보기) 에서 Powershell을 검색하면 "Windows Powershell" 이 뜨는데 여기 우클릭을 해서 관리자 권한으로 실행!! 그리고 Set-ExecutionPolicy Unre.. [Vue3] 버튼 클릭 시 입력한 값 : data 값에 등록 만들고 싶은 것 값을 입력하고 클릭하면 출력되게 만들기 1. 인풋에 입력한 값 저장하기 2. 클릭하면 저장한 인풋 값을 데이터에 등록 3. 등록된 데이터 값 보여주기 Html type your list click {{text}} 1. @change="input" : input값이 변경되면 data에 업데이트 되도록 해야함 2. @click="click" : 버튼을 누르면 업데이트된 data값이 {{ text }} 에 출력되도록 만들기 Javascript const app = Vue.createApp({ data(){ return { text : '', //출력될 값 inputText : '' //input값 } }, methods:{ input(e){ return this.inputText = e.tar.. [Vue3 + TS] Event Target 에러 1. (event)에 타입 Event 설정해주기 2. event.target.textContent 하면 Property 'textContent' does not exist on type 'EventTarget' 에러 뜸 (event.target as HTMLLIElement).textContent 로 작성해주기 const dpText = ref('Dropdown Text'); const menuClik = (event: Event) => { const eText = (event.target as HTMLLIElement).textContent; dpText.value = eText; }; {{ item.menu }} 이전 1 다음
