Vue.js
: DOM element에서 필요한 데이터와 메서드를 제공함
- vue.js CDN을 < body > 아래부분에 추가함
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>- < script > 태그 안에 vue 인스턴스를 생성함
<script>
var vm = new Vue({
el : '#app',
data : {name : '', // 변수1 : v-mdoel로 binding (양방향)
newTodoItem: '', // 변수2 : v-mdoel로 binding (양방향)
todoItems : [ // 변수3 : v-for로 binding (한방향)
{name : '김석훈', item : 'Django와 Vue.js 연동 프로그램을 만들고 있습니다.'},
{name : '홍길동', item : '이름을 안쓰면 홍길동으로 나와요..'},
{name : '이순신', item : '신에게는 아직 열두 척의 배가 있사옵니다.'},
{name : '성춘향', item : '그네타기.'},
]},
methods : {add_todo: function() {
console.log("add_todo() ... ");
if (this.name == '') this.name = '홍길동';
if (this.newTodoItem == '') return;
this.todoItems.push({name: this.name, item: this.newTodoItem});
this.name = '';
this.newTodoItem = ''; // push한 뒤에 입력 항목 초기화
},
remove_todo: function(index) {
console.log("remove_todo()... ");
this.todoItems.splice(index , 1); // 삭제는 splice 이용
}},
})
</script>-> 'element'로 vue가 제공하는 메서드를 적용할 css selector 입력함
-> 'data'에 html에서 보여줄 데이터값 입력함
-> 'method'에 action이 발생할 시 사용될 함수를 정의함- < body > 부분
<body>
<div id = 'app'>
<h1>My Todo App !</h1>
<strong>서로 할 일이나 의견을 공유해 봅시다.</strong>
<br>
<div class="inputBox">
<input class="name" type="text" placeholder="name ..." v-model="name">
<input class="item" type="text" placeholder="type anyting welcomed ..."
v-model="newTodoItem" v-on:keyup.enter="add_todo()"> <!-- 엔터 눌러도 add기능 되도록 구현 -->
<!-- v-model은 양방향 데이터 전달이 가능함(일반적으로는 js->html방향으로만 가능!) -->
<button v-on:click="add_todo()">ADD</button>
</div>
<ul class="todoList">
<li v-for="(todo, index) in todoItems">
<span>{{ todo.name }} :: {{ todo.item }}</span>
<span class="removeBtn" v-on:click="remove_todo(index)">×</span>
</li>
</ul>
</div>
<!-- <script> -->v-for디렉티브 : 배열 기반 리스트 렌더링 (itme in items 형태로 사용)
- vue data에 지정한 배열만큼 리스트를 보여줌{{mustached}}기호 : Vue 내의 값 혹은 함수를 불러옴v-on디렉티브 : DOM 이벤트를 듣고 트리거될 때 JavaScript 실행v-model디렉티브 : 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있음.
- 일반적인 binding은 '한뱡향'임 : JavaScript -> HTML
자세한 내용들은 추가적으로 정리...
기록하는 습관