JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
Vue를 사용하기 위해서 가장 먼저 알아야할 것은 인스턴스이다.
어찌보면 Vue의 시작이자 Vue의 끝이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
{{hello}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
hello: 'Hello world!'
}
});
</script>
</html>
해당 코드를 보자. 몇가지가 눈에 띌것이다.
일단 대원칙 몇가지만 알면 Vue는 쉽다.
Vue라는 생성자를 보자. js로 선언한 Vue객체는 두가지의 필드를 가진다.
일단 el은 당연히 엘레먼트의 약자이다. 이 선언은 강제이다.
뭐 강제하지 않아도 상관없지만 선언하지 않으면 의미가 없다.
여기서 필자는 #app이므로 id가 app인 엘레멘트에 Vue를 적용시키겠다는 뜻이 된다.
여기서 엘레멘트는 무조건 div로 고정된다. 다른 엘레멘트는 id를 줘바야 적용이 되지 않는다.
그 다음 중요한건 data이다.
data는 일종의 상태이다. 다른 프레임워크에서는 state라고 부른다.
그러나 여러분이 여기서 data에 대해서 깊게 생각할 필요는 없다. 그냥 말그대로 data라 생각하면된다.
일단은 그냥 쉽게 사용할 수 있는 변수라고 생각하는게 편하다.
이 안에 넣은 변수들은 꺼집어내어서 사용할 수 있다.
가령 data안에 hello라는 또다른 요소가 있는데 이를 {{}}안에 넣으면 자동으로 렌더링된다.
렌더링이 되는지 안되는지는 여러분이 시행을 해보면 바로 확인 할 수 있다.
제대로 작동하는 것을 확인할 수 있다.
한가지 중요하게 알아야할 점은 저 괄호안에는 자바스크립트 문법이 그대로 적용된다는 것이다.
가령 아래와 같은 코드를 사용한다 해보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
{{hello[1]}}<br>
{{hello+'good'}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
hello: 'Hello world!'
}
});
</script>
</html>
자바스크립트 적으로 해석하면 위는 문자열 요소의 2번째인 e를 반환할 것이다.
또한 아래는 Hello world!뒤에 good이 추가될 것이다.
백문이 불여 일견이다. 한번 테스트 해보자.
제대로 작동됨을 확인할 수 있다.
그럼 요소안에 요소를 넣는것도 가능한가? 즉 javascript object, array를 사용할 수 있는가?
당연하지만 이 역시 가능하다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
{{hello[0]}}<br>
{{hello[1]}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
hello: [
'hello', 'world'
]
}
});
</script>
</html>
위의 코드는 hello를 배열로 정의하고 마치 배열의 엘레멘트를 호출하듯이 사용하고 있다.
당연히 이 역시가능하다. 배열이 아니라 JavaScript Object(연관배열)였어도 가능하다.
제대로 작동하는 것을 확인할 수 있다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-06]반복문(v-for) (0) | 2018.02.20 |
|---|---|
| [Vue-05]조건문 (0) | 2018.02.20 |
| [Vue-04]데이터 바인딩 (0) | 2018.02.20 |
| [Vue-03]라이프 사이클-기본 (0) | 2018.02.20 |
| [Vue-02]메소드 (0) | 2018.02.18 |