Muscardinus
data 받기 본문
728x90
Vue.createApp({
data() {
return {
firstName: 'John',
};
},
}).mount('#app');data라는 함수 안에 object를 반환함으로서 vue-template에서 사용할 수 있다.
사용하기 위해서는
<!DOCTYPE html>
<html>
<head>
<title>VueJS Course</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="app">{{ firstName }}</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>위와 같이 {{ }}를 사용한다.
Vue에서 자체적으로 {{ }} 안의 expression을 찾아내서 바꾼다.
Vue는 Proxy를 사용하여 데이터를 관리한다. 따라서, 추후에 값을 변화하기 위해서는
vm.$data.firstName = "Bob";위와 같이 바꿔야하지만, 우리에게 편의를 주기위해서
$data 없이도 바꿀 수 있게 도와준다. 따라서, 만일 firstName을 2초 후에 바꾸고 싶으면 아래와 같이 작성이 가능하다.
setTimeout(() => {
vm.firstName = 'Bob';
}, 2000);728x90
'FrontEnd/Vue' Related Articles
more
Comments