[Vue.js] 새로고침 쉽게 하는 방법, window.location.reload( )

 

 

 

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

 

 

[ 토끼와 거북이 경주게임 ]

 

[Vue.js] Vue.js를 이용하여 간단한 토끼와 거북이 경주게임 만들기.

 

 

---

 

 

 

 

1.  화면

다시하기 버튼을 누르면 새로고침이 되어 토끼와 거북이의 위치가 처음으로 돌아가도록 한다.

 

 

 

 

 

---

 

 

 

 

2.  reload

<style> 코드

.game-return{
  position: absolute;
  top: 39%;
  left: 10%;
  width: 9%;
  height: 14%;
  transform: rotate(-30deg);
  background: rgba(246, 248, 192, 0.75);
  border:  5px solid white;
  border-radius:  100px;
  z-index: 15;
  cursor: pointer;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: Danjo-bold-Regular;
  transition: width 2s ease, height 2s ease, background 2s ease, transform 2s ease;
}

버튼을 만들었다!

너무 많은 특성이 있어서 간단하게 설명해보자면, position: absolute는 화면의 기준을 상위 클래스로 맞춘 것이고, top과 left는 버튼의 위치를 조정한 것이다. width와 height로 버튼의 크기를 설정했고 transfrom: rotate(-30deg)로 버튼의 기울기를 설정했다.  background는 배경컬러, border는 테두리, border-radius는 테두리 각도이다. z-index는 xyz중에 z를 뜻하며 여러 요소를 쌓아올릴때 맨 위로 보이게 하고 싶은 경우 설정한다. text-align은 글자를 어떻게 배치할건지, font가 앞에 붙은 것은 글씨체를 설정한 것이며, transition으로 버튼의 효과를 설정했다.

 

 

<button class="game-return" @click="reload"> 다시하기 </button>

클릭을 하면 reload 메서드로 연결되도록 했다.

 

 

<script> 코드

export default {
  name: 'GameView',
  methods: {
      reload() {
        window.location.reload(true);
      }
    }
 }

window.location.reload(true);를 넣으면 다시하기 버튼을 누를 때마다 새로고침이 실행된다.

 

 

 

---

 

 

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

 

🪽

틀린 내용이 있다면 댓글로 알려주세요

 

 

---

 

 

- 페이지 리로드

[vue.js] 페이지 리로드 하는 법