Vue에 대한 기본문법을 이해할 때는 굳이 Vue 컴포넌트를 생성할 필요없이 html로 실습할 수 있다.
- new Vue({}); 를 뷰 인스턴스라고 한다. (Vue는 생성자)
- el속성을 사용해서 뷰 인스턴스와 관계된 부분을 명시한다. (#app를 이해하지 못한다면 CSS 문법 공부부터)
- data속성에 정의된 값들을 사용하고자 한다면 {{ 데이터이름 }}으로 사용할 수 있다.
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
id=app : {{ message }}
</div>
<div id="app2">
id=app2 : {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'app!'
}
});
new Vue({
el: '#app2',
data: {
message: 'app2!'
}
});
</script>
</body>
</html>위 코드블럭 실행 상태 (더보기 클릭)
더보기
Vue Sample
id=app : {{ message }}
id=app2 : {{ message }}
'공부-프레임워크, 개발도구 > Vue' 카테고리의 다른 글
| Vue - computed, methods, watch 속성 (0) | 2022.10.07 |
|---|---|
| Vue- 자주쓰이는 디렉티브 (0) | 2022.10.06 |
| Vue-라우터 사용법 (0) | 2022.10.06 |
| Vue- 컴포넌트간의 통신 (0) | 2022.10.06 |
| Vue- 컴포넌트 (0) | 2022.10.04 |
댓글