시나브로

구현 목표 리스트 중 마우스를 올리면 올린 리스트 객체에 버튼이 생기고 마우스를 내리면 버튼이 없어지는 것 고려점 마우스를 올린 객체를 구별해야된다. 그 구별된 객체에 버튼을 생성해야된다 시도 1 map 자료구조를 이용해서 @mouseover을 이용해서 파일명의 값을 변경하고자 했습니다. => 문제점 : 자바스크립트 map 자료구조에서는 값 변경이 불가능합니다. (c에서는 당연히 되는거였는데 안된다는 걸 생각하지도 못했습니다. 아무리 검색해봐도 변경이 가능하지 않았습니다. 새로운 객체에 복사할 때, 수정하는 것 빼고는... ) 시도 2 map 자료구조 대신 json을 사용하고 함수로 빼서 구현하였습니다. 성공적으로 기능 구현되었습니다

구현 계획 파일 목록 리스트에 마우스를 올리면 삭제버튼이 생기고 마우스를 내리면 삭제버튼이 없어지는 것 밑의 mp4는 원하는 기능을 구현한 영상입니다. 문제 사항 mouseAction 함수는 item 값에 true/false 값으로 변경하는 기능을 합니다. mouseover을 인식해 값을 변경하지만, 버튼은 보여지지 않았습니다. 목록 리스트를 클릭할 경우, true값을 인식하지만 즉각적인 반영은 되지 않았습니다. {{ item.name }} mdi-trash-can-outline 1. console.log 로 변경된 시점의 deleteBtn의 값을 정확히 변경된다는 것을 확인했습니다. 2. console.log 값과 개발자 도구 vue 창을 동시에 켜서 값 변화를 비교했습니다. 중요과정. console...

{{msg}} hey 클릭시 값이 변경된다는 것은 onclick 이벤트를 추가하는 것과 동일하다. vue에서는 onclick 이벤트를 추가하기 위해 첫번째, 이번트를 추가할 버튼에 v-on:click="함수명"을 명시해줘야된다. 두번째, Vue 객체를 선언할 때, methods:{~~} 를 선언하여 함수를 선언한다. 단, 여기서 자신의 객체를 접근할 때는 꼭 this를 사용해야된다.

{{msg}} title 밑의 script문은 vue를 사용하기 위해 추가해줘야된다. 위와 같이 사용을 한다면, 인터넷을 통해 vue 파일들을 가져온다는 말이다. 이 방법말고도 다운을 받아도 좋지만, 편한기 때문에 이 방법을 추천한다. {{msg}} 이렇게 중괄호를 두번쓰고 변수를 사용하면 자바스크립트의 변수를 사용할 수 있게 된다. 그렇기에 이를 활용하면 {{msg}} 대신에 msg 값인 "helloworld"가 나타나게 된다. 위의 코드는 가장 기본적인 틀이니 숙지하는 것이 좋다.