Vue – Vue.component 組件教學 – 使用 v-bind、v-for、x-template

剛學到 Vue.component 這部分的參數傳遞,覺得繞來繞去真的不是很好理解。重複寫了約 5 次左右才弄清楚一些步驟與參數的關係。下面就依照建立的順序來解說。

官方教學點我

影片教學

1. 先建構 HTML 框架

<ol> 底下將會是放置我們需要循環的列表

2. 設定好 Vue 與即將輸入的 JSON 資料

data 中放置自訂參數 cart,內容需要 JSON 數據

3. 擺放準備讓資料循環的的模板位置

我們看增加的這行。這裡開始的數據傳遞一開始比較不好理解,我在底部有附圖可以參考

  • 我自訂組件名稱為 c-cart (component-cart 簡寫),標籤寫法就寫成 <c-cart> 即可。注意,不可與 HTML 標籤相同,例如取名 <menu> <header> … 否則無法作用。
  • v-for 的屬性也就是 for loop 的意思。val 從 cart 中逐一取出
  • v-bind 綁定的接口名稱,我們自訂名稱為 item
  • 接口 item 代入的值為 val,這個 val 由 cart 取出

4. 製作組件,並將組建位置放在 new Vue 初始之前。

  • c-cart 也就是對應 <c-cart>
  • 接口承接的名稱 ‘item’,將被模板當成物件

5. 完成

6. 關係圖

我將上方的建立步驟,分成 1 ~ 3 並搭配箭頭,應該就好懂多了。

模版也改使用 text/x-template

如果不要將模版寫在 Vue 內部的話,可以參考

  1. 將模版用 <script type=”text/x-template”> 包圍後,增加 ID
  2. component 的部分,將參數 template 指定為 ID

<script type=”text/x-template”> 我自己測試,也可以使用 <template> 包圍。最後程式碼就變成

JavaScript – jQuery – 使用 jshashes 取得 MD5/SHA等多樣演算編碼

jshashes 這個套件提供了 Hash 演算:MD5、SHA1、SHA256、SHA512、HMAC、RIPEMD-160。點我前往 Github 下載,或是使用 bower 安裝:

 

使用方式

 

php – MySQL – 將 timestamp 轉換為 date 或 datetime

如何將字串(string)的時間戳記(timestamp) 1486524609 格式化 (format)成 DateTime 2017-02-08 11:30:09 ?

PHP

 

MySQL

 

php – imap_mime_header_decode() 未定義的開啟方式

如果使用 imap 相關函數抱錯,例如使用 imap_mime_header_decode() 出現如

我們前往 php.ini 將套件開啟。

將註解拿掉

重新啟動 apache 即可。官方參考

 

PHP – 解析 Email 原始檔案(文本)

可使用 EmailParser 套件來分析。我們透過 Composer 安裝,或是去 Github 下載

使用方式

 

繼續閱讀