Vue.js는 간단한 ToDoList 사전 준비를 구현합니다.

1. 서문

최근에 경량 mvvm 프레임워크 Vue.js를 배우기 시작했습니다. 중국어 문서에 관한 한 매우 완벽합니다. 이전에 버전 1.0을 공부하고 있었는데 어느 날 갑자기 공식 홈페이지를 열어보니 2.0으로 업데이트가 되어 있는 것을 발견했습니다. 그런 다음 그 이후의 모든 내용은 2.0 구문으로 변경되었습니다. ps: Vue 초보자라면 학습 참고 자료로 사용할 수 있는 MOOC 동영상이 있습니다. (여기서는 ToDoList를 작성하고 학습 과정을 기록한 작은 장난감을 참고했습니다.)

2. 오프닝
요즘 프론트엔드에서 화제가 되고 있는 mvvm 프레임워크는 Lagou에 가서 둘러보면 70% 정도가 요구사항을 가지고 있는 것을 볼 수 있습니다. 그러니 거짓말은 아니고 돈을 더 벌기 위해 시대에 발맞추어야 하는 거겠죠? 블로그 게시물 'http://www.cnblogs.com/xueduanyang/p/3601471.html'을 추천합니다. 꽤 철저하고 변증법적으로 보아야 한다고 생각합니다.

말도 안 되는 이야기는 이제 그만하고 본문으로 들어가겠습니다

/************************************************** *************/

이 todolist에서 필요한 총 Vue.js 포인트는 다음과 같습니다.

1. Vue 인스턴스 생성: 예:

var vm=new Vue();

2. 목록 렌더링:

v -for ="(item,index) in todo_items";

3. 바인딩 이벤트: 예:

v-on:click="toogleFinishi(item,index)";

2.1 Vue 인스턴스 생성

공식 홈페이지에서는 다음과 같은 방법으로 인스턴스를 생성합니다.

<div id="app">{{ message }}</div>

var app = new Vue({
 
 el: '#app',
 
 data: {
 
 message: 'Hello Vue!'
 
 }
 
})

여기서 app 변수는 객체인 생성자 new Vue()를 사용하여 생성한 인스턴스입니다. 그러면 이 인스턴스에 대한 작업은 개체에 대한 작업으로 간주될 수 있습니다.

이제 앱의 메시지 값을 가져오겠습니다.

먼저 데이터를 가져옵니다: app.$data. (Vue 인스턴스가 관찰하는 데이터 객체. Vue 인스턴스는 데이터 객체 속성에 대한 액세스를 프록시합니다.)

그런 다음 app.$data.message 메시지를 받습니다.

이 방법을 통해 인스턴스에서 원하는 속성 값을 얻을 수 있습니다.

예:

vm = new Vue({
el : 'test',
data : {
msg : ' app.$data.message '
}
})

을 서로 전송할 수 있습니다.

2.2 목록 루프

네이티브 js와 같은 동적 목록을 렌더링하기 위해 더 이상 for() 루프를 사용할 필요가 없습니다.

직접 사용: v-for="item 항목에서"를 렌더링합니다. 기본 for in 루프 방법과 유사합니다

   
<div v-for="item in items">
  
 {{ item.text }}
  
 </div>

2.3 이벤트 바인딩

JQ에서는 $() on('을 자주 사용합니다. click',function(){}); 클릭 이벤트를 바인딩합니다.

Vue에서는 v-on:click="doSometing('a','b')"를 사용하여 바인딩합니다.
예:

이 3가지 사항을 사용하면 간단한 ToDoList 작성을 시작할 수 있습니다.