Starting Vue.js
아래 코드는 Vue.js 웹 애플리케이션 제작 시 이용되는 기본 골격 .
CDN을 사용하거나 https://kr.vuejs.org/v2/guide/installation.html 를 통해 다운로드 받아 이용 가능하다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
</body>
</html>Vue.js의 인스턴스
Vue 클래스 초기화
new Vue({
// 이 부분에서 옵션이나 컴포넌트가 설정된다.
})root Vue vm 생성 코드
var vm = new Vue({
// 옵션이나 컴포넌트가 설정됨
}); 변수 이름은 자유롭게 지정하나 , 관례로 vm으로 지정한다.
Vue.js의 컴포넌트
// 루트 컴포넌트
new Vue({
el: '#app'
});
// 전역 컴포넌트
Vue.component('comp',{
template: '<span>comp</span>'
})
// 지역 컴포넌트
...
components: {
'sub_comp': {
template: '<span>sub_comp</span>
}
}컴포넌트 사용 예제 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
<!-- 소문자에서 대문자 바뀌는 지점에 하이픈 입력 -->
</div>
<script>
Vue.component('myComponent', {
template: '<span>myComponent 컴포넌트는 my-component로 호출해야 한다.</span>'
});
new Vue({
el: "#app",
});
</script>
</body>
</html>컴포넌트와 인스턴스는 Vue.js의 핵심이라고 하여도 무방하다.
v-model
v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected속성을 무시한다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급. 컴포넌트의 data옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다.
폼 입력 바인딩 예제 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" placeholder="입력하세요.">
<p>메시지: {{ message }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/x-template" id="markup-tmpl">
<p>Hello, {{ name }}</p>
</script>
<script>
var vm = new Vue({
el:"#app",
data:{
name: "pilyeong"
},
template : "#markup-tmpl"
});
</script>
</body>
</html>template은 위의 스크립트, {{ name }} 은 데이터의 name의 내용 반영
'아카이브' 카테고리의 다른 글
| 02 . NAVER clone , 동적효과를 위한 js 추가 (0) | 2019.11.14 |
|---|---|
| 191111 / Today I Learned (0) | 2019.11.11 |
| 191110 / Today I Learned (0) | 2019.11.10 |
| 191109 / Today I Learned (0) | 2019.11.09 |
| 191106 / Today I Learned (0) | 2019.11.06 |
