23년에 작성해두었던 글이며 Vue Instance에 대한 참고용으로 봐주시길 바랍니다.
Vue의 공식 문서를 보면 그 안에 Vue Mastery라는 강의를 제공하고 있다.
여기에서 매우 기초적인 것부터 짧은 강의를 통해 알 수 있는데 첫 내용이 Vue instance이다.
Vue의 html코드에서 어떻게 data를 쓸까?
일단 React의 경우에는 jsx문법으로 작성되는 컴포넌트에 로직을 작성하니 data코드를 그대로 jsx문법의 return 컴포넌트 안에서 사용할 수 있다.
그런데 Vue는?
일단 처음 배우면서 CDN을 통해 html에서 vue를 사용할 수 있도록 만든 다음 마크업을 작성했는데,
이 안에 js를 통해 가져온 혹은 작성된 data(or 변수 등)를 쓰려면 어떻게 해야하는가 싶었다.
이 때 쓰는 게 Vue instance이다.
Vue instance 사용하기
index.html
<body>
<div id="app">
<h1>데이터를 넣고 싶어요.</h1>
</div>
</body>
<script src="main.js"></script>위 같은 html파일이 있다고 가정해보자. script로 연결해놓은 main.js에는 변수가 있는데 이 변수의 내용을 html에서 사용하고 싶다.
var product = 'Socks';알다시피 이 자체로는 할 수 있는 게 없다. 세팅이 필요하다. 여기선 간단하게 CDN을 사용해보자.
Vue를 CDN으로 사용하기 위해 아래 script를 html에 넣어준다. 넣어주는 위치는 head나 body아래나 상관없다.
Vue CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Vue instance 생성
main.js
var app = new Vue({
el: "#app",
data: {
product: "Socks",
},
})이전 js코드에서 많이 달라졌다. 바로 new Vue()를 사용한 것.
이 문법을 이용해 우리는 Vue instance를 생성한 것이다. 이렇게 생성된 인스턴스 안에서 옵션을 사용해 어떻게 사용될 것인지 작성해줄 수 있다.
el: 이를 통해서는 어디에 전달할 지 정한다. 즉 element를 정하는 것.- #app이라고 우리가 정해둔 id값을 가진 div태그를 지정했다.
data: 이름 그대로 data이다. 이 안에 변수명과 그 안에 담길 값을 작성해주었다.- 우리는 product라는 이름에 "Socks"라는 값을 담았다.
이제 이걸 html에서 사용한다면?
index.html
<body>
<div id="app">
<h1>{{ product }}</h1>
</div>
</body>
<script src="main.js"></script>이렇게 작성해주면 된다. 그러면 id값이 app인 div안에서 우리가 작성해준 값들을 사용할 수 있다.
이때 사용할 값은 {{ }}로 감싸준다.
