Vue – 在標籤中,綁定參數 (v-bind) 與監聽事件 (v-on) 的混和用法

HTML

  • v-bind 綁定參數 “href” 為變數 url,等於下面的 app.url
  • v-on 監聽事件 “click” 為方法 show(),等於 app.show()

JS

因為 vue 特性

  • app.url 等同於 http://google.com
  • app.show() 呼叫 vue 底下 methods 的 show()

「前往指定網址」點擊後會先出現 “Hello World” 後才前往 Google 網址。有趣的是,show() 回傳的 false,並不會讓 href 前往 Google 終止行動。這跟 JavaScript on 事件是不同的,可以看「點我會被終止超行動」就會發現並不能如期地前往指定網址。

Vue – 關於 v-html 的用法解說

官方說明

HTML

  • google 因為放在 v-html 中,所以整串 div 會被替換為 HTML 字串
  • jsnwork 因為不放在 v-html 中,所以 {{jsnwork}} 被替換後會顯示 <a> 文字,而非 HTML 編碼。另外要注意,鬍子格式 (Mustache) 的變數寫法,Vue 規定是不能寫在屬性喔。

JS

 

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