๐งต Vue.js ์คํฐ๋ 1.
๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ
JS๋ฐ์ดํฐ๋ฅผ HTML์ ๊ฝ์๋ฃ๋ ๋ฌธ๋ฒ
<div>
//๋ฐ์ ์๋ ๋ฐ์ดํฐ HTML์ ๊ฝ์๋ฃ๊ณ ์ถ์ผ๋ฉด {{๋ฐ์ดํฐ์ด๋ฆ}}
<p>{{price1}}๋ง์</p>
<h4>{{products[0]}}</h4>
</div>
<script>
export default{
name:'APP',
//๋ฐ์ดํฐ ๋ณด๊ดํจ๋ถํฐ ์์ด์ผ ํจ
data(){
return {
//์ฌ๊ธฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๊ดํ๋ฉด ๋๋ค.
//๋ฐ์ดํฐ๋ object์๋ฃ๋ก ์ ์ฅํ๊ธฐ
price1:30,
products:[ '์ญ์ผ๋์๋ฃธ','์ฒํธ๋์๋ฃธ','๋งํฌ๊ตฌ์๋ฃธ']
}
},
componenets:{
}
</script>
{{๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ}}ํ๋ ์ด์ ??
1. HTML์ ํ๋์ฝ๋ฉํด๋์ผ๋ฉด ๋์ค์ ๋ณ๊ฒฝ์ด ์ด๋ ค์
2.Vue์ ์ค์๊ฐ ์๋ ๋ ๋๋ง์ด ๋๋ค.
=>Vue๋ data๋ฅผ ๋ณ๊ฒฝํ๋ฉด data์ ๊ด๋ จ๋ HTML์๋ ์ค์๊ฐ์ผ๋ก ๋ฐ์์ด ๋๋ค.
3. ์ ์ด์ ๊ฐ์ด ๋ฐ๋ ์ผ ์์ผ๋ฉด ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ํด๋ ๋๋ค.
HTMLํ๊ทธ ์์ ์์ฑ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ :์ด์ฉ๊ตฌ
<img :src='์๋ฃธ๋ค[0].image' class="room-img">
HTMLํ๊ทธ ์์ ๋ด์ฉ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ {{์ด์ฉ๊ตฌ}}
<p>{{์๋ฃธ๋ค[0].price}}์</p>
v-for๋ฐ๋ณต๋ฌธ
<div class='menu">
<a> Home</a>
<a>Products</a>
<a>About</a>
<a>About</a>
<a>About</a>
//๋ฐ๋ณต์ ์ธ HTMLํ๊ทธ ์ถ๋ชฐ
์๋์ ๊ฐ์ด ์์ฑ. ๋ฐ๋ณต๋ฌธ ์ธ ๋ :key์์ฐ๋ฉด ์๋ฌ๋๋ค
<a v-for="(a,i) in ๋ฉ๋ด๋ค" :key="i">Home</a>
</div>
<div v-for="(a,i) in products" :key='i'>
<h4>{{products[i]}}</h4>
</div>
<script>
export default{
name:'APP',
//๋ฐ์ดํฐ ๋ณด๊ดํจ๋ถํฐ ์์ด์ผ ํจ
data(){
return {
//์ฌ๊ธฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๊ดํ๋ฉด ๋๋ค.
//๋ฐ์ดํฐ๋ object์๋ฃ๋ก ์ ์ฅํ๊ธฐ
๋ฉ๋ด๋ค:['Home','Shop','About'],
products:[ '์ญ์ผ๋์๋ฃธ','์ฒํธ๋์๋ฃธ','๋งํฌ๊ตฌ์๋ฃธ']
}
},
componenets:{
}
</script>
์ด๋ฒคํธ ํธ๋ค๋ฌ
HTMLํด๋ฆญ ์ ์ฝ๋ ์คํํ๋ ๋ฒ
<div>
//v-on:click === @click
//๋ณ์์ 1๋ํด์ฃผ์ธ์..
<button v-on:click="increase">ํ์๋งค๋ฌผ์ ๊ณ </button> <span>์ ๊ณ ์:{{์ ๊ณ ์}}</span>
</div>
<script>
export default{
name:'APP',
data(){
return {
์ ๊ณ ์:0,
๋ฉ๋ด๋ค:['Home','Shop','About'],
products:[ '์ญ์ผ๋์๋ฃธ','์ฒํธ๋์๋ฃธ','๋งํฌ๊ตฌ์๋ฃธ']
}
},
// click์์ ๋ค์ด๊ฐ ์ฝ๋๊ฐ ๊ธธ๋ฉด function์ผ๋ก ์ถ์ฝํด ๋ฃ์ผ๋ฉด ๋จ
//vue์์ ํจ์ ๋ง๋ค๊ณ ์ถ์ผ๋ฉด methods:{ํจ์(){}}์์ ๋ง๋ค์ด๋ผ
methods:{
increase(){
this.์ ๊ณ ์ +=1;
}
},
componenets:{
}
</script>
์ค์ : vue์์ ํจ์๋ง๋ค ๋ ์ฃผ์์ฌํญ => ํจ์ ์์์ ๋ฐ์ดํฐ์ธ ๋this.๋ฐ์ดํฐ๋ช
์ฐธ๊ณ :Youtube ์ฝ๋ฉ์ ํ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐งต Vue.js ์คํฐ๋ 1.), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@chloeee/Vue.js-์คํฐ๋-1์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค