๐Ÿ’ก๋ทฐ ํ…œํ”Œ๋ฆฟ

35367 ๋‹จ์–ด TILvue.jsTIL

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

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ