在經過閱讀vue的文檔（https://cn.vuejs.org/v2/guide/installation.html）之后，開始坎坷的學習之路。看著不難 [“真摯”的笑臉]

一、 跟著教程將vue和vue-cli進行安裝

大概就是以下命令：

npm install vue
npm install  vue-cli

二、搭建項目

vue init webpack  todolist

根據提示選擇需要的部分，像eslint（測試）、vue-route（路由設置）

項目結構目錄

• 我沒有使用vue-route，過于復雜了，使用eslint時，由于使用的是編譯器的格式化，但與測試的代碼的格式不同會頻繁warning

三、開始編（踩）碼（坑）

實現的基本功能

1、實現輸入并且能夠展示在下方區域
2、點擊按鈕或者回車實現1功能
3、點擊列表樣式進行修改

?

• 在template標簽內構建HTML結構

//完成輸入功能
<template>
<div>
    <input type="text"/>
    <button>確認</button>
</template>

與react相似的，在template內只能有一個子元素，所以應用一個div將所有內容進行包含

?

• 實現點擊/回車事件

<input type="text" v-on:keyup.enter="addTask" v-model="newTask"/>

vue中使用v-on指令進行對時間的監聽，使用v-model綁定數據變量

?

• 將輸入的內容進行展示

<template>
  <div>  
      ……
    <div>
      <ul>
        <li v-for="task in tasks" }</li>
      </ul>
    </div>
  </div>
</template>

v-for將一個數值對應為一組元素，進行列表渲染

?

• 增加CSS樣式

<li v-for="task in tasks" v-bind:class={finished:task.isFinished} v-on:click="finish(task)">
{{task.content}}
</li>

使用v-bind:class,更具變量數值的true/false 來決定是否渲染該樣式

• 使用export default將對象進行導出,包括組件中的數據及事件

export default {
  name: 'Content',
  data() {
    return {
      tasks: [
        {
          content: "read books",
         isFinished: false
        }
      ],
      newTask: ''
    }
  },
  methods: {
    addTask() {
      this.tasks.push({content: this.newTask, isFinished: false});
      this.newTask = '';
    },
    finish(task) {

      task.isFinished = !task.isFinished;
    }
  }
}

這個對象導出作為 new Vue()的參數

• 在主文件中調用

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

使用new vue（）接受參數DOM元素及相應的組件創建實例，組件

?

效果圖

至此，結束。