Intro
https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.
속성 바인드
속성 바인드란, html 태그가 가진 속성에 Vue 인스턴스가 가진 데이터를 바인드하는 것을 의미한다.
일반적으로 a태그 같은 경우에는 href라는 속성을 가지고 있다. href는 해당 a태그를 클릭했을 때, 어떤 링크로 이동할지를 정의한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TEST!!</title>
</head>
<body>
<div id="app">
<a v-bind:href="naver_url">네이버로 이동하기</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
naver_url: 'http://www.naver.com',
},
});
</script>
</body>
</html>위와 같은 소스가 있으면 href 속성 내부에 있는 naver_url은 Vue 인스턴스 객체 내부에 있는 naver_url 속성을 가리키게 된다.
풀스택 웹개발자로 일하고 있는 Jake Seo입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. 프론트엔드: Javascript, React 백엔드: Spring Framework에 관심이 있습니다.