看了兩天的Vue，還是上手寫一個簡單的todolist更實(shí)用（文末有彩蛋）。
一、使用vue-cli腳手架快速搭建一個框架
利用vue-cli來自動生成我們項(xiàng)目的前端目錄及文件，方法：
npm install -g vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev
這樣我們的一個基于webpack的vue項(xiàng)目目錄就可以快速構(gòu)建好了。
目錄如下：
二、完成一個簡單的todolist
接下來就看一下webpack.base.conf文件，這是核心文件，必須執(zhí)行的文件，這里可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。在main.js中可以看到創(chuàng)建了一個vue實(shí)例，并加載了模板組件App.vue，所以我們的todo list代碼就可以寫在App.vue中。
簡單的todolist我們可以完成這幾個功能：
1、顯示todo列表
2、判斷列表任務(wù)完成狀態(tài)，若完成則添加相應(yīng)的樣式
3、在輸入框中動態(tài)添加todo項(xiàng)目，點(diǎn)擊回車在列表中顯示
4、點(diǎn)擊相應(yīng)的項(xiàng)目轉(zhuǎn)換狀態(tài)
首先我們完成顯示列表的功能：
<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()的參數(shù)，來創(chuàng)建一個Vue的組件，并導(dǎo)出。
判斷任務(wù)的完成狀態(tài)，完成則添加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，點(diǎn)擊回車完成添加列表并顯示同時清空input框內(nèi)容
用到的知識：
監(jiān)聽回車
表單控件監(jiān)聽
<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>點(diǎn)擊內(nèi)容進(jìn)行狀態(tài)轉(zhuǎn)換
在li標(biāo)簽上綁定一個click事件，點(diǎn)擊時修改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的基本功能已經(jīng)完成。
動圖效果
小彩蛋：linux下制作GIF動圖
上網(wǎng)查找了很多辦法，很多不適合linux平臺，發(fā)現(xiàn)這個辦法不錯:
下載SimpleScreenRecoder軟件：
三條命令：
sudo add-apt-repository ppa:maarten-baert/simplescreenrecordersudo apt-get updatesudo apt-get install simplescreenrecorder
安裝好后你可以選擇錄制區(qū)域
參考資料：
Vue官方API文檔：https://cn.vuejs.org/v2/api/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
