[Vue.js] v-bind가 무엇인지 알아보고, href로 하이퍼링크 만들기.

 

 

 

v-bind로 props에 어떤 값을
보내는 코드를 작성했다.
그렇다면 v-bind는 뭘까?

 

 

 

 

 

v-bind

• HTML 속성이나 컴포넌트 props에 데이터를 연결하는 디렉티브이다.
• 축약형으로 :를 쓸 수 있다.
• 주로 속성값을 바꾸거나, 컴포넌트에 props 전달하거나, 상태에 따라 클래스나 스타일을 토글할 때 사용한다.

 

 

 

디렉티브

• HTML 태그 안에 들어가는 속성의 역할을 하며, v-라는 접두사가 붙는 것이 특징이다.

 

 

 

바인딩

• 프론트엔드에서 바인딩은 주로 UI 데이터 바인딩을 의미한다.
• 웹 페이지나 애플리케이션에서 사용자가 보는 데이터(View)와 실제 메모리에 있는 데이터(Model)를 연결하고 동기화하는 기법이다.
• 즉, 데이터가 변경되면 UI도 자동으로 업데이트되거나, UI의 변경사항이 데이터에 변영되는 등 두 정보 소스를 연결하고 일치시킨다.

 

 

 

토글

• 두 가지 상태나 옵션 사이를 번갈아 전환하는 동작을 의미한다.

 

 

 

 

---

 

 

 

 

v-bind의 축약형 코드

• 축약형이 아닐 때

v-bind:href="url"

 

• 축약형일 때

:href="url"

 

 

 

 

---

 

 

 

 

v-bind를 이용하여 다른 웹사이트 들어가보기

• 화면

 

 

 

 

• 코드

<script  setup>
site = "https://vuejs.org/"
</script>



<template>
  <a :href="site" target="_blank" rel="noopener noreferrer">
    Vue 공식 사이트로 이동
  </a>
</template>

<a> 요소는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다. Vue 공식 사이트로 이동을 누르면 href를 v-bind로 해놔서 script에 적은 주소값이 연결돼서 해당 사이트로 이동한다.

target은 링크를 어디에 열지 설정하는 것으로 _blank를 설정하여 새탭에서 열도록 했다.

그리고 rel은 링크의 속성을 나타낸다. noopener는 링크를 클릭하면 브라우저 컨텍스트 액세스 권한 없이 새 탭에서 링크가 열린다. 신뢰할 수 없는 링크를 열 때 유용하다. noopener는 _blank일 때 적용되는 값이라서, noopener를 사용하면 a 태크가 다른 target을 가져도 새탭에서 링크를 연결할 수도 있다. noopener 다음으로 norefferer을 썼다. norefferer은 하이퍼링크로 이동할 때 referer 헤더를 보내지 않아, 어디서 왔는지 누출하지 않는다.

보통 target에 _blank를 설정하면, 보안상의 취약점이 발생하기 때문에 rel 속성에 noopener과 noreferer를 지정하여 문제를 해결한다.

 

 

 

 

---

 

 

 

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

 

🪽

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

 

 

---

 

- v-bind

[vue 3] 04. v-bind를 통한 속성 처리

 

 

 

- v-bind

[VueJS] v-bind 와 v-on 약어 사용하기

 

 

 

- 내장디렉티브

Vue.js

 

 

 

- 토글

[IT용어] 토글(Toggle)의 뜻

 

 

 

- a 태그 href

a 태그의 href 속성 값에Vue 내에 선언된 값을 넣고 싶은 경우(Vue v-on:click, v-bind:href, router-link :to)

 

 

 

- a  태크

<a> - HTML: Hypertext Markup Language | MDN

 

 

 

- _blank, noopener, noreferer

[HTML] target="_blank"와 noopener, noreferrer의 관계