在經過閱讀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元素及相應的組件創建實例，組件
?
效果圖
至此，結束。
