跟著W3做~Vue

 下面是跟著做的紀錄。五個步驟：
1~3. 建立 HTML， 建立 DIV， 連結 VUE.JS。
4. 寫一些程式在VUE的JS中。
5. 在DIV寫格式區塊，讓剛剛的JS可以連結。

另外還找到tad老師的VUE筆記。三大前端框架庫、六角學院的YT。

練習K生命。

一般介紹

• veu intro，{{ 中間也可以跑 JS函式計算 }}
• W3C使用六項，v-bind、v-if、v-show、v-for、v-on、v-model
• v-bind：裡面有提到backgroundColor，是使用 HSL(色相、飽和、明亮)，感謝微軟說明。
  
• <div v-bind:class="classNmae">內容</div> (可以簡寫為 :class )
  主要是設定div綁定哪個CSS的class，所以CSS那邊可以寫多個class，之後到vue那邊return className: 'class2'或是 className:'class3'。
  但如果確認是要class3，就可以直接 v-bind:class={class3 : true }，vue不用回傳。
• vue是使用駝峰法，fontSize (css : font-size)
  <div v-bind:style="{fontSize : size }">內容</div>
  要在Vue那邊 return 一個 size : '28px'
  
  
• v-if 與 v-else，中間若是穿插其他 tag 如<p>就會破功??
  
  
• 跑 v-model時，突然想到，輸入的東西是暫存在哪裡呢???
  
  
• CSS binding，這邊用 '+ 變數 +'，另類的括號嗎???
  
  

Scaling UP

• 使用vite，要用 npm run dev，可以跑起來，但要如何放在網站裡呢???開啟XAMPP連結到專案的目錄下，看不到@@之前用CDN連結vue.js的沒問題。
  有測到是port(node開啟5173，xampp是80 )的問題??
  感謝jasonLee分享要用npm run build，但還是不成功。
  
  
• 編輯完Components還是要F5一下網頁才能正確顯示。
  component是模型，資料要在APP.vue那邊輸入。
  
  
• vue-props，可以給components(模型) 內容，這樣每個模型都會是不一樣的。可以把props想像是接收器。
  真的要看中文，有提到若不是string的屬性，前面就要用v-bind
  且component無法修改傳過來的值，所以加個變數=this.isFavorite，然後再加個method 去修改這個變數。
  
  
• vue-$emit()，跟props相反，模型給父元素(App.Vue)內容。
  
  
• v-for component，出現splice(1,1)，表示從第一個之後刪除，刪除一個。
  
  
• fallthrough，0227練習時，將<li>前後的<div class='pink'>竟然也會影響<li>，讓li的CSS掛掉。但0228放假回來，0229測試時，又正常了@@怪@@
  $attrs，表示前面是甚麼標籤名稱，就直接抓CSS的標籤名稱。例如<span v-bind="$attrs">這邊使用span標籤</span>，就會去抓CSS的span style。
  
  
• scoped styling，寫在component的CSS會影響其他的vue。所以要特別加上scoped。
  
  
• slot-comp，可以讓我們再App.Vue新增Vue格式(???一開始就是在這新增，但後來搭配component，感覺是只要component的CSS樣式)
  
  
• scope-slot，v-slot:任意名稱，只是為了讓方便取其屬性。
                      #專有名稱，必須搭配component的 name。
  
  
• dynamic components，用 :is="某個computed方法" 可以切換不同的components。搭配 KeepAlive 紀錄某個components的操作動作。
  
  
• teleport，可以移動內部的DIV到 #app之外。
  
  
• http request，感謝yolala分享(裡面還有API說明，就像服務員)，但還是一直都抓不到TXT內容，最後是眼花，應該要跟index.html同一層位置(txt 、json都是要同一層)。W3也有教API。
  擷取JSON(感謝黑皮考町)，花了很多時間除錯@@const data 跟 this.data沒看清楚@@
  有兩種擷取http，一個是fetch() (是JQUERY)，
  　　　　　　　 一個是 axios ( 要 npm install axios )
  
  
• template refs，可以在某個html加入名稱 ( ref='r1' )，接著就可以輸入資料進去 或是 抓取資料 (測試打中文時，會同步顯示注音耶@@)。搭配v-for 時，refs是整個陣列。
  
  
• lifecycle hooks，有14個組件
  beforeCreate，用於設定全域事件偵聽器，不能修改資料或方法。
  created，用於透過 HTTP 請求取得數據，或設定初始資料值。如下例所示，資料屬性「text」被賦予初始值。
  updated，使用的時候要小心，有可能會無限循環。
  
  
• provide/inject，

240621看到 上面寫的位置

跑的時候要去終端機那邊  cd .\W3\vue\w3_vue001\; npm run dev