Vue Instance
- Vue.js ํ๋ฉด ๊ฐ๋ฐ์ ์ํด ๊ผญ ์์ฑํด์ผ ํ๋ ํ์ ๋จ์์ด๋ค.Instance ์์ฑ
// ์๋กญ๊ฒ Vue๋ฅผ ์ ์ธ new Vue({ el: '#app', // ์ด๋ค ์์์ ์ ์ฉ์ ํ ์ง ์ ํจ ์ฌ๊ธฐ์๋ HTML ์ฝ๋์ ์ ์ธ๋ id="app"์ธ div ํ๊ทธ๋ฅผ ์ง์ data: { // data ๋ ํด๋น VueJS์์ ์ฌ์ฉํ ์ ๋ณด๋ค์ ์ ์ธํด์ฃผ๋ ์ญํ title: '์๋ VueJS!' } })
์ธ์คํด์ค ์ฌ์ฉํ ์ ์๋ ์์ฑ๊ณผ API
new Vue({
el: , // ์ธ์คํด์ค๊ฐ ๊ทธ๋ ค์ง๋ ํ๋ฉด์ ์์์ (ํน์ HTMLํ๊ทธ)
template: , // ํ๋ฉด์ ํ์ํ ์์ (HTML, CSS ๋ฑ)
data: , // ๋ทฐ์ ๋ฐ์์ฑ(Reactivity) ๊ฐ ๋ฐ์๋ ๋ฐ์ดํฐ ์์ฑ
methods: , // ํ๋ฉด์ ๋์๊ณผ ์ด๋ฒคํธ ๋ก์ง์ ์ ์ดํ๋ ๋ฉ์๋
created: , // ๋ทฐ์ ๋ผ์ดํ ์ฌ์ดํด๊ณผ ๊ด๋ จ๋ ์์ฑ
watch: , // data ์์ ์ ์ํ ์์ฑ์ด ๋ณํํ์ ๋ ์ถ๊ฐ ๋์์ ์ํํ ์ ์๊ฒ ์ ์
});
Vue ๋ผ์ดํ ์ฌ์ดํด
Vue ์ธ์คํด์ค ์์ฑ์ ์์ด, ๊ฐ์ฅ ๋จผ์ ํธ์ถ๋๋ ํจ์๋ค๋ก์จ, ์คํฌ๋ฆฝํธ์์๋ window.onload ์ ๋น์ทํ ๋๋์ด๋ค.
Vue ์ธ์คํด์ค๋ ์์ฑ(Create) ๋๊ณ
Dom ์ ๋ถ์ฐฉ(Mount) ๋๊ณ
์
๋ฐ์ดํธ (Update) ๋๋ฉฐ
์์ด์ง๋ (Destroy) 4๊ฐ์ง ๊ณผ์ ์ ๊ฑฐ์น๊ฒ ๋๋ค.
created
data
๋ฅผ ๋ฐ์ํ์ผ๋ก ์ถ์ ํ ์ ์๊ฒ๋๋ฉฐcomputed,method,watch
๋ฑ์ด ํ์ฑํ๋์ด ์ ๊ทผ์ด ๊ฐ๋ฅํ๊ฒ ๋๋ค.
์์ง Dom์๋ ์ถ๊ฐ๋์ง ์์ ์ํ์ด๋ค.
var app = new Vue({
el: '#app',
data() {
return {
msg: 'hello';
}
},
created(function() {
console.log(this.msg); // hello
})
})
mounted
๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ mounted ํ
์ด๋ค.
๊ฐ์ Dom ๋ด์ฉ์ด ์ค์ Dom ์ ๋ถ์ฐฉ๋๊ณ ๋ ์ดํ์ ์คํ๋๋ค.data,computed,method,watch
๋ฑ ๋ชจ๋ ์์์ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
var app = new Vue({
el: '#app',
mounted(function() {
console.log('mounted');
})
})
created๋ ๋ฐ์ดํฐ ์ด๊ธฐํ์ ๋ํ ๋ชฉ์ , mounted๋ DOM ์กฐ์์ ๋ํ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
ํ ํ๋ฆฟ ๋ฌธ๋ฒ
๋ทฐ๋ฅผ ํ๋ฉด์ ์กฐ์ํ๋ ๋ฐฉ๋ฒ์ ์๋ฏธํ๋ค.
๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ : interporation {{ }}
<span>๋ฉ์์ง: {{ msg }}</span>
- Mustache Tag(์ด์ค์ค๊ดํธ) ๋ฅผ ์ฌ์ฉํ ๋ณด๊ฐ๋ฒ(Interporation)
- Mustaches ๋ HTML์ด ์๋ ์ผ๋ฐํ ์คํธ๋ก ํด์ ํ๋ค.
๋๋ ํฐ๋ธ : Directive v-bind
v-bind
๋๋ ํฐ๋ธ๋ฅผ ์ฌ์ฉํ์ฌ Vue ์ธ์คํด์ค ๋ด์ ์ ์ธ๋ ๊ฐ์ HTML ์ฝ๋์ ์์ฑ ๊ฐ์ ์ฌ์ฉํ ์ ์๋ค.v-
์ ๋์ฌ๊ฐ ๋ถ์ ํน๋ณํ ์์ฑ์ผ๋ก ํ๋ฉด์ DOM ์กฐ์์ ์ฝ๊ฒ ํ ์ ์๋ ๋ฌธ๋ฒ์ ์ ๊ณตํ๋ค.
v-html HTML์ ์ฝ๋ํํ๋ก ์ถ๋ ฅ ๊ฐ๋ฅํ๋ค.
v-once
๋ HTML ์ฝ๋๋ก ์ถ๋ ฅ๋ ์ดํ ์ด๋ค ํ์ฒ๋ฆฌ๊ฐ ์์ด๋ ์ฒ์์ ์ถ๋ ฅํ ๊ฐ์ ์ ์ง์ํค๊ณ ์ถ์๋ ์ฌ์ฉํ๋ค.v-on
์ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ด๋ค.- ์ด๋ฒคํธ ์์์ด
- ์์์ด๋ ์ ์ผ๋ก ํ์๋๋ ํน์ ์ ๋ฏธ์ฌ๋ก, ๋๋ ํฐ๋ธ๋ฅผ ํน๋ณํ ๋ฐฉ๋ฒ์ผ๋ก ๋ฐ์ธ๋ฉ ํด์ผ ํจ์ ๋ํ๋ธ๋ค. ์๋ฅผ ๋ค์ด, .prevent ์์์ด๋ ํธ๋ฆฌ๊ฑฐ๋ ์ด๋ฒคํธ์์ event.preventDefault()๋ฅผ ํธ์ถํ๋๋ก v-on ๋๋ ํฐ๋ธ์๊ฒ ์๋ ค์ค๋ค.
<form v-on:submit.prevent="onSubmit"> ... </form>
- ์์์ด๋ ์ ์ผ๋ก ํ์๋๋ ํน์ ์ ๋ฏธ์ฌ๋ก, ๋๋ ํฐ๋ธ๋ฅผ ํน๋ณํ ๋ฐฉ๋ฒ์ผ๋ก ๋ฐ์ธ๋ฉ ํด์ผ ํจ์ ๋ํ๋ธ๋ค. ์๋ฅผ ๋ค์ด, .prevent ์์์ด๋ ํธ๋ฆฌ๊ฑฐ๋ ์ด๋ฒคํธ์์ event.preventDefault()๋ฅผ ํธ์ถํ๋๋ก v-on ๋๋ ํฐ๋ธ์๊ฒ ์๋ ค์ค๋ค.
- ์ด๋ฒคํธ ์์์ด
v-model
์<form>
ํ๊ทธ์์ submit ํ ๋ ์ฌ์ฉํ๋ ์์ฑ
์ฝ์ด
๋๋ ํฐ๋ธ๋ฅผ ์ค์ฌ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ์๋คv-bind
์ v-on
์ ์ ๊ณต๋๋ค.
- v-bind
<!-- ์ ์ฒด ๋ฌธ๋ฒ --> <a v-bind:href="url"> ... </a> <!-- ์ฝ์ด --> <a :href="url"> ... </a>
- v-on
<a v-on:click="doSomething"> ... </a> <!-- ์ฝ์ด --> <a @click="doSomething"> ... </a>
์ฐธ๊ณ
'Vue.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Vue.js] Chart.js ๋์ ๋ง๋ ๊ทธ๋ํ ์ดํฉ ํ์ํ๊ธฐ (Stack Bar, Total) (1) | 2022.10.25 |
---|---|
[Vue.js] Hot Reload ๋์ ์ํ ๋ (0) | 2022.10.18 |
Vue.js(4) Router ๋ฐ Axios, async await ๊ฐ๋ (1) | 2022.10.09 |
Vue.js(3) Vue ์ธ์คํด์ค ์์ฑ ๋ฐ ์ปดํฌ๋ํธ (0) | 2022.10.09 |
Vue.js(1) ํ๋ก์ ํธ ์์ฑ ๋ฐ ํ๋ก์ ํธ ๊ตฌ์ฑ (0) | 2022.10.09 |
๋๊ธ