Html產生按鈕後，js設定彈跳視窗顯示字幕 function()代入任意字元，便可使用console追蹤按鈕點入詳情，同時在多種的事件語法中，可提供紀錄匯出資料，是很重要的紀錄功能。 e.target用法 簡述：觸發事件就我們的印象中是帶入參數，傳遞從html來的特定欄位值，然而在原生的JS寫法，時常利用function(e){}預設的e去取得被點擊區塊的詳細資訊，而常使用e.target取得內部元素資料 案例 詳述：當要刪除經由迴圈產生出的列表時，就可以使用e.target確認id編號，再經由迴圈比對編號知道序號index，再splice刪除。

前言：時常用於“我的最愛”功能列，一般我們所點選的資料都會藉由傳入後端資料庫儲存，如要取用也須從資料庫取出，無形中會增加資料庫的負荷，要節省儲存庫的容量以及載入速度，建議使用localStorage、cookie、sessionStorage的方式在瀏覽器儲存。 localStorage語法範例 存入方法：setItem("key位置",宣告) 取得方法：getItem('key位置') 匯入流程 先定義btn與html的ID位置，代入監聽公式，再建立function事件寫入匯入的公式（同上）

解說傳值、傳參考 應對方式：Object.assign 操作實例 openModal(item){ //this.tempProduct= item; //因為物件傳參考的特性，直接用item會與tmepProduct相同 this.tempProduct= Object.assign({},item); //可採用es6語法，將item傳自獨立的空物件裡，才不會互相渲染 },

vue元件階層處理方式 父子階層可透過emit及props做傳遞 如非父子層的關係，同階層就得經由eventbus傳遞，不過僅適合在較輕量的專案，因過多易混亂難以管理 也能選擇全域變數，但資料無法資料綁定 於是vuex就是為了解決元件層級傳遞的複雜性而被開發出，不論在層級位置都能互相傳遞，也能有雙向綁定的特性 總結使用時機

Webpack是那位？ webpack幫我們做的事情很簡單，就是幫我們編譯我們的Preprocess成瀏覽器看得懂的內容然後打包成一包的完成檔案然後拿去server上傳上去。 webpack 把「任何資源」都視成一個模組。圖片是模組，所以你可以 import Image from './assets/banner.png'；CSS 是模組，你可以 import styles from'style.css'，只要是任何資源都可以 import 進來使用。 使用模組化，避免載入順序引發錯誤的訊息 如使用框架開發，如Vue、react，仍建議使用原框架的CLI

$bus.$emit就是與另一個vue頁面做串連，例如彈出視窗、加入購物車 元件用法又分為兩種，一種只是圖型呈現，就只需要搭載至主頁面中就可以，另一種是需要呼叫主頁面裡的變數、函式，就需要用到emit及props呼叫。 第一種元件：單純呈現template 沒有js函式的部分 下圖為示範主頁面如何載入元件，例如：sidebar、navbar

前面常被提及的props語法其實就是元件的寫法，只是將原本在底下新增的元件移置到新的vue頁面上，原本的執行方式是在html裡頭加上<name></name>的元件，就能顯示出新vue上的功能，而要顯示此功能就需要進行串接的動作，在新的vue元件裡，需要先命名一變數，當主頁面或其他頁面要使用此元件時，只需要完成變數間串接便可使用， Props的用法 前提是因為元件屬於內層，vue的主頁面是外層，當要從外層傳入內層需要使用Props語法，將元件裡的變數載入，再到html裡做指定的更換，才能將外層的元素(data內資料)載入到元件內，完成串接 props: ['pageProps'], 主頁面串接範例如下： <Pagination :pageprops="pagination" ></Pagination> *pagination是data裡的變數

執行三步驟 1.取槍：產生一個XMLHttpRequest 2.上膛：取得要讀取的網址，get(讀取資料)、傳送資料到伺服器 3.擊發：傳送send 4.回膛：回傳資料到自己的瀏覽器 var xhr = new XMLHttpRequest(); xhr.open('get','https://vince.project/data.json',ture) xhr.send(null);

1. 函式寫法 函式宣告範例 function greet(){ alert('你好') } //執行函數 greet();

什麼是 HEAD？ HEAD 就是你目前指向的版本狀態，而 HEAD 可以選擇它指向到 分支 (branch) commit 版本 想看最初的版本？ 如圖：切換成舊版本

即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），目前共四種串接方式XMLHttpRequest、jquery、Fetch、Axios 詳細介紹四類的不同：https://medium.com/dot-js/%E7%94%B1%E5%89%8D%E7%AB%AFrequest-%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E6%B3%95-fbf8a0b4023a XMLHttpRequest 其一老式做法 ── XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open('get','URL',true);

功能庫：https://oscarotero.com/jquery/ 六角影片：https://www.youtube.com/watch?v=GVWOIP-HX70 Animate網址：https://daneden.github.io/animate.css/ jQuery是個函數庫，較多的功能是在變更動畫效果，控制class屬性或id去更動Css(style)行為。函數庫裡功能除了單一個綁定屬性執行hide()外，其他有很多功能是需要放參數，像是秒數slideToggle（2000），又或者使需要{}進行更多動作，例如animate({scrollTop: 2000}) 1. slide設計滑動效果 slideUp : 關閉 slideDown ：開啟

推薦文件(首選)： https://frankknow.com/sass-tutorial/ 參考文件： https://blog.kdchang.cc/2016/10/11/sass-scss-tutorial-introduction/ 安裝步驟：vscode內部下載live sass並開啟資料夾進行載入 父子元素相依語法，將同父元素的程式碼，放入同一階層中 @變數：語意化命名變數 import統一管理：經由多個子檔案構成一包主要的scss資料，注意代入順序，上至下渲染

目的：我們透過API取得raw data後，勢必是要將資料經過整理後，呈現在網頁上，而龐大的資料為了要供使用者查詢，會分類資料並納入選擇欄位裡，因此如何將資料導入選擇欄位裡是很基本並常見的程序。 這裡以vue框架作編寫，一般來說，呈現陣列資料必定會使用v-for迴圈，搭配select及option標籤讓資料可以被分類然後被選取 <label for="city" class="mr-2 col-form-label">縣市</label> <select class="form-control" id="city" v-model="select.city" @change="select.area = ''" >

方法：使用new Set取得不重複資料 Set類似Array, 但其中元素的值都會是唯一不重複的 Set甚至可以搭配Array使用，例如將Array的值unique const arr = [1, 2, 3, 4, 5, 5, 5] const setArr2 = new Set(arr) for (let i of setArr2) { console.log(i) } // 1 2 3 4 5

Clipboard 參考資料 npm install clipboard --save main.js中全局/單頁引入 import Clipboard from 'clipboard'; Vue.prototype.Clipboard=Clipboard; import Clipboard from "clipboard";//單頁面引用

可以使用兩種方式，一種為fontawesome，另一種為vue.loading.overlay套件 https://www.udemy.com/course/vue-hexschool/learn/lecture/10896746#notes (1) vue.loading.overlay套件 安裝方式：npm https://www.npmjs.com/package/vue-loading-overlay 載入main.js，以元件方式註冊在全域 將元件匯入Html裡的外側(temlate下層)並動態呼叫islaoding，之後再新增變數isloading為布林值，true則開啟false就關閉

第一步是先將raw data分類出select可以導入的縣市資料庫後，接下來就是進行基本的判定式(if/else)再利用陣列語法(filter)匯入顯示頁面。 filter陣列過濾：取得符合條件的資料 const pharmacies = this.data.filter(pharmacy => { //如果data裡的area沒有資訊，則找出與data裡的city相同的縣市 if (!this.select.area) { return pharmacy.properties.county === this.select.city; } //找出與data裡的area相同的區域 return pharmacy.properties.town === this.select.area;

新增路由路徑及連結 <router-link>組件支持用戶在具有路由功能的應用中(點擊)導航。通過to屬性指定目標地址，默認渲染成帶有正確鏈接的標籤，可以通過配置tag屬性生成別的標籤.。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的CSS類名。 <router-link>比起寫死的<a href="...">會好一些，理由如下： 無論是HTML5 history 模式還是hash 模式，它的表現行為一致，所以，當你要切換路由模式，或者在IE9 降級使用hash 模式，無須作任何變動。 在HTML5 history模式下，router-link會守衛點擊事件，讓瀏覽器不再重新加載頁面。 當你在HTML5 history模式下使用base選項之後，所有的to屬性都不需要寫(基路徑)了

範例ㄧ：價格 將價格 price 加上千分位符號與 $ 字號。可使用「|」（pipe）聯集多個 Filter，要注意順序，愈靠左愈先執行。 price為數值，後方為待執行的子函式，預期的結果是$9,990 <div id="app"> <div>${ price | commaFormat | priceFormat }</div> </div> 新增Filters函數列，子函式們會自動將price的數值當作參數代入，並依序執行條件後回傳。