文章搬遷搬遷~~
因為自己弄了HEXO將來文章會放到那，這裡將停止更新，而文章也會慢慢更新到那裏去，歡迎大家來看與指教。 網址:https://donggualemon.github.io/
發表文章
Vue Todo_List 小實作新增功能與發現問題
在上一篇的Todo_List完成了，編輯和刪除還有新增的功能，這次準備新增篩選的功能，有全部事項、已完成事項、未完成事項。 但在新增這些事項時發現一些問題，然後順利解決了所以就紀錄一下😀 有3個篩選的功能，所以必須多3個選取按鈕。 這裡就不多說啦就3個radio button。 直接進入怎麼篩選的程式嗎吧! <li v-for="(item,index) in filtertext" :key="item.uuid" :class="{finished:item.isFinished}"> 將原本in items改成filtertext，將要把filtertext放入computed做處理。 <input :checked="showall" :class="{show:showall}" click="show1" name="show" type="radio">全部 <input :checked="showend" :class="{show:showend}" click="show2" name="show" type="radio">已完成 <input :checked="showing" :class="{show:showing}" click="show3" name="show" type="radio">未完成 新增了3個radio button然後綁定checked這樣能獲取狀態。 computed:{ filtertext(){ if(this.showall==true){ return this.items; } if(this.showend==true){ return this.items.filt...
Vue Todo_List 小實作
寫Vue一陣子了，但蠻少發文的所以來介紹一點小實作，經典又簡單的todolist，有輸入、刪除、編輯、已完成的功能。 主要學習點: V-for的使用。 資料的雙向、單向綁定。 V-if的簡單使用。 事件觸發的綁定。 那就先來做個樣板吧!! <template> <div id="app"> <input/> <ul> <li v-for="(item,index) in items" :key="index" :class="{finished:item.isFinished}"> <span>{{item.label}}</span> </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> 這樣的樣子會呈現這樣，單純的輸入與一開始的內容。 透過V-for來列出我們物件裡面的資料，並透過V-bind綁定class並與style配合劃掉已完成的事項，非常簡單就做出單純的layout。接下來我們要輸入文字並添加事項囉! <input class="addtext" @keyup.enter=...
Vue-CLI 2 => Vue-CLI 3 升級囉~~
之前是從Vue-CLI 2開始接觸網頁這一塊的，最近不久Vue-CLI 3推出之後一直考慮是否要升級，希望能無痛轉移哈哈，考慮了一陣子還是該踩踩坑啦!!順便剛好手邊有機會來著手碰碰Vue-CLI 3直接支援的PWA(目前頭痛不願面對阿~~~)。 安裝: Vue CLI v3 要求 Node.js V8 或更高版本(建議版本 8.10.0+ )。 能使用npm或yarn進行安裝，我自己是用npm~ npm install -g @vue/cli or yarn global add @vue/cli 安裝完後可透過 vue -V 來確認版本是否為3.0 建立新專案: 以前是透過 vue init my-project 來建置新專案，而Vue CLI 3則改成使用 vue create my-project 來代替原本舊的寫法。 接下來開始安裝畫面:詢問安裝套件(我選擇自選) 然後開始選擇想要的套件(我有選擇pwa剛好可以練練，其他router、vuex我習慣手動裝) 詢問配置文件要獨立還是放package.json 是否記住這些選項 過來就等待安裝啦~~接下來要開專案囉。 cd my-project npm run serve 不再是以前的 npm run dev 我們執行指令之後，Vue-CLI會啟動一個http服務，可以從localhost打開。然後我們打開網頁。 而和之前一樣若要把程式碼打包，丟server讓網頁上架一樣的指令，把程式碼build到dist資料夾。 npm run build vue.config.js 設定: 會發現以前的webpack.config.js不見了!!沒錯被隱藏起來了，假如有要改配置的話要手動新增 vue.config.js放在根目錄中(假如沒有要改就不用手動就用預設)。 相關配置請查詢官方設定 請按這裡 。(底下為示範) module.exports = { baseUrl: '/', outputDir: 'dist', compiler: false, chainWebpack: () => {}, configureWebpack: () => {}, v...
Vue和Css的小動畫時間 1
之前意外的案子才接觸前端網頁，並使用了Vue.js所以對一些基礎不是那麼厲害，但寫一陣子了對於資料流阿或控制還是可以的，最大的問題還是美感和CSS!!! 常常被老闆講做的真醜哈哈~ 所以開始來彌補以前跳級打怪留下的債囉，所以就做些小小動畫來練練，雖然也是從別人那慢慢看學 (抄) 來的，接下來就來看看幼幼班等級的CSS動畫吧! 大概長這個樣子 一個簡陋的進入畫面，也能當loading畫面~ 程式碼大概是長 Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="app.css"> <title>Document</title> </head> <body> <div class="container"> <span class="text1"> Welcome</span> <span class="text2">my web</span> </div> </body> </html> 一個div和兩個span放一些想要的內容 CSS部分: *{ padding: 0; margin: 0; font-family: sans-serif; } body{ background: #000; } .container{ text-align: cent...