看了兩天的Vue，還是上手寫一個簡單的todolist更實用（文末有彩蛋）。
一、使用vue-cli腳手架快速搭建一個框架
利用vue-cli來自動生成我們項目的前端目錄及文件，方法：
npm install -g vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev
這樣我們的一個基于webpack的vue項目目錄就可以快速構建好了。
目錄如下：
二、完成一個簡單的todolist
接下來就看一下webpack.base.conf文件，這是核心文件，必須執行的文件，這里可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。在main.js中可以看到創建了一個vue實例，并加載了模板組件App.vue，所以我們的todo list代碼就可以寫在App.vue中。
簡單的todolist我們可以完成這幾個功能：
1、顯示todo列表
2、判斷列表任務完成狀態，若完成則添加相應的樣式
3、在輸入框中動態添加todo項目，點擊回車在列表中顯示
4、點擊相應的項目轉換狀態
首先我們完成顯示列表的功能：
<template> <div id="app"> <input/> <ul> <li v-for="item in items"> {{item.label}} </li> </ul> </div></template><script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ] } } }</script>
效果
export后面跟的對象，會作為 new Vue()的參數，來創建一個Vue的組件，并導出。
判斷任務的完成狀態，完成則添加text-decoration樣式
官方文檔中我們可以看到：
綁定class樣式
如果v-bind中class后是一個對象的話，鍵代表添加的class的名稱，value值代表一個布爾值，用來控制這個class屬性的有無。
所以我們就可以這樣：
<template> <div id="app"> <input/> <ul> <li v-for="item in items" v-bind:class={finished:item.isFinished}> {{item.label}} </li> </ul> </div></template><script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ] } } }</script><style> .finished { text-decoration: line-through; }</style>效果
在輸入框中填寫item，點擊回車完成添加列表并顯示同時清空input框內容
用到的知識：
監聽回車
表單控件監聽
<template> <div id="app"> <input v-on:keyup.enter="addNewItem" v-model="newItem"/> <ul> <li v-for="item in items" v-bind:class={finished:item.isFinished}> {{item.label}} </li> </ul> </div></template><script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ], newItem: '' } }, methods: { addNewItem () { this.items.push({label: this.newItem,isFinished: false}) this.newItem = '' //清空輸入框 } } }</script><style> .finished { text-decoration: line-through; }</style>點擊內容進行狀態轉換
在li標簽上綁定一個click事件，點擊時修改isFinished
//添加代碼 <li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)"> {{item.label}} </li>methods: { finish (item) { item.isFinished = !item.isFinished }}這樣一個簡單的todolist的基本功能已經完成。
動圖效果
小彩蛋：linux下制作GIF動圖
上網查找了很多辦法，很多不適合linux平臺，發現這個辦法不錯:
下載SimpleScreenRecoder軟件：
三條命令：
sudo add-apt-repository ppa:maarten-baert/simplescreenrecordersudo apt-get updatesudo apt-get install simplescreenrecorder
安裝好后你可以選擇錄制區域
參考資料：
Vue官方API文檔：https://cn.vuejs.org/v2/api/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
