JavaScript

Vue.js 複習:component 命名

我們在Vue使用組件,一般都是用Vue.component( )來寫Vue.component( )的第一個參數是組建名稱,第二個參數是物件,裡頭會有data、template、methods...etc Vue.component("組件名稱", { <u>//....</u> } 組件名稱基本上會有三種命名方式 1.kebab-case 串燒式命名法 各單字之間用「-」隔開 2.camelCase  駝峰式命名法 首個單字小寫,後面各單字開頭大寫 3.PascalCase 帕斯卡命名法 首個單字大寫,後面各單字開頭也大寫 Vue組件可以使用以上三種方式命名,但要注意的是,轉換成組件標籤後,一律是kebab-case 串燒式命名法 例如: //kebab-case 串燒式命名法 Vue.component("
SimonAllen

Keep-alive 保存切換組件時的資料

使用Vue 動態切換組件時(或SPA),有時我們在切換組件時想保存原本組件的資料: 例如有一個組件是表單,寫到一半點選其他組件,網頁把表單組件置換成別的組件,這時再切回表單組件時,會發現原本寫表單寫到一半的文字資料不見了。 這其實很合理,因為組件切換是把原本組件刪除,切換回來是再次動態產生,所以新組件自然沒有保存被刪除置換前的資料。 想解決這方法,只要在表單組件(或想暫時保存資料的組件)外,用<Keep-alive>標籤把該組件<組件>標籤包起來就好了! 原本是組件1和組件2切換 <組件1></組件1> <組件2></組件2> 改成這樣即可 <Keep-alive> <組件1></組件1> <
SimonAllen

ES6 解構賦值-陣列

陣列解構 在ES5的寫法中,如果我們要取出物件的屬性都某個變數中,可能會這樣寫 var nums = [120,325,135]; var first = nums[0]; var second = nums[1]; 在ES6我們可以改成這樣: const nums = [120,325,135]; let first; let second; [first,second] = nums; 非常奇怪的寫法,但如果這樣寫: [first,second] = nums; 這樣視同: first = nums[0]; second = nums[1]; 可以理解成這樣: 宣告 陣列 = [值,值,值]; 宣告 變數1;
SimonAllen

Vue cli 安裝 Bootstrap4、Sass、jQuery 和 Popper.js

紀錄一下環境建置 首先建立vue cli專案 vue init webpack 專案名稱 或 vue init webpack-sample 專案名稱 接著 cd 專案名稱 npm 安裝套件 npm安裝Bootstrap 4 npm install bootstrap -S 現在install bootstrap會自動選bootstrap4 npm安裝jQuery npm install jquery -S npm安裝popper.js npm install popper.js -S npm安裝sass、sass-loader、node-sass npm install sass sass-loader node-sass -S -S等於—save,是要把相依寫入進package.json
SimonAllen

Day30 心得-持續學習、持續成長

今天是鐵人賽第30天,很榮幸能參與這個活動並完賽。 第一天說要至少完成克服js的奇怪部分第6章節,而我也做到了,目前進度是: (有些地方會跳著看,第6章後不少段落已看完) 還是來點賽後檢討: 1. 時間分配不均 畢竟已開始上班,平日時間只剩白天的空檔或晚上可以利用,假日也不會全程坐在電腦前,在學習、筆記時間的拿捏還需要調整。 2. 效率不足 時間充足的狀況下,看完一段影片,縱使是先前就看過的段落或知曉的知識,還是需要點時間消化成文字。 有時消化著消化著就看使做其他事情,導致效率並不是很好,可能某段影片很短,但我卻看了3遍才真正進入狀況,浪費掉一些無謂的時間。 3. 惰性 承2,常發生電腦在播影片,我人坐在電腦前滑手機的狀況,尤其後期有點懶惰,每天都很想偷懶。 4. 文筆不夠流暢 學習時,腦子知道是一回事,但要轉換換成文字又是另一回事,這導致筆記有些部分太口語,有些又太流水帳,我的文筆潤飾還需要再加強。 上面最主要的問題點是2、3。   開賽前,為了不讓自己在30天
SimonAllen

Day29 Object.create與class

今天來看看其他建立物件的方法 除了new建構子和物件實體語法,JS還有別種建立物件的方法,那就是ES5新增的Object.create和ES6新增的類別class。 先來看Object.create,以下為程式碼: var Flash = { firstname: '預設值', lastname: '預設值', run: function(){ return 'Run,' + this.firstname + ',Run!'; } } var Barry = Object.create(Flash); console.log(Barry); 首先用物件實體語法創建物件並以變數Flash指向它。 接著使用使用Object.create()方法並傳入Flash當參數,並以變數Barry指向它。 現在用console.log印出Barry,結果是: 真的只是一般的空物件嗎? 點開瀏覽器console印出的這個空物件 我們可以看到,Barry(指向的)
SimonAllen

Day28 內建的函式建構子

今天來看看內建的函式建構子 什麼是內建的函式建構子? 其實是將JS的內建的Number()、String()、Date()....等其他內建函式,與new函式建構子一起使用。 來看看看程式碼,直接在Chrome瀏覽器console上操作。 Number()是JS的內建函式之一,在程式碼Number的開頭前多了一個new建構子,根據昨天筆記,我們知道new這個function constructor函式建構子會創建新物件,並將後方函式內的this指向它,依照函式內的設定創造該新物件的屬性。 現在變數a指向的東西,並不是基本型別Primitive Types,而是物件型別Object Type,在這個物件裏頭,有一個基本型別數值3的存在。(別忘記物件是名稱與值配對的組合) 所以a是物件,原型是Number,用typeof檢查a的型別: 我們在console打Number.prototype.可以看到一些prototype的方法: prototype不是用來取用函式自己的原型,而是用來取用new建構子創造出來的物件原型, 這代表我們可以對物件a做一些操
SimonAllen