<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> v-for :: 일종의 for문, 데이터를 여러개 받아와서 한번에 출력할 수 있다.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
<ul>
<li v-for="n in numbers">{{n}}</li>
</ul>
<table border="2">
<tr>
<th>이름</th><th>나이</th>
</tr>
<tr v-for="p in people">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{ //정적인 데이터 바인딩
numbers:[1,2,3,4,5,6,7], // 여러 개의 데이터는 배열 :: [], 단순한 값--객체 아님 (기본형)
people:[
{ //json 형식 == 객체, json의 여러개는 == list (class data type)
name:'이순신',
age:45
},
{
name:'강감찬',
age:55
},
{
name:'을지문덕',
age:50
}
]
}
});
</script>
</html>
v-if, v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
조건부 렌더링 ::
1) v-if : 조건에 맞지 않으면 렌더링 자체를 안한다. 주석처리된다.
2) v-show : 결과적으로 v-if 와 동일한 출력 결과를 보인다.
하지만 v-show는 조건에 맞지 않더라도 렌더링은 하고 css 처리 기법을 사용한다.
즉 display:none 처리한다.
v-if는 토글비용이 높고
: state에 따라서 보였다 안보였다를 반복하는 빈도가 높다면 v-show를 권장한다 -- 토글비용연결
v-show는 초기 렌더링 비용이 높다
: 런타임 조건이 바뀌지 않으면 v-if를 권장한다
-->
<h1 v-if="show"> 나는 보입니다 <br/>
<!-- 아래 부분에 엄청 복잡한 연산이 진행된다고 가정해보자 -->
<input type = "text" name="text1"><br/>
<input type = "text" name="text2"><br/>
</h1>
<h1 v-show="show"> 나는 보입니다 <br/>
<!-- 아래 부분에 엄청 복잡한 연산이 진행된다고 가정해보자 -->
<input type = "text" name="text1"><br/>
<input type = "text" name="text2"><br/>
</h1>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
show:false
}
});
</script>
</html>
v-show만 나타난다
methods (v-on:click, @click)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body> <!-- script는 body 안에 들어와도 상관없다. -->
<div id = "app">
<div v-html="title"></div> <!-- h2의 효과가 나는 Directive Expression -->
<div v-on:click="changeName()">{{title}}</div>
<div @click="changeName">{{title}}</div><!-- 이 함수를 많이 사용한다 -->
</div>
<script type="text/javascript">
var model = {title:'<h2>Seoul</h2>'}
new Vue({
el:'#app',
data:model, //model data binding
methods:{
changeName:function(){ //method 이름 :: changename
//title 의 값을 변경
this.title = "<h1>Daejeon</h1>"//this는 vue를 가리킴
}
}
});
</script>
</body>
</html>
<h2> 태그 클릭하면 아래와 같이 변함
$data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- /////// 화면영역 ////// -->
<body>
<!-- first 영역 -->
<div id="first">
<div>
<h3 v-text="title"></h3>
</div>
</div> <!-- Vue -->
<!-- second 영역 -->
<div id="second">
<div onclick="hello('James')">일반 javascript :: 클릭이벤트</div>
</div>
<!-- vue 영역 아님 , div 외의 영역 :: third 영역 -->
<input type="text" id="third" onclick="hello2(this)";/> <!-- this -- form을 가르키는 객체 -->
</body> <!-- Javascript -->
<!-- /////// script 영역 ////// -->
<script type="text/javascript">
var model = {title:"Encore"}
var app = new Vue({
el:'#first',
data:model
});
function hello(name) {
//Vue 객체 외부에 있는 메소드에서 Vue 속성에 접근하려면? -- this 사용 안됨(app 사용해야함)
//Vue 객체 외부에서 Vue속성에 접근하려면 Vue인스턴스명.
//app.title = name; // 아래가 복잡하기 때문에 이것으로 사용
app.$data.title = name;
}
function hello2(form){
// 윗쪽 third 부분을 클릭하면 품 안에 작성한 값을 title에 할당하도록 로직을 작성
app.title = form.value;
if(form.value==document.getElementById('third').value)
alert("일치합니다!")
}
</script>
</html>
클릭이벤트 클릭하면 위의 james로 변함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
<div v-text="title"></div>
<div v-html="title"></div>
<div>{{title}}</div>
<div>{{showInfo()}}</div> <!-- 호출할 수 있음 , {{}} 안에서 메소드 호출시 () 빼면 안됨-->
<div>{{showInfo2('James')}}</div>
<button @click="changeName">{{title}}</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
title:'<h2>ENCORE</h2>'
},
methods:{
changeName:function(){
this.title = "ENCORE HRM ENCORE HRM";
},
showInfo:function(){
return "ENCORE HRM" + new Date();
},
showInfo2:function(name,$event){ //인자값으로 event 객체를 연결하려면 반드시 인자값이름앞에 $를 붙인다.
return name + "," + new Date();
}
}
});
</script>
</body>
</html>
filters
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>filters :: 데이터를 조건에 맞게 걸러주는 기능</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="app">
<div><h3>{{title}}</h3></div>
<div><h3>{{title|toUpper}}</h3></div> <!-- filter 문법 -->
<div><h3>{{title|toLower}}</h3></div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{title:'Encore Academy'},
filters:{ //methods 비슷??
toUpper:function(value){ // 대문자로 변경
return value.toUpperCase();
},
toLower:function(value){ // 소문자로 변경
return value.toLowerCase();
},
}
});
</script>
</body>
</html>
댓글