v-if, v-for, v-on:Event 알아보기
main.js
var app = new Vue({
el: '#app',
data:{
message:'Hello vue.js',
list: ['사과','바나나','딸기'],
show: true
},
methods:{
handleClick:function(event){ console.log(event.target.value); }
}
})
console.log("Your are running Vue in developemnt mode.");
//app.list.push('오렌지');v-for
vue에서 리스트의 아이템을 사용하기 위한 코드
<li v-for="item in list">{{item}}</li>v-if
<div v-if="show"></div>if가 true라면 태그가 보이고 false라면 안보임.
v-show로 처리 가능하다.
v-on:Event
<button v-on:click = "handleClick" value="buttonValue">click</button>여러 이벤트를 v-on을 통해서 처리 가능하다. 실제 동작은 data의 methods에서 처리한다.
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<ol>
<li v-for="item in list">{{item}}</li>
</ol>
<button v-on:click = "handleClick" value="buttonValue">click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="main.js"></script>
</body>
</html>
꾸준하게글을작성해보자