vue 2 의 todolist 입문 작은 프로젝트 에 대한 상세 한 분석

vue 2 의 공식 문 서 를 보고 입문 프로젝트 를 찾 아 지식 을 공 고 히 하 는 것 이 좋 습 니 다.간단 한 todolsit 은 좋 은 선택 입 니 다.
프로젝트 는vue.jsvue.cliwebpackES6node환경 을 사 용 했 고 프로젝트 를 완성 한 후에 이런 기술 창고 에 대해 알 게 될 것 이다.
개발 환경 을 마련 하 다

$ npm install -g vue-cli
$ vue init ，   vue init webpack todolist
$ cd todolist
$ npm install
$ npm run dev

구 글 플러그 인 vue.js devtools 설치

vue.js 다운로드웹 팩 템 플 릿

다운로드todomvc 템 플 릿(html 와 css 제공)(직접$git clonehttps://github.com/tastejs/todomvc-app-template.git로 다운로드 할 수 있 습 니 다)

todomvc 의 index.html 를 todolist 폴 더 로 끌 어 다 안에 있 는 index.html

을 덮어 씁 니 다.

todomvc 의 json 파일 을 열 면"todomvc-app-css"를 볼 수 있 습 니 다."^2.0.0"은 npm install todomvc-app-css-S 를 사용 하여 css

를 다운로드 하 라 는 것 입 니 다.

todolsit index.html 의 기본 css,js 참조,src 폴 더 의 main.js 템 플 릿 css 도입(import'todomvc-app-css/index.css')

vue 도입(import Vue form'vue')

등 코드 를 작성 한 후$npm run build 원 키 로 포장 하여 구축 하면 dist 폴 더 를 볼 수 있 습 니 다.

코드

//        ， ~    index.html     

import 'todomvc-app-css/index.css'
import Vue from 'vue'
//  localStorage
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
 fetch: function () {
  var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  todos.forEach(function (todo, index) {
   todo.id = index
  })
  todoStorage.uid = todos.length
  return todos
 },
 save: function (todos) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
 }
}
//           
var filters = {
 all(todos) {
  return todos
 },
 active(todos) {
  return todos.filter((todo) => {
   return !todo.completed
  })
 },
 completed(todos) {
  return todos.filter((todo) => {
   return todo.completed
  })
 },
}
let app = new Vue({
 el: '.todoapp',  // ~ <section class="todoapp">
 data: {
  msg: 'hello world',
  title: '    ',  //      ~ {{title}}
  newTodo: '',
   todos: todoStorage.fetch(), // ~ v-show="todos.length" ； ~ {{todos.length>1?'items':'item'}}    li ~ v-for="(todo,index) in filteredTodos" 
  editedTodo: '',  //       
  hashName: 'all'  
 },
 
 watch: {
  todos: {
   handler: function (todos) {
    todoStorage.save(todos)
   },
   deep: true
  }
 },
 
 computed: {
  remain() {
   return filters.active(this.todos).length  //         ~ {{remain}}
  }, 
  isAll: {   // ~ v-model="isAll"
   get() {
    return this.remain === 0
   },
   set(value) {
    this.todos.forEach((todo) => {
     todo.completed = value
    })
   }
  },
  filteredTodos() {  // hashName        todos ~ v-for="(todo,index) in filteredTodos" 
   return filters[this.hashName](this.todos)
  }
 },
 methods: {
  addTodo(e) { //      ，   （trim      ） ~ v-model.trim="newTodo" 
   if (!this.newTodo) {
    return
   }
   this.todos.push({
    id: todoStorage.uid++,
    content: this.newTodo,
    completed: false //  v-model   completed       ~:class="{completed:todo.completed； ~ v-model="todo.completed"
   })
   this.newTodo = ''
  },
  removeTodo(index) {  //  x  ，     todo ~ @click="removeTodo(index)"
   this.todos.splice(index, 1)
  },
  editTodo(todo) {     //   ~ @dblclick="editTodo(todo)"
   this.editCache = todo.content //        
   this.editedTodo = todo //                   ~ editing:todo==editedTodo}"
  },
  doneEdit(todo, index) { //      ~ @blur="doneEdit(todo)"；@keyup.enter="doneEdit(todo)"
   this.editedTodo = null //              
   if (!todo.content) { //          ，   todo
    this.removeTodo(index)
   }
  },
  cancelEdit(todo) {  // esc          ~ @keyup.esc="cancelEdit(todo)">
   this.editedTodo = null   
   todo.content = this.editCache // esc     ，        
  },
  clear() { //           ~ @click="clear"
   this.todos = filters.active(this.todos) //            ~ 
  }
 },
 directives: {  //      ~ v-focus="todo == editedTodo"
  focus(el, value) { //         
   if (value) {
    el.focus()
   }
  }
 }
})
//hash（url   #       ）
function hashChange() { 
// ~ :class="{selected:hashName=='all'}"；:class="{selected:hashName=='active'}"；:class="{selected:hashName=='completed'}"
 let hashName = location.hash.replace(/#\/?/, '') //       #/？，   all，active，completed
 if (filters[hashName]) {  //       hashName  
  app.hashName = hashName //   app    hashName     
 } else {
  location.hash = ''  //  
  app.hashName = 'all' //     ‘all'，         
 }
}
window.addEventListener('hashchange', hashChange) //    hash

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.