728x90
Vue.js 여러 개의 Vue 인스턴스 사용하기
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 여러 개의 Vue 인스턴스 사용하기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
<hr>
<div id="app-2">
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'Jang'
},
methods: {
changeText() {
this.name = 'Jang-change'
}
}
})
new Vue({
el: '#app-2',
data: {
name: 'Lee'
},
methods: {
changeText() {
this.name = 'Lee-change'
}
}
})
</script>
</body>
</html>
실행 결과
코드 - 다른 Vue 인스턴스 제어하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 여러 개의 Vue 인스턴스 사용하기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
<hr>
<div id="app-2">
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Jang'
},
methods: {
changeText() {
app2.name = 'Jang-change'
}
}
})
const app2 = new Vue({
el: '#app-2',
data: {
name: 'Lee'
},
methods: {
changeText() {
this.name = 'Lee-change'
}
}
})
</script>
</body>
</html>
실행 결과
this 대신 Vue 인스턴스가 담긴 변수의 이름 넣기
const app = new Vue({
el: '#app',
data: {
name: 'Jang'
},
methods: {
changeText() {
this.name = 'Jang-change' // --> app2.name = 'Jang-change'
}
}
})위의 코드에서 this.name은 app의 data의 name을 가리킨다.
이를 app2.name 으로 적는다면 app2 Vue 인스턴스의 data의 name을 가리키게 된다.
※var, let, const 차이점
|
|
var
|
let
|
const
|
|
재선언
|
O
|
X
|
X
|
|
재할당
|
O
|
O
|
X
|
변수 재선언
var a = 10;
var a = 5;
console.log(a); // 5 (재선언 가능)
let b = 20;
let b = 10; // Uncaught SyntaxError: Identifier 'b' has already been declared
const b = 30;
const b = 15; // Uncaught SyntaxError: Identifier 'b' has already been declared
변수 재할당
var a = 10;
a = 5; // 5 (재할당 가능)
let b = 20;
b = 10; // 10 (재할당 가능)
const c = 30;
c = 15; // Uncaught TypeError: Assignment to constant variable.728x90
'개념정리 > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue Cli 설치하기 (2) | 2022.04.26 |
|---|---|
| [Vue.js] 뷰 컴포넌트 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue v-for와 key 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue v-if와 v-show 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue 클래스와 스타일 바인딩 개념 및 예제 (1) | 2022.04.26 |
댓글