๐ก๋ทฐ ํ ํ๋ฆฟ
01. ๋ทฐ ํ ํ๋ฆฟ
01-1. ๋ทฐ ํ ํ๋ฆฟ์ด๋?
- ๋ทฐ์ ํ ํ๋ฆฟ์ HTML,CSS ๋ฑ์ ๋งํฌ์ ์์ฑ๊ณผ ๋ทฐ ์ธ์คํด์ค์์ ์ ์ํ ๋ฐ์ดํฐ ๋ฐ ๋ก์ง๋ค์ ์ฐ๊ฒฐํ์ฌ ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์์ ๋ณผ ์ ์๋ ํํ์ HTML๋ก ๋ณํํด ์ฃผ๋ ์์ฑ์ด๋ค.
template ์์ฑ์ ์ฌ์ฉํ์ง ์๋ ๊ฒฝ์ฐ
<div id="app"> <h3>{{message}}}}</h3> </div> <script> new Vue({ el:'#app', data:{ message: 'Hello Vue.js!' } }); </script>
template ์์ฑ์ ์ฌ์ฉํ ๊ฒฝ์ฐ
<div id="app"></div> <script> new Vue({ el:'#app', data: { message: 'Hello Vue.js!' }, template: '<h3>{{ message }}</h3>' }); </script>
01-2. ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ
- ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ HTMLํ๋ฉด ์์๋ฅผ ๋ทฐ ์ธ์คํด์ค์ ๋ฐ์ดํฐ์ ์ฐ๊ฒฐํ๋ ๊ฒ์ ์๋ฏธ
<div id="app" v-once>
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data:{
message:'Hello vue.js!'
}
})
</script>
{{ }} - ์ฝง์์ผ ๊ดํธ
- ๋ทฐ ์ธ์คํด์ค์ ๋ฐ์ดํฐ๋ฅผ HTML ํ๊ทธ์ ์ฐ๊ฒฐํ๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ํ ์คํธ ์ฝ์ ๋ฐฉ์์ด๋ค.
- data ์์ฑ์ message ๊ฐ์ด ๋ฐ๋๋ฉด ๋ทฐ ๋ฐ์์ฑ์ ์ํด ํ๋ฉด์ด ์๋์ผ๋ก ๊ฐฑ์ ๋๋ค.
- ๋ทฐ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋์ด๋ ๊ฐ์ ๋ฐ๊พธ๊ณ ์ถ์ง ์์ ๋, v-once ์์ฑ์ ์ฌ์ฉํ๋ค.
<div id="app">
<p v-bind:id="idA">์์ด๋ ๋ฐ์ธ๋ฉ</p>
<p v-bind:class="classA">ํด๋์ค ๋ฐ์ธ๋ฉ</p>
<p v-bind:style="styleA">์คํ์ผ ๋ฐ์ธ๋ฉ</p>
</div>
<script>
new Vue({
el:'#app',
data:{
idA: 10,
classA: 'container',
styleA: 'color:blue'
}
});
</script>
v-bind
- ์์ด๋, ํด๋์ค, ์คํ์ผ ๋ฑ์ HTML์์ฑ ๊ฐ์ ๋ทฐ ๋ฐ์ดํฐ ๊ฐ์ ์ฐ๊ฒฐํ ๋ ์ฌ์ฉํ๋ ๋ฐ์ดํฐ ์ฐ๊ฒฐ ๋ฐฉ์์ด๋ค.
- 'v-bind:' ๋ฌธ๋ฒ์ ':'๋ก ๊ฐ์ํํ ์ ์๋ค.
01-3. ์๋ฐ์คํฌ๋ฆฝํธ ํํ์
- ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ๋ฐฉ๋ฒ ์ค ํ๋์ธ {{ }} ์์ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์์ ๋ฃ์ผ๋ฉด ๋๋ค.
<div id="app">
<p>{{message}}</p>
<p>{{message + '!!!'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message: 'Hello Vue!'
}
});
</script>
๐ข ์๋ฐ์คํฌ๋ฆฝํธ ํํ์์์ ์ฃผ์ํ ์
- ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ธ๋ฌธ๊ณผ ๋ถ๊ธฐ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ์ ์๋ค.
- ๋ณต์กํ ์ฐ์ฐ์ ์ธ์คํด์ค ์์์ ์ฒ๋ฆฌํ๊ณ ํ๋ฉด์๋ ๊ฐ๋จํ ์ฐ์ฐ ๊ฒฐ๊ณผ๋ง ํ์ํด์ผํ๋ค.
<div id="app">
{{ var a = 10; }} <!-- X, ์ ์ธ๋ฌธ์ ์ฌ์ฉ ๋ถ๊ฐ๋ฅ -->
{{ if (true) {return 100} }} <!-- X, ๋ถ๊ธฐ ๊ตฌ๋ฌธ์ ์ฌ์ฉ ๋ถ๊ฐ๋ฅ -->
{{ true ? 100 : 0 }} <!-- O, ์ผํญ ์ฐ์ฐ์๋ก ํํ ๊ฐ๋ฅ -->
{{ message.split('').reverse().join('') }} <!-- X, ๋ณต์กํ ์ฐ์ฐ์ ์ธ์คํด์ค ์์์ ์ํ -->
{{ reversedMessage }} <!-- O, ์คํฌ๋ฆฝํธ์์ computed ์์ฑ์ผ๋ก ๊ณ์ฐํ ํ ์ต์ข
๊ฐ๋ง ํํ -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message: 'Hello Vue!'
},
computed : { //๋ฐ์ดํฐ ์์ฑ์ ์๋์ผ๋ก ๊ณ์ฐํด ์ฃผ๋ ์์ฑ
reversedMessage : function() { // {{ reversedMessage }}์ ํํ๋์ง ์ ์ ์ฐ์ฐ์ ์ํํ๋ ํจ์
return this.message.split('').reverse().join('');
}
}
});
</script>
01-4. ๋๋ ํฐ๋ธ
- ๋ทฐ ๋๋ ํฐ๋ธ(Directive)๋ HTMLํ๊ทธ ์์ v- ์ ๋์ฌ๋ฅผ ๊ฐ์ง๋ ๋ชจ๋ ์์ฑ์ ์๋ฏธํ๋ค
- ํ๋ฉด์ ์์๋ฅผ ๋ ์ฝ๊ฒ ์กฐ์ํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ๊ธฐ๋ฅ์ด๋ค
- ๋ทฐ ๋ฐ์ดํฐ ๊ฐ์ด ๋ณ๊ฒฝ๋์์ ๋ ํ๋ฉด์ ์์๋ค์ด ๋ฐ์ํ์ฌ ๋ณ๊ฒฝ๋ ๋ฐ์ดํฐ ๊ฐ์ ๋ฐ๋ผ ๊ฐฑ์ ๋๋ค.
- ํ๋ฉด ์์๋ฅผ ์ง์ ์ ์ดํ ํ์ ์์ด ๋ทฐ์ ๋๋ ํฐ๋ธ๋ฅผ ํ์ฉํ์ฌ ์์๋ค์ ์กฐ์ํ ์ ์๋ค.
๋๋ ํฐ๋ธ ์ด๋ฆ | ์ญํ |
---|---|
v-if | ์ง์ ํ ๋ทฐ ๋ฐ์ดํฐ ๊ฐ์ ์ฐธ, ๊ฑฐ์ง ์ฌ๋ถ์ ๋ฐ๋ผ ํด๋น html ํ๊ทธ๋ฅผ ํ๋ฉด์ ํ์ํ๊ฑฐ๋ ํ์ํ์ง ์๋๋ค. |
v-for | ์ง์ ํ ๋ทฐ ๋ฐ์ดํฐ์ ๊ฐ์๋งํผ ํด๋น htmlํ๊ทธ๋ฅผ ๋ฐ๋ณต ์ถ๋ ฅํ๋ค. |
v-show | v-if์ ์ ์ฌํ๊ฒ ๋ฐ์ดํฐ์ ์ง์ ์ฌ๋ถ์ ๋ฐ๋ผ ํด๋น html ํ๊ทธ๋ฅผ ํ๋ฉด์ ํ์ํ๊ฑฐ๋ ํ์ํ์ง ์๋๋ค. ๋ค๋ง, v-if๋ ํด๋น ํ๊ทธ๋ฅผ ์์ ํ ์ญ์ ํ์ง๋ง v-show๋ display:none ์ฒ๋ฆฌ๋ฅผ ํ์ฌ ํ๊ทธ๋ ๋จ์์๊ณ ํ๋ฉด ์์๋ง ๋ณด์ด์ง ์๊ฒ ๋๋ค. |
v-bind | html ํ๊ทธ์ ๊ธฐ๋ณธ ์์ฑ๊ณผ ๋ทฐ ๋ฐ์ดํฐ ์์ฑ์ ์ฐ๊ฒฐํ๋ค. |
v-on | ํ๋ฉด ์์์ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ์ฌ ์ฒ๋ฆฌํ ๋ ์ฌ์ฉํ๋ค. ์๋ฅผ ๋ค์ด v-on:click์ ํด๋น ํ๊ทธ์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ์ฌ ํน์ ๋งค์๋๋ฅผ ์คํ ํ ์ ์๋ค. |
v-model | ํผ(form)์์ ์ฃผ๋ก ์ฌ์ฉ๋๋ ์์ฑ์ด๋ค. ํผ์ ์ ๋ ฅํ ๊ฐ์ ๋ทฐ ์ธ์คํด์ค์ ๋ฐ์ดํฐ์ ์ฆ์ ๋๊ธฐํ ํ๋ค. ํ๋ฉด์ ์ ๋ ฅ๋ ๊ฐ์ ์ ์ฅํ์ฌ ์๋ฒ์ ๋ณด๋ด๊ฑฐ๋ ์ถ๊ฐ ๋ก์ง์ ์ํํ ์ ์๋ค. input, selsect, textarea ํ๊ทธ์๋ง ์ฌ์ฉํ ์ ์๋ค. |
<div id="app">
<a v-if="flag">๋์ vue</a>
<ul>
<li v-for="system in systems">{{ system }}</li>
<!-- v-for = "์์ดํ
๋ช
in array" -->
</ul>
<p v-show="flag">๋์ vue</p>
<h5 v-bind:id = "uid">๋ทฐ ์
๋ฌธ์</h5>
<!-- v-bind:์์ฑ = "์์ฑ์ด๋ฆ" -->
<button v-on:click = "popupAlert">๊ฒฝ๊ณ ์ฐฝ ๋ฒํผ</button>
<!-- v-on:์ด๋ฒคํธ์ด๋ฆ = "๋ฉ์๋์ด๋ฆ" -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
flag:true,
systems : ['andoroid', 'ios', 'window'],
uid: 10
},
methods : {
popupAlert : function() {
return alert('๊ฒฝ๊ณ ์ฐฝ ํ์');
}
}
});
</script>
01-5. ๊ณ ๊ธ ํ ํ๋ฆฟ ๊ธฐ๋ฒ
- computed ์์ฑ
- ๋ณต์กํ ๋ฐ์ดํฐ ์ฐ์ฐ๋ค์ ์ ์ํ๋ ์์ญ์ด๋ค.
-
computed ์์ฑ์ ์ฅ์
- data์์ฑ ๊ฐ์ ๋ณํ์ ๋ฐ๋ผ ์๋์ผ๋ก ๋ค์ ์ฐ์ฐํ๋ค.
- ์บ์ฑ : ๋์ผํ ์ฐ์ ์ ๋ฐ๋ณตํด์ ํ์ง ์๊ธฐ ์ํด ์ฐ์ฐ์ ๊ฒฐ๊ณผ ๊ฐ์ ๋ฏธ๋ฆฌ ์ ์ฅํ๊ณ ์๋ค๊ฐ ํ์ํ ๋ ๋ถ๋ฌ์ค๋ ๋์
-
computed ์์ฑ๊ณผ methods ์์ฑ์ ์ฐจ์ด์
- methods ์์ฑ์ ํธ์ถํ ๋๋ง ํด๋น ๋ก์ง์ด ์ํ๋๊ณ , computed ์์ฑ์ ๋์ ๋ฐ์ดํฐ์ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉฐ ์๋์ ์ผ๋ก ์ํ๋๋ค.
- โ methods: ์๋์ ๋ฐ์ดํฐ ๊ฐฑ์
- โ computed: ๋ฅ๋์ ๋ฐ์ดํฐ ๊ฐฑ์
- methods ์์ฑ์ ์ํํ ๋๋ง๋ค ์ฐ์ฐ์ ํ๊ธฐ ๋๋ฌธ์ ๋ณ๋๋ก ์บ์ฑ์ ํ์ง ์์ง๋ง, computed ์์ฑ์ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋์ง ์๋ ํ ์ด์ ์ ๊ณ์ฐ ๊ฐ์ ๊ฐ์ง๊ณ ์๋ค๊ฐ ํ์ํ ๋ ๋ฐ๋ก ๋ฐํํด ์ค๋ค.
- ๋ณต์กํ ์ฐ์ฐ์ ๋ฐ๋ณตํด์ ์ํํด ํ๋ฉด์ ๋ํ๋ด์ผํ๋ค๋ฉด, computed ์์ฑ์ ์ด์ฉํ๋ ๊ฒ์ด ํจ์จ์ ์ด๋ค.
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMsg">๋ฌธ์์ด ์ญ์</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message:'Hello Vue!'
},
// methods ์์ฑ
methods: {
reverseMsg: function(){
this.message = this.message.split('').reverse().join('');
return this.message;
}
}
});
</script>
- watch์์ฑ
- ๋ฐ์ดํฐ ๋ณํ๋ฅผ ๊ฐ์งํ์ฌ ์๋์ผ๋ก ํน์ ๋ก์ง์ ์ํํ๋ค.
- computed ์์ฑ๊ณผ ์ ์ฌํ์ง๋ง, watch ์์ฑ์ ๋ฐ์ดํฐ ํธ์ถ๊ณผ ๊ฐ์ด ์๊ฐ์ด ์๋์ ์ผ๋ก ๋ ๋ง์ด ์๋ชจ๋๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ์ ํฉํ๋ค.
๐ข ๋น๋๊ธฐ ์ฒ๋ฆฌ๋?
์น์์ ๋ฐ์ดํฐ๋ฅผ ํธ์ถํ ๋, ์๋ฒ์ ๋ณด๋ธ ์์ฒญ์ด ์ธ์ ์๋ต์ด ์ฌ์ง ์ ์ ์๊ธฐ ๋๋ฌธ์, ์๋ฐ์คํฌ๋ฆฝํธ ์ฐ์ฐ์ ์ํฅ์ ์ฃผ์ง ๋ชปํ๋๋ก ๋ณ๋์ ์์ญ์์ ํด๋น ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ ์๋ต์ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ ๋งํ๋ค.
<div id="app">
<input v-model="message">
<!-- v-model ๋ทฐ ์ธ์คํด์ค์ ๋ฐ์ดํฐ์ ์ฆ์ ๋๊ธฐํํ๋ค. ํ๋ฉด์ ์
๋ ฅ๋ ๊ฐ์ ์ ์ฅํ์ฌ ์๋ฒ์ ๋ณด๋ด๊ฑฐ๋ watch์ ๊ฐ์ ๊ณ ๊ธ ์์ฑ์ ์ด์ฉํ์ฌ ์ถ๊ฐ ๋ก์ง์ ์ํํ๋ค -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message: 'Hello Vue!'
},
watch: {
message: function(data){
console.log("message์ ๊ฐ์ด ๋ฐ๋๋๋ค :", data);
}
}
});
</script>
์ฐธ๊ณ do it vue.js
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ก๋ทฐ ํ ํ๋ฆฟ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ahn-sujin/๋ทฐ-ํ ํ๋ฆฟ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค